1

I have 2 forms (and will have more in the future) that I need to submit. Right now, when the submit button is clicked, it will only submit the form in the same collapsible section. Hence, I need a "Submit All" button outside these sections to submit all the forms.

I've tried implementing AJAX and tried out the solution from this link Submit two forms with one button , but it's still not working for me. 

submitForms = function(){
  document.getElementById("form1").submit();
  document.getElementById("form2").submit();
 }
<html>


<body>
  <form id="form1" action="<?php echo htmlspecialchars(basename($_SERVER['REQUEST_URI'])); ?>" method="post">
  <div style="background-color:lightblue" class="form-group <?php echo (!empty($answer_err)) ? 'has-error' : ''; ?>">
   <label><?php echo $question; ?></label>
   <input type="text" name="answer[]" class="form-control" value="<?php echo $answer; ?>">
   <span class="help-block"><?php echo $answer_err;?></span>
   <input type="hidden" name="consideration_no[]"  value="<?php echo $consideration_no; ?>"/>
   <input type="hidden" name="dg_no" value="<?php echo $dg_no; ?>"/> 
  </div>
  <input type="Submit" name = "$consideration_no[]" class="btn btn-primary" onclick="submitForms()" value="Submit">
  <a href="javascript:history.go(-1)" class="btn btn-default">Cancel</a>
    </form>
 </div>



   <form id="form2" action="<?php echo htmlspecialchars(basename($_SERVER['REQUEST_URI'])); ?>" method="post">
  <div class="form-group <?php echo (!empty($answer_err)) ? 'has-error' : ''; ?>">
   <label><?php echo $question; ?></label>
   <input type="text" name="answer[]" class="form-control" value="<?php echo $answer; ?>">
   <span class="help-block"><?php echo $answer_err;?></span>
   <input type="hidden" name="consideration_no[]" value="<?php echo $consideration_no; ?>"/>
   <input type="hidden" name="dg_no" value="<?php echo $dg_no; ?>"/>
  </div>
  <input type="Submit" name = "$consideration_no[]" class="btn btn-primary" onclick="submitForms()" value="Submit">
  <a href="javascript:history.go(-1)" class="btn btn-default">Cancel</a>
    </form>
 </div>



 <input type="button" value="Submit All!" onclick="submitForms()" />
</body>
</html>

When I click on the last button to Submit All, nothing happens. The html forms are inside php if else and while loop scripts, but I doubt that affects anything? (I welcome other methods and ideas of submitting these two forms from a single button.)

------------UPDATE------------------------

I tried removing the actions and used this: 

 submitForms = function(){ 
 document.getElementById("form1").submit(); 
 document.getElementById("form2").submit(); 
 }

It wouldn't work too. In my POST handler, it has a: 

 if($stmt->execute()){ 
 //Records Submitd successfully. Redirect to landing page 
 header("location: home1.php?dm_no=".$_GET["dm_no"]); 
 exit();

Would the redirection have affected the AJAX not being able to submit two forms? But even if it doesn't and only is able to submit one, I would still redirect to another page. Right now, the button doesn't seem to do anything.

Shawn
  • 37
  • 6
  • 3
    Possible duplicate of [How to submit 2 forms in one page with a single submit button](https://stackoverflow.com/questions/9096515/how-to-submit-2-forms-in-one-page-with-a-single-submit-button) – ellipsis Jan 17 '19 at 05:45
  • Ok I'll check it out – Shawn Jan 17 '19 at 05:49
  • Maybe I'm doing something wrong, when I click the Submit All button with the new solutions, it still doesn't do anything. It's a button that doesn't seem to do anything. – Shawn Jan 17 '19 at 06:04

1 Answers1

0

I think it's not possible submit two form on one click. because form redirect on given form action, so if you submitting two from with two action then system not able to redirect two different actions. But you can achieve this by doing ajax call Like:

<input type="button" value="Submit All!" onclick="submitForms()" />

<script>
    function submitForms() {
        $("#form1").ajaxForm({url: 'server.php', type: 'post'})
        $("#form2").ajaxForm({url: 'server.php', type: 'post'})
    }
</script>
Pushpendra Kumar
  • 1,721
  • 1
  • 15
  • 21
  • hmm if were to remove the form actions (because it's interferring), and instead redirect when the AJAX is successful, would that be possible? – Shawn Jan 17 '19 at 06:40
  • Hay i think you are trying to submit exam from, with multiple question answer with different form, right ? i mean every question answer in unique form, right ? – Pushpendra Kumar Jan 17 '19 at 08:15
  • It's not meant for that but yeah it's quite similar to that – Shawn Jan 17 '19 at 08:24