Submitting two form using javascript but failed

Question

i have been trying to Submit two form using javascript and failed. i have searched stackoverflow but none of the javascript works ...

also tried this Submit two forms with one button

here is my code ... my full page is very long so i have just pasted the two form code here ... And each field of form1 (regForm) is required .. and form2 (frmAdd) contains a while loop... both of them forms are different i guess... so any solution with javascript or any alternative with these forms ...

  <script>
  submitForms = function(){
    document.forms["regForm"].submit();
    document.forms["frmAdd"].submit();
}
  </script>

      <form action="userdata.php" method="post" name="regForm" id="regForm" >

      <h2><em>Personal Details : </em></h2></br>

        <table width="80%" border="0" cellpadding="3" cellspacing="3" class="forms">
            <tr>
                <td width="22%">NAME<span class="required"><font color="#CC0000">*</font></span></td> 
                <td width="78%"> 
              <input name="full_name" type="text" id="full_name" size="40" value="<? echo $row_settings['full_name']; ?>" class="required"></td>
            </tr>
          <tr> 
               <td>FATHER'S NAME<span class="required"><font color="#CC0000">*</font></span></td> 
               <td> 
              <input name="f_name" type="text" id="f_name" size="40" value="<? echo $row_settings['f_name']; ?>" class="required"></td>
          </tr>
          <tr>
                <td>MOTHER'S NAME<span class="required"><font color="#CC0000">*</font></span></td> 
                <td> 
              <input name="m_name" type="text" id="m_name" size="40" value="<? echo $row_settings['m_name']; ?>" class="required"></td>
            </tr>
          <tr> 
               <td>NATIONALITY<span class="required"><font color="#CC0000">*</font></span></td> 
               <td> 
              <input name="nationality" type="text" id="nationality" size="40" value="<? echo $row_settings['nationality']; ?>" class="required"></td>
          </tr>
          <tr>
                <td>RELIGION<span class="required"><font color="#CC0000">*</font></span></td> 
                <td> 
              <input name="religion" type="text" id="religion" size="40" value="<? echo $row_settings['religion']; ?>" class="required"></td>
          </tr>
        </table></br>

        <p align="center">
            <!-- previous button   <input name="doSave" type="submit" id="doSave" value="Submit">  -->
        </p>
    </form> 

        <form action="userdata.php" name="frmAdd" method="post">

<table width="80%" border="0" cellpadding="3" cellspacing="3" class="forms">
  <tr>
    <td width="5"> <div align="center">NO</div></td>
    <td width="91"> <div align="center">Employer's NAME</div></td>
    <td width="160"> <div align="center">COUNTRY</div></td>
    <td width="198"> <div align="center">POSITION</div></td>
    <td width="70"> <div align="center">FROM</div></td>
    <td width="70"> <div align="center">TO</div></td>
    <td width="70"> <div align="center">SALARY</div></td>
    <td width="70"> <div align="center">REASONS FOR LEAVING</div></td>
  </tr>

  <?php for($i=1;$i<=4;$i++) { ?>

  <tr>
    <th width="5"> <div align="center"><? echo $i . "."; ?></div></th>
    <td><input type="text" name="emp_name<?=$i;?>" size="25"></td>
    <td><input type="text" name="emp_country<?=$i;?>" size="10"></td>
    <td><input type="text" name="emp_pos<?=$i;?>" size="10"></td>
    <td><input type="text" name="emp_frm<?=$i;?>" size="5"></td>
    <td><input type="text" name="emp_to<?=$i;?>" size="5"></td>
    <td><input type="text" name="emp_sal<?=$i;?>" size="5"></td>
    <td><input type="text" name="emp_lev<?=$i;?>" size="25"></td>
  </tr>
  <?php } ?>
  </table>
  </br>
    <!-- previous button <input type="submit" name="doHis" value="Save"> -->
  <input type="hidden" name="hdlfrm" value="<?=$i;?>">

  <input type="button" value="Click Me!" onclick="submitForms()" />

well i said i have just copy pasted from my large page ... but fixed now ... do u have any solution now @moskito-x — fahim74, May 17 '13 at 22:00

score 0 · Answer 1 · answered May 17 '13 at 21:05

0

You can not submit two different forms on one page. You have a race condition.

If you want to submit two forms at once, either combine them and handle it at the server OR you can use Ajax to submit them.

answered May 17 '13 at 21:05

epascarello

204,599
20
195
236

then what should i do ? @epascarello – fahim74 May 17 '13 at 21:06
rethink what you are doing. – epascarello May 17 '13 at 21:06
why this method doesnt work ? http://stackoverflow.com/questions/7843355/submit-two-forms-with-one-button – fahim74 May 17 '13 at 21:29
or document.getElementById('otherForm').submit(); these method suppose to work on one page right ? – fahim74 May 17 '13 at 21:30

score 0 · Answer 2 · answered May 17 '13 at 21:16

0

I think the easiest way to do this is install jQuery and use the find method then serialize the whole thing and send it using a jQuery post, get, or ajax method.

answered May 17 '13 at 21:16

Phillip Berger

2,317
1
11
30

moskito-x · Answer 3 · 2013-05-18T00:51:48.903

There are missing "tags" and the code is not correct in some places.
It would be much easier if you just shortened the code to relevant parts and then posted.
So I had to do that for you.

You should test the following code. As long as that does not work, there is no need even more "form input" to write.

the test.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript"> 
    submitForms = function(){
    document.forms["regForm"].submit();
    window.setTimeout(submitB,1000)
    } 

    function submitB() {
    document.forms["frmAdd"].submit();
    }
    </script>
    <title>Emergency Table - Update</title>
</head>

<body>
 <form action="writea.php" method="post" name="regForm" id="regForm" >
    <h2><em>Personal Details : </em></h2></br>
    <table width="80%" border="0" cellpadding="3" cellspacing="3" class="forms">
        <tr>
            <td width="22%">NAME<span class="required"><font color="#CC0000">*</font></span></td> 
            <td width="78%"> 
             <input name="full_name" type="text" id="full_name" size="40" value="Romeo Delta" class="required"></td>
        </tr>
    </table></br>
 </form> 

 <form action="writeb.php" name="frmAdd" method="post">
  <table width="80%" border="0" cellpadding="3" cellspacing="3" class="forms">
  <tr>
    <td width="5"> <div align="center">TEST</div></td>
  </tr>
  </table>
  </br>
  <input type="hidden" name="hdlfrm" value="1000">
  <input type="button" value="Click Me!" onclick="submitForms()" />
 </form>

</body>
</html>

writea.php

<?php
  if (isset($_POST['full_name'])) { $hdl = $_POST['full_name']; } else { $hdl = "Err."; }
  $fp = fopen('dataa.txt', 'a+');
  fwrite($fp, "Hello from write A : ".$hdl."\r\n");
  fclose($fp);
?>

writeb.php

<?php
  if (isset($_POST['hdlfrm'])) { $hdl = $_POST['hdlfrm']; } else { $hdl = "Err."; }
  $fp = fopen('datab.txt', 'a+');
  fwrite($fp, "Hello from write B : ".$hdl."\r\n");
  fclose($fp);
?>

After submit the content of dataa.txt and datab.txt should be.

dataa.txt
Hello from write A : Romeo Delta
datab.txt
Hello from write B : 1000

score 0 · Answer 4 · answered May 18 '13 at 06:35

0

If you do normal form post in your page the first submit action will done and redirects to that page and second form post will not done my solution is better to use ajax post method and submit these two forms hope this helpful..

answered May 18 '13 at 06:35

Ramalinga Raju

47
1
6

score 0 · Answer 5 · answered May 31 '13 at 21:50

Found a Solution for this ... used this jquery and jquery form js ...

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

<script>

$(document).ready(function() { 

        $('#form1').ajaxForm(function() { 
        });
        $('#form2').ajaxForm(function() { 
                alert("Your Submitted Information has been Saved !");
                window.location = "userdata.php";    
                return true;

        });
        $("#submitEverything").click(function(){
        mySubmitFunction();
        return false;
});

}); 

function mySubmitFunction() {
        $("#form2").submit();
        $("#form1").submit();
}

</script>

userdata.php is the page where this code was pasted
and have to use two different action in forms (like form1 action="page1" and form2 action="page2")

Submitting two form using javascript but failed

5 Answers5