Submit Multiple Forms with One Button

Submit two forms with one button

You should be able to do this with JavaScript:

<input type="button" value="Click Me!" onclick="submitForms()" />

If your forms have IDs:

submitForms = function(){
    document.getElementById("form1").submit();
    document.getElementById("form2").submit();
}

If your forms don't have IDs but have names:

submitForms = function(){
    document.forms["form1"].submit();
    document.forms["form2"].submit();
}

Can I submit two forms with one button

Something like that works:

document.getElementById("submit").onclick = function() {  document.getElementById("form1").submit();  document.getElementById("form2").submit();}

<form id="form1" method="post" action="/lorum/ipsum/dolor/sit/amet">  <!-- Some stuff --></form><form id="form2" method="post" action="some/other/location/here">  <!-- Some stuff --></form>
<button id="submit">Submit forms</button>

Is there a way to submit multiple forms with a single button and unique hidden values?

The simplest approach would be to make the whole table one form.

<form action="/dues/?family-dues={{ familyprofile }}" method="POST" id= "dues-payment">
    {% csrf_token %}
    <table>
        {% for due in dues %}
          <tr>
            <td>{{ due.0 }}</td>
            <td>{{ due.1 }}</td>
            <td>{{ due.3 }}</td>
            <td>{{ due.4 }}</td>
            <td>{{ due.5 }}</td>
            <td>
              <input type="text" placeholder="Enter Amount" name="due-{{ due.2 }}-amount">
            </td>
          </tr>
        {% endfor %}
    </table>
    <input type="hidden" value="{{ ?? }}" name="member-id">
    <input type="hidden" value="{{ duefamily.0 }}" name="family-id">
    <button id="submit-payment">Pay</button>
</form>

Note that I added the due IDs to the names of the fields that are shown on each line. Now you will have to do a bit of string parsing on the Django side to match these together.

You might also want to look into Django Formsets, which allow you to define the whole form in Python and just call form.as_table() in the template. It also has support for nested forms like this one.

Edit

I think you should also be able to do the amount inputs like this and then get lists in Django, but unfortunately I can't test if it works. You would get one called due-id and one called due-amount, and then rely on the values for each index matching.

        <td>
          <input type="text" placeholder="Enter Amount" name="due-amount[]">
          <input type="hidden" value={{ due.2 }} name="due-id[]">
        </td>

Submit with one button multiple forms generated by loop

Thanks to MojoAllmighty I found the solution. As described in the link below if I want to submit multiple forms by one button I have to assign equal classes to form and use ajax for async submitting forms. So maybe it can be marked as a duplicate of a link below.

Jquery - Submit all forms by one button

Two forms, one submit button

You can use Document.forms which returns a collection.Thereafter forms[0] will return the first form from DOM and so on .Then you can use one button to submit the forms

<button type = "button" onclick="submitForm()">Submit</button>

function submitForm(){
    document.forms[0].submit();
    document.forms[1].submit();
}