Submit Multiple Forms With One Submit 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>

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

How to submit two forms at once

You are taking the wrong approach here.

You should only be using submit buttons and the submit event when you are going to actually submit data somewhere.

You only need one form and one submit button.

Your first button should just be a regular button that shows the remainder of the form. Then, there's no event to cancel. Your second button then submits the form.

Also, you should not be using inline HTML event attributes (onsubmit, etc.), here's why and you should move away from inline styles and set up CSS style rules.

Submit multiple forms with one submit button

For submitting two forms you will have to use Ajax. As after using form.submit() page will load action URL for that form. so you will have to do that asynchronously.

So you can send both request asynchronously or send one request asynchronously and after its success submit second form.

function submitTwoForms() {
var dataObject = {"form1 Data with name as key and value "};
    $.ajax({
      url: "test.html",
      data : dataObject,
      type : "GET",
      success: function(){
        $("#form2").submit();   //assuming id of second form  is form2
      }
    });
    return false;   //to prevent submit
}

You can bind this submitTwoForms() function on your that one submit button. Using

$('#form1').submit(function() {
    submitTwoForms();
    return false;
});

But, if you do not want to do all this, you can use Jquery form plugin to submit form using Ajax.

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>