Passing a form data to bootstrap modal

Question

Case:

I have a table in my database in which every row contains a value of type form and has a save button at the end of the row.

Now what I want to do the following things:

When I click the save button, a modal popup must open and it should display the data that was present in the row whose save button was clicked.

Also, the modal will have two buttons submit and cancel. If I click on save button on the model, the data must be sent at the back-end (I am using Django as back-end).

How can I do this?

Any help will be highly appreciated.

Code:

{% block content %}   

<table id ="devicetable" cellpadding="20%" style="width:100%">

    <thead>
        <tr>

            {% for column in columns %}

                <td>{{ column }}</td>

            {% endfor %}
          {% if type != "NReq" %}
            <td> Button </td>
          {% endif %}
        </tr>
    </thead>

{% for a in all %}

    <tr>
      <form action = {% url type %} method="POST">{% csrf_token %}

        {% for k in columns %}
              <td>{{ a|get_item:k }}<input type = "hidden" name = {{k}} value = "{{ a|get_item:k }}"></td>
        {% endfor %}
        {% if type != "NReq" %}
          <td> <button type="submit" class="btn btn-primary">{{type}}</button></td>
        {% endif %}

      </form>
      </tr>

{% endfor %}

</table>

{% endblock %}

Answer 1

You can handle the submit event of the form when clicking the save button (see onsubmit Event ). Use this event to call a function where you (a) :

1. Open the modal
2. Loop through the <input> tags inside the form and display the contents in the modal
3. Return false so that this data is not send to the server

Now when the modal is open, handle the events of your buttons and manually raise the submit event of your form. For jQuery this may look like this (b) - untested:

• $("#submit").on("click", function() { $("#formId").submit(); });
• $("#cancel").on("click", function() { $("#modalId").close(); });

Please note: when you submit the form from the modal (b) , you should insert a global variable to not repeat the steps of (a) . Otherwise the form will never be submitted.