0

Tengo un formulario para editar una incidencia, al tocar el botón "Editar" sale un modal para confirmar el envio del formulario, hasta aqui todo bien. El problema es que ahora necesito crear en el modal de confirmación un chekbox para enviar notificaciones si lo marcan y necesito obtener tanto la información del formulario como la del checkbox en mi vista, pero no me esta funcionando.

#Formulario que llama al modal

<form method="post" name="editar_inc" novalidate="novalidate">
<div class="card-body">
    {% csrf_token %}
    {% include 'incidencia/form_editar_incidencia.html' %}
    <div class="row justify-content-md-center">
        <div class="col col-lg-2">
            <button type="button" title="Editar" id="editar_modal" class="btn btn-block btn-primary" data-toggle="modal" data-target="#modal-default">
            Editar
            </button>
        </div>
        <div class="col col-lg-2">
            <a type="button" href="{% url 'incidencia:listar_incidencias' %}" class="btn btn-block btn-danger"> 
            Cancelar
            </a>
        </div>
    </div>
</div>

#Modal

<div class="modal fade" id="modal-default">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">Confirmar modificación</h4>
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
        <div class="modal-body">
            <p>¿Está seguro(a) que desea modificar la incidencia "{{ titulo }}"?</p>
            <form action="" method="post" novalidate="novalidate">
                {% csrf_token %}
                <div class="icheck-primary d-inline">
                    <input name="notificar" type="checkbox" id="check_notificar_update">
                    <label for="check_notificar_update">
                        ¿Desea notificar los cambios realizados a los contactos correspondientes?
                    </label>
                </div>  
            </form>
        </div>
        <div class="modal-footer justify-content-between">
            <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
            <input type="submit" onclick='document.editar_inc.submit();' class="btn btn-primary" value="Aceptar">
        </div>
  </div>
</div>

Este es el formulario

Formulario

El mensaje de confirmación con el checkbox

Mensaje de confirmación

2
  • "No te funciona": ¿da error?
    – padaleiana
    el 20 oct. 2022 a las 16:54
  • Solo obtengo la informacion del formulario pero no del checkbox el 20 oct. 2022 a las 17:06

1 respuesta 1

0

Tu problema es que al hacer click en el botón enviar, lo que haces es document.editar_inc pero tu checkbox no está dentro de ese formulario, lo pones en otro.

Lo que puedes hacer es crear una función en js que agregue un checkbox al form desde js recuperando el valor del checkbox real y desde ahí ejecutar el submit

function submitWithNotification() {

  const form = document.editar_inc;
  const checkbox = document.createElement("input");
  checkbox.type = 'checkbox';
  checkbox.name = 'notificar';
  checkbox.checked = document.getElementById('check_notificar_update').checked;
  form.appendChild(checkbox);
  form.submit()
}

Después en tu botón enviar asignas esa función en vez en enviar el formulario

<input type="submit" onclick="submitWithNotification()" class="btn btn-primary" value="Aceptar">

Te dejo un ejemplo más sencillo de como quedaría. He comentado la linea de form.submit() para que veas su comportamiento, pero debe estar descomentado. También notarás que se llegar a crear varias veces, esto es para que se pueda testear. No pasa una vez que hagas submit.

function submitWithNotification() {

  const form = document.editar_inc;
  const checkbox = document.createElement("input");
  checkbox.type = 'checkbox';
  checkbox.name = 'notificar';
  checkbox.checked = document.getElementById('check_notificar_update').checked;
  form.appendChild(checkbox);
  //form.submit()
}
<form name="editar_inc">
  
</form>

<input type="checkbox" id="check_notificar_update">
<label for="notificar">Desea notificar </label>
<button onclick="submitWithNotification()">Enviar</button>

1

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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