Multiple buttons/paths from a single form

[86Stang]

That title is horrible but I can't think of any other way to put it.

 

I'm trying to code a form where a user selects different records via a checkbox next to each listed record and have a two buttons, one that takes them to a page to print the records and the other button that takes them to a page that will email a recipient.

 

I've got the code working flawlessly for one or the other but I don't understand (or even know if it's possible) how to basically have two "submit" buttons that take them to different pages.  I know the action="" let's you pick where to send them but what if that hinged on which button they click?

 

I have a feeling that I am being as clear as mud with this one.  Let me know if I'm not making sense and I'll try again.

[lemmin]

You should be able to dynamically change the action property of the form object.

<form id="Form1" method="post" action="test.php">
<button onClick="Form1.action='test2.php';Form1.submit();">Print</button>
<input type="submit" value="email">
</form>

 

There is a normal submit button that doesn't change the action and one that does.

[86Stang]

These both take me to the same destination - test2.php.

[lemmin]

That is because you clicked the button that changes the action first and went back. I guess if you want to keep that from happening you can do it like this:

<form id="Form1" method="post" action="test.php">
<button onClick="Form1.action='test2.php';Form1.submit();">Print</button>
<button onClick="Form1.action='test.php';Form1.submit();">Email</button>
</form>

[86Stang]

Aha!  Now if you could show me how to use images in lieu of the buttons, you'd be a rock star!

 

I tried:

 

<button onClick="Form1.action='test2.php';Form1.submit();"><img src="path/to/image"></button>

 

but it just shows the image on top of the button.

[kenrbnsn]

This would break for people browsing with Javascript disabled.

 

Ken

[lemmin]

There are a few ways to do that. One way would be to make the button background into the image you want and remove the border:

<button onClick="Form1.action='test2.php';Form1.submit();" style="background-image:url('path/to/image'); border:none; width:100px;height: 20px"></button>

Of course, the button size is set dynamically by the length of the text so you would have to set the width and height of the button to the size of the image.

 

Of you could just use the image tag and move the event to it:

<img src="path/to/image" onClick="Form1.action='test2.php';Form1.submit();">

But it won't press down automatically (like a button would) without some more javascript.

[86Stang]

Hi Ken,

 

Crud, I didn't even think about that. Is there a non-javascript way of doing this?  I need the action to point to one of two paths depending on which button (image actually) they click.

[lemmin]

I would feel pretty confident saying that there is no way to do this without using Javascript, but there may be some crazy method that I don't know about.

 

The fact is that each input is directly related to its containing form. Because of this, you can only have that information be passed to that form (unless you use javascript to put it somewhere else). And becuase the property which defines where the information is sent is in the form, you would have two have two separate forms, with each input doubled.

[86Stang]

Hmm.  Well if there's no other way than I'll just deal with it.

 

I did notice that when trying to use the following it keeps taking me to test.php again no matter what I click.

 

<form id="Form1" method="post" action="test.php">
<button onClick="Form1.action='test2.php';Form1.submit();" style="background-image:url('path/to/image'); border:none; width:100px;height: 20px"></button>
<button onClick="Form1.action='test.php';Form1.submit();" style="background-image:url('path/to/image'); border:none; width:100px;height: 20px"></button>
</form>

[kenrbnsn]

You can use a switch statement on the value of the submit button and do whatever processing you want. See the following example:

<?php
if (isset($_POST['submit'])) {
echo '<pre>' . print_r($_POST,true) . '</pre>';
switch ($_POST['submit']) {
	case 'Test 1':
		echo 'Test 1 submit pressed';
		break;
	case 'Test 2':
		echo 'Test 2 was pressed do something else';
		break;
}
}
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title></title>
</head>

<body>
<form method="post">
Test 1 <input type="text" name="test1_input">
<input type="submit" name="submit" value="Test 1"><br>
Test 2 <input type="text" name="test2_input">
<input type="submit" name="submit" value="Test 2">
</form>


</body>
</html>

 

Ken

[86Stang]

Does that allow the user to move on to the appropriate page though?  The reason I need that is because one page is for printing and the other is for emailing whatever was selected and they both having different styling and layout.

 

[kenrbnsn]

Just create the appropriate HTML for each submit via the PHP script. You don't need two separate scripts. It can be in one.

 

Also, if you use CSS for styling, you can create a Print only CSS which is invoked when someone prints from your page.

 

Ken

[lemmin]

In IE, the value of the submit button isn't submitted when a user presses enter instead of clicking the button.