Two separate forms one submit button

Question

I have two forms that I'd like to be both submitted with a single submit button. For this particular application I can't just combine them into one form. I've seen posts on this before but haven't yet found a straight-forward answer. How do I modify my html code or php code appropriately to get it to work? Thanks!

Basically, here's what I'm trying to combine:

<form method="POST" action="mailer.php" id='form1'>
    <input type="checkbox" name="check[]" value="blue_color">Blue<br>
    <input type="submit" value="Submit" name="submit">
</form>

<form method="POST" action="mailer.php" id='form2'>
    <input type="checkbox" name="check[]" value="red_color">Red<br>
    <input type="submit" value="Submit" name="submit">
</form>

Here's mailer.php:

<?php
if(isset($_POST['submit'])) {

    $to = "someone@someone.com"; 
    $subject = "Form Example";
    $name_field = $_POST['name'];
    $email_field = $_POST['email'];
    $message = $_POST['message'];
    $option = $_POST['radio'];
    $dropdown = $_POST['drop_down'];

    foreach($_POST['check'] as $value) {
        $check_msg .= "Checked: $value\n";
    }

    $body = "From: $name_field\n E-Mail: $email_field\n $check_msg Option: $option\n Drop-Down: $dropdown\n Message:\n $message\n";

    echo "Data has been submitted to $to!";
    mail($to, $subject, $body);

} else {
    echo "blarg!";
}
?>

Answer 1

So what keeps you from placing the <form>...</form> outside of the accordion? Normally, all the sections of the accordion are a part of the same HTML page, despite what the user might think. It's all smoke, mirrors, and dynamic visibility.

There's nothing wrong with a form that spans multiple list items. So there will be a lot of controls, that's fine. You only want to split controls into different forms if you want to submit them separately and/or to different destinations - but you don't. Form is not a visual element - it's just a way to group input controls together.

Answer 2

I would imagine that you would need to use ajax (jQuery is easiest) to do it so the page doesn't un-load...

Here's an example to get you started:

http://hayageek.com/jquery-ajax-form-submit/