0

Estoy intentado mandar unas respuesta de un formulario, donde ya teniendo la respuesta de la operación en el archivo js, busco la forma de enviar los datos y actualizarlos en la base de datos de mi app vía ajax, he visto muchos tutoriales y documentación, pero no doy con la solución, aquí le pongo mi código:

Archivo HTML:

{% extends "plantillas/base.html" %}
{% block content %}
{% load staticfiles %}  
{{ user.numero_empleado}}
<script src="{% static 'js/int.js'%}"></script>
<div><form method="POST" id="demo">
{% csrf_token %}

   <h6>Tipo de peticion:{{form.petit}}</h6>
   <h6>Razon:{{form.razon}}</h6>
   <h6>{{form.solicitudes_id}}</h6>
   <h6>Fecha inicio:{{form.periodo_init}}</h6>
   <h6>Fecha fin:{{form.periodo_fin}}</h6>
   <h6>Introduzca dias a tomar<input id="dias" type="number" name="dias_adicion"></h6>
   <h6>Introduzca horas a tomar<input id="horas" type="number" name="horas_adicion"></h6>
   <input type="hidden" id="const_dias" name="d_pendientes" value="{{ user.d_pendientes }}">
   <input type="hidden" id="const_horas" name="h_pendientes" value="{{ user.h_pendientes }}">

Recuerde, que usted dispone de {{ user.d_pendientes }} dias y 
{{ user.h_pendientes }} horas a compensar <br>

<button type="submit" onclick="calculo()" class="boton">Guardar</button>

Donde de ese archivo, mando a llamar el .js con la siguiente operación:

   function calculo()

{

    var dias = parseInt(document.getElementById('dias').value);
    var horas = parseFloat(document.getElementById('horas').value);
    var dias_base  = parseInt(document.getElementById('const_dias').value);
    var horas_base  = parseFloat(document.getElementById('const_horas').value);

    dias_base -= dias;
    horas_base -= horas;

    alert(dias_base);
    alert(horas_base);
}     console.log(calculo);

$(document).ready(function () {
    $("#demo").calculo(function (_calculo) {
     $.ajax({
       type: "POST",
       url: "/solit/",
       data: {
      'd_pendientes': $('#demo').val(), // from form
      'h_pendientes': $('#demo').val() // from form
    },
    success: function () {
      $('#message').html("<h2>Contact Form Submitted!</h2>")
    }
  });
  return false; //<---- move it here
});

Archivo views.py:

def solit(request):
    if request.method == 'POST' and request.is_ajax():
        form = addiForm(request.POST)
        if form.is_valid():
            form.save()
            return redirect('index')

    form = addiForm()
    return render(request, 'plantillas/adicionar.html', {'form':form})

Archivo urls.py:

urlpatterns = [

path("solit/", solit, name='solit'),

]

O sea, lo que busco es mandar a actualizar los campos de mi modelo haciendo la operación en el frontend, con js y el resultado de este mandarlo vía ajax, sin recargar la pagina a actualizar los datos del user logeado, cualquier ayuda o comentario, me seria de gran ayuda o si estoy haciendo algo man en uno de los archivos mencionados aquí en la pregunta y muchas gracias por su atención de antemano.

4
  • Actualmente cual es el error que te genera ?¡ Commented el 18 jul. 2019 a las 0:41
  • int.js:17 Uncaught ReferenceError: $ is not defined at int.js:17 @DiegoAvila
    – Jonathan
    Commented el 18 jul. 2019 a las 13:01
  • para que funcione este debes tener previamente incluido Jquery eso deberias hacerlo quiza en "base.html" por eso se genera dicho error. Commented el 18 jul. 2019 a las 13:04
  • @DiegoAvila eso no es, por que ya incorpore la libreria de jquery, y aun manda el mismo error en la consola. Saludos
    – Jonathan
    Commented el 18 jul. 2019 a las 17:42

2 respuestas 2

1

Utiliza FormData así envías todo el formulario incluyendo en csrf_token

let data = new FormData($('#demo').get(0));
$.ajax({
   type: "POST",
   url: "/solit/",
   data: data, 
   success: function () {
      $('#message').html("<h2>Contact Form Submitted!</h2>")
   }
})
-1

Retorna un JsonResponse con un

  • True

ó

  • False
def solit(request):
    if request.method == 'POST' and request.is_ajax():
       form = addiForm(request.POST)
       if form.is_valid():
            form.save()
            data['guardo'] = True
       else:
            data['guardo'] = False
       return JsonResponse(data)
    form = addiForm()
    return render(request, 'plantillas/adicionar.html', {'form':form})

y después lo validas desde el front.

    $(document).ready(function () {
        $("#demo").calculo(function (_calculo) {
         $.ajax({
           type: "POST",
           url: "/solit/",
           data: {
          'd_pendientes': $('#demo').val(), // from form
          'h_pendientes': $('#demo').val() // from form
        },
        success: function (response) {
            if(response.guardo){
              $('#message').html("<h2>Contact Form Submitted!</h2>")  
            }else{
               //Mensaje de error ...
            }
        }
      });
      return false;
    });
2
  • Muestra un ejemplo de como lo harias con mi codigo @Aprendiz por favor
    – Jonathan
    Commented el 18 jul. 2019 a las 20:19
  • @Jonathan yo no soy el autor de la respuesta
    – user128299
    Commented el 18 jul. 2019 a las 20:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.