submit two forms with one submit button jQuery

Question

I have tried multiple ways of doing this, by searching on stackoverflow for the answer.

I have two forms

Form 1 basic setup:

<form action="/post" class="frm-form"  method="post" name="post" 
onsubmit="return vB_Editior['text_editor'].prepare_submit(0,0)" id="quick_reply">
   <textarea></textarea>
      <input type="submit" name="post" value="Send">
</form>

Form 2 basic setup:

<form enctype="multipart/form-data" id="tagnotif" style="display:none;" 
onsubmit="return vB_Editor['text_editor'].prepare_submit(0,0)" name="post2" 
method="post" action="/privmsg">
   <input id="username" class="post" type="text" tabindex="1" size="25" 
       name="username[]"style="margin:1px 0"><br />
   <input id="acpro_inp10" class="post" type="text" 
     onkeypress="if (event.keyCode==13){return false}" title="" tabindex="2" 
    maxlength="64" size="45" value="You have been tagged" name="subject"><br />
  <textarea id="textingnotification" rows="15" cols="9"
   name="message" tabindex="3"></textarea>
   <input type="hidden" value="" name="lt">
     <input type="hidden" value="inbox" name="folder">
       <input type="hidden" value="post" name="mode">
</form>

I just need these two forms to be submitted on SEND press of first form

TRIED USING THIS CODE VARIABLES WITH THE MAIN SCRIPT: Though it won't pass both, and it won't refresh the page...

$(document).ready(function() { 
    $('#quick_reply').ajaxForm(function() { 
            alert("Thank you for your submitting form 1"); 
    });
    $('#tagnotif').ajaxForm(function() { 
            alert("Thank you for your submitting form 2"); 
    });

}); 

function mySubmitFunction() {
    $("#quick_reply").submit();
    $("#tagnotif").submit();
}

Need to be two separate forms since one sends to /privmsg and the other sends to /post — EasyBB
– EasyBB, Commented Nov 19, 2012 at 2:48
never really messed with form coding honestly this is all new. I've know how to make forms, never got into depth with them nor the callbacks or echos of a form via php. Actually don't know php. That and the site wont let me, need to use javascript/jQuery (i know the same written differently tho) — EasyBB
– EasyBB, Commented Nov 19, 2012 at 2:49

Andrew · Accepted Answer · 2012-11-19 02:34:34Z

4

I don't think you can do two regular post requests from a single html page, because making the post involves leaving the page and following the redirect response.

If you're submitting the forms via ajax, why not just make a single ajax button and grab the needed parameters to stick in the request? IE:

$.ajax({
  type: 'POST',
  dataType: 'JSON',
  data: {param1: $('input#param1').val(), param2: $('input#param2').val()},
  url: 'url to post to',
  success: (your success callback function goes here)
})

answered Nov 19, 2012 at 2:34

Andrew

43.2k53 gold badges184 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

EasyBB Over a year ago

One form is commenting on a form. Other form is for sending PM. Basically my hack here is so when a users tags another user it sends the tagged user a PM stating where the Tag was and that they were tagged. That is why I need to send them both. How would I go about this? No php since I don't have access to it on the hosting site.

EasyBB Over a year ago

Also creating a AJAX button would be difficult, the first form is generated by a php variable {quick_reply} so yeah I don't actually have access to that bit just the second bit. The second code is hidden this is basically a hack for the site hosting site

Andrew Over a year ago

Are you able to change the markup on the page at all, or are you completely stuck with what you have?

EasyBB Over a year ago

I can change some of it, such as the second form. and a little more around that. why what would you have in mind? I don't mind using Ajax to send the PM function first then the first form to submit afterwards and doing its business (which after submit should go to a confirmation page and then refresh back to that page with the comment in place)

EasyBB Over a year ago

Oh also I would need to only send if there is data in the input field USERNAME.

|

Thusitha Wickramasinghe · Accepted Answer · 2016-04-16 16:53:08Z

1

Doing this first you need to remove every submit buttons from these two forms If form have submit button this won't work.

First Form

<form action="/post" id="frm-form" class="frm-form"  method="post" name="post" 
onsubmit="return vB_Editior['text_editor'].prepare_submit(0,0)" id="quick_reply">
   <textarea></textarea>
      <input id="frm-submit" type="button" name="post" value="Send">
</form>

Second Form

<form enctype="multipart/form-data" id="tagnotif" style="display:none;" 
onsubmit="return vB_Editor['text_editor'].prepare_submit(0,0)" name="post2" 
method="post" action="/privmsg">
   <input id="username" class="post" type="text" tabindex="1" size="25" 
       name="username[]"style="margin:1px 0"><br />
   <input id="acpro_inp10" class="post" type="text" 
     onkeypress="if (event.keyCode==13){return false}" title="" tabindex="2" 
    maxlength="64" size="45" value="You have been tagged" name="subject"><br />
  <textarea id="textingnotification" rows="15" cols="9"
   name="message" tabindex="3"></textarea>
   <input type="hidden" value="" name="lt">
     <input type="hidden" value="inbox" name="folder">
       <input type="hidden" value="post" name="mode">
</form>

JQuery

$("#frm-submit").change(function(){
    $("#frm-form").submit();
    $("#tagnotif").submit();
});

This will Refresh the page and submit two forms

answered Apr 16, 2016 at 16:53

Thusitha Wickramasinghe

1,1132 gold badges16 silver badges31 bronze badges

1 Comment

EasyBB Over a year ago

Well now that I don't use jQuery this is useless ;) also we have promises where they could make this simpler and resilient to staggered posting.

Collectives™ on Stack Overflow

submit two forms with one submit button jQuery

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related