Two submit buttons on form each redirect to different page on click?

Question

I admit I'm over my head on this. I'm running out of time as I need this page to work by Monday and I'm getting desperate; I've spend the last week googling and combing through stackoverflow answers and I still can't figure out how to get this to work.

I have 1 form with two submit buttons at the bottom, HOLD RESERVATION and BOOK NOW. Each button needs to submit the form data (just in an email, nothing fancy), then redirect either to a reservation confirmation static html page, or to my booking page.

I've tried this, which redirects nicely, but doesn't email me the form data:

<input type="submit" onclick="var e = document.getElementById('mpNOV'); e.submit(); e.action='mp-NOVconfirm.shtml';" value="Hold my reservation" class="submit"></td>
<td width="45%" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
<input type="submit" onclick="var e = document.getElementById('mpNOV'); e.submit(); e.action='../../index.shtml';" value="Book Now!" class="submit">

I've tried having my FORM ACTION="external.php" with this being the php code (based on php code I used for a different form submit):

<?php
if($_SERVER['REQUEST_METHOD'] === 'POST')
 {
 if(isset($_POST['Reservation']))
 {
 $subject = 'New Machu Picchu RESERVATION - November'; 
 $emailadd = 'jodi@happywivestravel.com'; 
 $url = 'http://www.happywivestravel.com/tour/machupicchu/mp-NOVconfirm.shtml'; 
 $req = '0';
 $text = "Results from form:\n\n"; 
 $space = ' ';
 $line = ' 
 ';
 foreach ($_POST as $key => $value)
 {
  if ($req == '1')
  {
  if ($value == '')
  {echo "$key is empty";die;}
 }
 $j = strlen($key);
 if ($j >= 20)
 {echo "Name of form element $key cannot be longer than 20 characters";die;}
 $j = 20 - $j;
 for ($i = 1; $i <= $j; $i++)
 {$space .= ' ';}
 $value = str_replace('\n', "$line", $value);
 $conc = "{$key}:$space{$value}$line";
 $text .= $conc;
 $space = ' ';
 }
 mail($emailadd, $subject, $text, 'From: '.$emailadd.'');
 echo '<META HTTP-EQUIV=Refresh CONTENT="0; URL='.$url.'">';
}

if(isset($_POST['Book']))
{
 $subject = 'New Machu Picchu BOOKING - November'; 
 $emailadd = 'jodi@happywivestravel.com'; 
 $url = 'http://www.happywivestravel.com/';
 $req = '0'; 
 $text = "Results from form:\n\n"; 
 $space = ' ';
 $line = ' 
 ';
 foreach ($_POST as $key => $value)
 {
  if ($req == '1')
  {
  if ($value == '')
  {echo "$key is empty";die;}
 }
 $j = strlen($key);
 if ($j >= 20)
 {echo "Name of form element $key cannot be longer than 20 characters";die;}
 $j = 20 - $j;
 for ($i = 1; $i <= $j; $i++)
 {$space .= ' ';}
 $value = str_replace('\n', "$line", $value);
 $conc = "{$key}:$space{$value}$line";
 $text .= $conc;
 $space = ' ';
}
mail($emailadd, $subject, $text, 'From: '.$emailadd.'');
echo '<META HTTP-EQUIV=Refresh CONTENT="0; URL='.$url.'">';
}
}
?>

But there must be something I did wrong here, because nothing happens when I click the submit button(s). No redirect, no form data emailed.

I originally wanted to get this function to work with a captcha script, but I've had to scrap that for now. I just need to get these submit buttons working properly asap.

I know next to nothing about php, and I'm very green with javascript (I'm learning as I go here). I really would appreciate any help here. THANK YOU!!

Do you have hidden input for `$_POST['Reservation']` and `$_POST['Book']`? — ulentini, Mar 29 '13 at 15:30
No. I didn't think of that. Would I do something like this? `` Is this so that the external php doc has something to refer to? — Jodi Lind Kuehn, Mar 29 '13 at 16:11
If you check on `$_POST['Reservation']` you have to use it somewhere. — ulentini, Mar 29 '13 at 16:18
Ok, I'm getting closer. I edited my form so the top reads: `
` and added `id="Reservation" name="Reservation"` and `id="Book" name="Book"` to my `` buttons. It's almost working; form data gets sent, but both pages get redirected to my homepage, rather than to their respective pages. (using same php doc as noted in original post) — Jodi Lind Kuehn, Mar 29 '13 at 16:48
If you put both submit buttons within the same `
` you'll always get the same behavior. I submitted an answer trying to solve this — ulentini, Mar 29 '13 at 16:53

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

This is where jQuery is your bestfriend!

Two bottons with IDs.

<input type="button" id="btn1" value="Hold my reservation" class="submit">
<input type="button" id="btn2" value="Book Now!" class="submit">

And then you'll take jQuery to detect two buttons click actions by ID and within that and send an Ajax call as a POST request (form submit) and then redirect! BOUM.

$('#btn1').click(function()
{
    $.ajax(
    {
        url: "submit_script.php",
        type: "POST",
        data: {input1: input1, input2: input2},
        dataType: "html",
        success: function(data)
        {
            window.location = 'http://www.example.com/page.php';
        }
    });
});

$('#btn2').click(function()
{
    $.ajax(
    {
        url: "submit_script.php",
        type: "POST",
        data: {input1: input1, input2: input2},
        dataType: "html",
        success: function(data)
        {
            window.location = 'http://www.example.com/page.php';
        }
    });
});

You can get creative within the Ajax and send whatever input fields you desire for each. This is how you will separate them, and/or send each click to a different submitting URL.

You can also pass data to "page.php" by using the data variable within the function parameter.

OR

You can detect which button you press within the submit form simply by renaming the button name and then detect it within the post on the submission page.

Reference this page for the above solution:
stackoverflow.com/questions/547821/two-submit-buttons-in-one-form

Wouldn't this jQuery script get really long if I have a long form and I need all data submitted for both buttons?? The data sent to me remains the same no matter which button they push. Only the path changes: a static html page for reservations, and a booking path for those ready to pay now. — Jodi Lind Kuehn, Mar 29 '13 at 16:56
@JodiLindKuehn, Yes, the "data:" type object can get kind of long. You can also use solution number two and control it from the back-end ! — tfont, Apr 25 '13 at 15:40

score 1 · Answer 2 · answered Mar 15 '14 at 09:47

An easier jquery method:

$('#buttonid1').click(function() {
    $('#formid').attr('action', '/path/page1/');
    $('#formid').submit();
});
$('#buttonid2').click(function() {
    $('#formid').attr('action', '/path/page2/');
    $('#formid').submit();
});

just sayin...

score 0 · Answer 3 · answered Mar 29 '13 at 15:39

0

Why don't you but the buttons in a form tag? And navigate with that?

<form id="formid" action="link" method="post">

answered Mar 29 '13 at 15:39

Naruto

1,210
3
25
28

The buttons are within the form tags `
` --to be precise. But I need to redirect to two locations depending on which submit button is pressed (which I'm attempting to do with the .php), but it's not working.
– Jodi Lind Kuehn Mar 29 '13 at 16:22
You can catch the button in the file like $_post['button1'] and according to the button click use header: ("Location: xxx"); Hope this helps? – Naruto Apr 24 '13 at 14:01

score 0 · Answer 4 · answered Mar 29 '13 at 16:13

Try naming your submit buttons Reservation and Book, like this:

<input type="submit" onclick="this.name='Reservation'; var e = document.getElementById('mpNOV'); e.submit(); e.action='mp-NOVconfirm.shtml';" value="Hold my reservation" class="submit"></td>
<td width="45%" style="padding-top:10px; padding-bottom:10px; border-top: 1px solid #6f3957;">
<input type="submit" onclick="this.name='Book'; var e = document.getElementById('mpNOV'); e.submit(); e.action='../../index.shtml';" value="Book Now!" class="submit">

Two submit buttons on form each redirect to different page on click?

4 Answers4