Submit two forms with one button

Question

I have HTML two forms  one that submits data upon entry to a database using PHP  the other directs the user to a paypal payment page  my problem is that the user would have to submit both forms which of course I do not want them to have to do  Is there anyway to use one submit button for two forms     Javascript is welcome

User · Answer

The currently chosen best answer is too fuzzy to be reliable.

This feels to me like a fairly safe way to do it:

(Javascript: using jQuery to write it simpler)

$('#form1').submit(doubleSubmit);

function doubleSubmit(e1) {
    e1.preventDefault();
    e1.stopPropagation();
    var post_form1 = $.post($(this).action, $(this).serialize());

    post_form1.done(function(result) {
            // would be nice to show some feedback about the first result here
            $('#form2').submit();
        });
};

Post the first form without changing page, wait for the process to complete. Then post the second form. The second post will change the page, but you might want to have some similar code also for the second form, getting a second deferred object (post_form2?).

I didn't test the code, though.

User · Answer

if you want to submit two forms with one button you need to do this   1- use setTimeout    2- allow show pop up                    lt script gt  function myFunction     setTimeout function    document getElementById  form1   submit      3000      setTimeout function    document getElementById  form2   submit      6000         lt  script gt   lt form  target   blank  id  form1  gt   lt input type  text  gt   lt input type  submit  gt   lt  form gt   lt form target   blank  id  form2  gt   lt input type  text  gt   lt input type  submit  gt   lt  form gt    javascript doesn t submit two forms at the same time  we submit two forms with one button not at the same time but after secounds   edit  when we use this code  browser doesn t allow pop up  if you use this code for your software like me just set browser for show pop up but if you use it in designing site  browser is a barrier and code doesn t run

User · Answer

If you have a regular submit button  you could add an onclick event to it that does the follow   document getElementById  otherForm   submit

User · Answer

You should be able to do this with JavaScript    lt input type  button  value  Click Me   onclick  submitForms      gt    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

User · Answer

In Chrome and IE9  and I m guessing all other browsers too  only the latter will generate a socket connect  the first one will be discarded   The browser detects this as both requests are sent within one JavaScript  timeslice  in your code above  and discards all but the last request    If you instead have some event callback do the second submission  but before the reply is received   the socket of the first request will be cancelled  This is definitely nothing to recommend as the server in that case may well have handled your first request  but you will never know for sure   I recommend you use generate a single request which you can transact server-side

User · Answer

You can submit the first form using AJAX  otherwise the submission of one will prevent the other from being submitted

User · Answer

A form submission causes the page to navigate away to the action of the form   So  you cannot submit both forms in the traditional way   If you try to do so with JavaScript by calling form submit   on each form in succession  each request will be aborted except for the last submission   So  you need to submit the first form asynchronously via JavaScript   var f   document forms updateDB  var postData       for  var i   0  i  lt  f elements length  i          postData push f elements i  name         f elements i  value     var xhr   new XMLHttpRequest    xhr open  POST    mypage php   true   xhr setRequestHeader  Content-type    application x-www-form-urlencoded    xhr send postData join   amp       document forms payPal submit

[javascript] Submit two forms with one button

Examples related to javascript

Examples related to html

Examples related to forms