Javascript 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>

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

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

Submit multiple forms by single button

I solved it. The problem occurred because the every form has the same id. By an incremental variable I made changes in the form id to vary from one to one. Then problem solved. thank you very much everyone who tried to help me..!

Submitting multiple forms with one button

So, I have finally come up with a solution, if anyone is interested. Perhaps not prettiest, but it works.

<script>
  $(document).ready(() => {
    $('#submit').click(function submitAllForms() {

      var counter = 0; 
      var totalForms = $('form').length;
      $('form').each((i, form) => {

        const redirectIfDone = () => {
          if (counter === totalForms) {
            alert("all forms updated successfully")
            window.location.replace(window.location.origin + '/list/' + $('h3')[0].innerText)
          }   
        }

        if (!($(form).find('textarea').val())) {
          counter++
          redirectIfDone();
          return true;
        } else {
          $.ajax({
          type: 'POST', 
          url: $(form).attr('action'),
          data: $(form).serialize(),
          success: (data) => {
            counter++;
            redirectIfDone();
          }
          })
        }
      })
    })
  })
</script>

Virtually no changes to the route. Overall, I'm still interested in seeing other possible solutions.

router.route('/expand-list-records-save/:listId/:recordId')
  .post((req, res) => {
      Record.findOne({
        where: {
          id: req.params.recordId
        }
      }).then(result => {
          result.update({
            embeddedMedia: req.body.embeddedmedia
          })
          res.end()
      })
    })

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.

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>