Putting a value in an IMAGE field

[storm197]

Hi,

I need to use more that one submit button on a form (with a different value being processed).

With the TYPE="SUBMIT", everything works fine with the following code:

<form action="test2.php" method="POST" name="test">
<INPUT TYPE="SUBMIT" NAME="SUBMIT1" VALUE="1">
<INPUT TYPE="SUBMIT" NAME="SUBMIT2" VALUE="2">
</form>

The problem is the fact I want to use images to submit. So I use the TYPE="IMAGE" with the following code:

<INPUT TYPE="IMAGE" src="images/btn_submit.gif"  NAME="SUBMIT" value="3">

That doesn't work. I cannot retreive the value information in the test2.php. (It gives me a blank value.)

Anyone can help me ?

 

[tgreer]

You can use a normal image tag. You can set the "onclick" attribute of the images to run a JavaScript function. That function can, conditionally, submit the form.

<img id="img1" src="submit1.gif" onclick="checkSubmit(this);" />

<img id="img2" src="submit2.gif" onclick="checkSubmit(this);" />


In the checkSubmit function, which might have this signature:

function checkSubmit(x)

"this" is passed into "x", so "x.id" tells you which image was clicked.



Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[storm197]

Ok, and how do I retreive the X value if my next page is in PHP ? (I am a real newbie in javascript).

 

[ChrisHunt]

That's not how image inputs work. What you'll get when you click that button is two values, SUBMIT.x and SUBMIT.y which hold the co-ordinates of the point on the image that was clicked. It's because image inputs are intended to work as server-side image maps, rather than submit button replacements (even though the latter's what they're almost always used for).

So you need to give each of your images a different name, and test to see if SUBMITn.x has any value, rather than looking at the (non-existant) value of SUBMITn.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[tgreer]

In JavaScript, you can set form variables. In PHP, you can read their values as part of the Request.Form collection.

So you could have a hidden form variable:

<input type="hidden" id="whichBtn" />

And in your JavaScript function:

if (x.id == "img1")
{
  document.getElementById("whichBtn").value = "one"
}
else
{
  document.getElementById("whichBtn").value = "two"
}
document.forms[0].submit()

In your PHP, look for "whichBtn" in the form collection.

Thomas D. Greer

http://www.tgreer.com

Providing PostScript & PDF
Training, Development & Consulting

 

[chessbot]

Or you could stylize your submit button to use your graphic as a background image and set the other values to transparent.

--Chessbot

There is a level of Hell reserved for probability theorists in which every monkey that types on a typewriter produces a Shakespearean sonnet.

 

[ChrisHunt]

In JavaScript, you can set form variables...

True, but in browsers you can switch Javascript off. Someone who's done that will not be able to use the form - because it relies on Javascript to work properly (the form will still be submitted, but the value won't be set).

Sometimes it's necessary to say "never mind the JS-disabled people, I can't do this any other way". This isn't one of those times. Use my technique, or chessbot's, and you can achieve the same effect without introducing a dependency on Javascript being enabled.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[storm197]

Thanx for your answers people. I'll be able to do what I want.

I'm working in a controlled environment (Intranet) so everyone have their Javascript enabled.

This forum is really useful.