Home / Questions / 563362
Accepted
Bryan Ramírez Díaz
Asked: 2022-10-21 08:52:35 +0800 CST 2022-10-21 08:52:35 +0800 CST

Form in the confirmation message of a form

  • 772

I have a form to edit an incident, when I touch the "Edit" button, a modal appears to confirm the sending of the form, so far so good. The problem is that now I need to create a checkbox in the confirmation modal to send notifications if they mark it and I need to get both the form information and the checkbox information in my view, but it is not working for me.

#Form that calls the 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>

This is the form

Form

The confirmation message with the checkbox

confirmation message

python

1 Answers

  1. Best Answer

    Your problem is that when you click the submit button , what you do is document.editar_incbut your checkbox is not inside that form, you put it in another.

    What you can do is create a function jsthat adds an checkboxto formfrom js, retrieving the value of the checkboxreal and from there execute thesubmit

    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()
}

    Then in your submit button you assign that function instead of submitting the form

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

    I leave you a simpler example of how it would look. I have commented the line form.submit()so you can see its behavior, but it must be uncommented. You will also notice that it will be created several times, this is so that it can be tested. It doesn't happen once you 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>

    • 0