How to Submit 2 Forms in One Page with a Single 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();
}

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 2 forms in one page with a single submit button

You have SEVERAL issues

1. input type=image IS a submit button so you are trying to submit something from a non-existing form, likely the same page you are on

2. when you submit form1, it replaces the current page, if you manage to submit form2 as well, it is VERY likely to interfere with the submission of form1

Here is what you can TRY (plain javascript):

<script language="javascript">
function submitForms() {
  document.getElementById("firstform").submit();
  document.getElementById("secondform").submit();
 }
</script>

<form id="firstform" target="iframe1">
</form><iframe name="iframe1" style="display:none"></iframe>
<form id="secondform" target="iframe2">
</form><iframe name="iframe1" style="display:none"></iframe>
<button typ"button" onclick="submitForms()"><img src="images/order-button.png" "/></button>

Alternatively AJAX the forms one at a time (assumes jQuery loaded)

DEMO HERE

$(document).ready(function() {
  $("#subbut").click(function(e) {
    e.preventDefault(); // or make the button type=button
    $.post($("#firstform").attr("action"), $("#firstform").serialize(), function() {
      $.post($("#secondform").attr("action"), $("#secondform").serialize(),
        function() {
          alert('Both forms submitted');
        });
    });
  });
});

---

UPDATE: If you want two form's content to be submitted to one action, just add the serialises:

$(document).ready(function() {
  $("#subbut").click(function(e) {
    e.preventDefault(); // or make the button type=button
    $.post($("#firstform").attr("action"), $("#firstform").serialize() + $("#secondform").serialize(), function() {
      alert('Both forms submitted');
    });
  });
});

PS: The PHP in the demo is just echoing back what you post. There is no special action needed on the server.

Submitting two forms on page with only one button

You can use "ng-form" for organizing your forms and just add a button on the end which will call that 'submit()' function you use.

<div ng-form="form1">
 form1 fields
</div>

<div ng-form="form2">
 form2 fields
</div>

<button ng-click="submit()"></button>

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.

Two submit buttons in one form

If you give each one a name, the clicked one will be sent through as any other input.

<input type="submit" name="button_1" value="Click me">

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>

Submitting two HTML forms with one submit button in Razor

You can use the command name in your <input> tag as shown below:

@Html.BeginForm()
{
  @Html.AntiForgeryToken()

  <!-- Your Razor code for the input form goes here  -->

  <!-- Now your Upload button -->
  <table>
    <tr>
        <td>File:</td>
        <td><input type="file" name="File" id="File"/></td>
    </tr>

        <tr>
            <td> </td>
            <td><input type="submit" name="commandName" value="Upload"/></td>
        </tr>
  </table>

  <!-- Finally, your form submit button -->
   <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" name="commandName" value="Create" class="btn btn-default"/>
        </div>
   </div>

}

And in your controllers' action method accept it as a parameter.

public ActionResult Create(Car car, string commandName)
{
    if(commandName.Equals("Create"))
    {
      // Call method to create new record...
    }
    else if (commandName.Equals("Upload"))
    {
      // Call another method to upload picture..
    }
}

If you research, there is another elegant generic solution, where you can just apply a multiple-button attribute on the Action method and it will automatically call the controller action. However, you need to be careful about getting values in that case ( *It's out of scope for this question). You can refer: How do you handle multiple submit buttons in ASP.NET MVC Framework?

---

Related Topics