34

I have spent several hours trying to find a solution to my issue, but just can't seem to find the proper solution. Thanks in advance for your assistance!

I have ONE html form with:

<form id="columnarForm"  action="formindb_hoh_1.php" enctype="multipart/form-data" method="post" />

I would like to have TWO submit buttons:

<input type="image" name="camper" value="camper" src="../images/apps/camperBtn.png" class="submit_button" />
<input type="image" name="medical" value="medical" src="../images/apps/medicalBtn.png"class="submit_button" />

I would like the first submit button to have the action of formindb_hoh_1.php when clicked and the second submit button to have the action of formindb_hoh_2.php, but am unsure how to make one button have one action and have the other button has a different action.

Nick
  • 415
  • 2
  • 7
  • 14

4 Answers4

101

No JS, use HTML5.

Change the submit buttons to use new HMTL5 button attribute formaction:

<button type="submit" name="camper" formaction="formindb_hoh_1.php">Camper</button>
<button type="submit" name="camper" formaction="formindb_hoh_2.php">Medical</button>

Reference: http://devdocs.io/html/element/button

szuflad
  • 1,111
  • 2
  • 7
  • 4
  • 5
    This should be the accepted answer! Just tested it, and works perfectly! Any words on browser / device compatibility? – chocolata Feb 06 '15 at 17:46
  • I wonder how this interacts with ASP.NET MVC forms, since the form action is specified on the form itself rather than individual buttons. – Triynko Sep 08 '15 at 20:24
  • 1
    action override action from
    tag and effect depends on browser itself not backend.
     – szuflad Sep 10 '15 at 08:14
  • 1
    Not working in IE up to version 9. Necessary to place message on your site: `Update your browser.` – Jasom Dotnet Dec 19 '15 at 07:13
  • Damn that looked so nice but compatibility looks like it would be a pain in the wild. IE 10 only :( Mind you IE is almost gone :) But Firefox looks like a real problem only supported from version 4 onwards (mind you usage stats are all over the place). Would love to use this but think I will go JS and then suffer when JS is turned off. – BeNice Jan 25 '16 at 20:48
29

Refer this :

Multiple submit buttons php different actions

Put this script in your page :

<script>
    function submitForm(action)
    {
        document.getElementById('columnarForm').action = action;
        document.getElementById('columnarForm').submit();
    }
</script>

Modify your input code :

<input type="image" name="camper" onclick="submitForm('formindb_hoh_1.php')" value="camper" src="../images/apps/camperBtn.png" class="submit_button" />
<input type="image" name="medical" onclick="submitForm('formindb_hoh_2.php')" value="medical" src="../images/apps/medicalBtn.png"class="submit_button" />
Community
  • 1
  • 1
Redzwan Latif
  • 886
  • 3
  • 14
  • 38
2

Finally, I got my answer after spending more than an hour. I tried a various method like switch case, jquery, and JavaScript. But I only used HTML5 formaction tag and now my form two submit button working at two location.

Code :

   <input type="submit" class="btn btn-success" value="Pay Now" name="submit"  style="width: 100%; letter-spacing: 1px; color: #fff; border: none;padding:  10px;" formaction="example.php">

   <button type="submit" class="btn btn-success" name="submit" style="width: 100%; letter-spacing: 1px; color: #fff; border: none;padding: 10px; margin-top: 15px;" formaction="mail.php"> Button</buttton>
Ashique Ansari
  • 562
  • 4
  • 14
0

I have the same issue. but the thing is the first button function is in JS while the other is using PHP.

$('#add-bookingid').submit(function(e){
e.preventDefault();
calculateDistance();
});

You see $('#add-bookingid').submit so both buttons have same button type as submit.

Main Purpose

Button# 1

Button# 2

Hasnnnaiin
  • 73
  • 7