使用 php 中的一个按钮将多个 forms 提交到同一操作页面

Question

So I am trying to send data from multiple forms on the same page to the same action page using only one submit button.

So far I have tried using the form ID for all my forms and it is still unsuccessful. The first form is the only one that goes thru and I think that is because the action on its FORM tag, is executed before the rest of the forms can also be executed. Below I have put some sample code illustrating what I am try to do:

<form method="post" action="example.php" id="formID">
//Some code here
</form>

<form method="post" action="example.php" id="formID">
//Some code here
</form>

<form method="post" action="example.php" id="formID">
//Some code here
</form>

<button type="submit" name="sub1" form="formID">Submit</button>

So how can I submit all three forms to the same page, using PHP?

Thank you for you help.

Answer 1

Technically you are submitting all the forms, but they all have the same action and ID. Check out this question: multiple-forms-and-one-processing-page

Firstly the HTML ID attribute must be unique. Once each form has it's own ID you can then properly parse the data in the $_GET variable from within your example.php file's action.

Answer 2

You can do this only using javascript and send the 3 request in the background.

For example. Mark your forms with specified class, for example multiple_form .

Then change your code to something like:

<form method="post" class="multiple_form" action="example.php" id="formID">
//Some code here
</form>

<form method="post" class="multiple_form" action="example.php" id="formID">
//Some code here
</form>

<form method="post" class="multiple_form" action="example.php" id="formID">
//Some code here
</form>

<button class="multiple_form_sender" name="sub1">Submit</button>

Then add javascript to your code

var forms = document.getElementsByClassName("multiple_form");

var sender = function(e) {
  const form = e.target;

  // Post data using Fetch
  fetch(form.action, {
    method: form.method,
    body: new FormData(form)
  })

  // Prevent the default form submit
  e.preventDefault();
};

for (var i = 0; i < forms.length; i++) {
    forms[i].addEventListener('submit', sender);
}

document.getElementById("multiple_form_sender").addEventListener('click', function(){
    for (var i = 0; i < forms.length; i++) {
        forms[i].submit();
    }
});

But if you don't want to send forms using javascript. You should consider one form with array parameters.