submit form question

[axman505]

Currently, i have a form that submits as follows:

  <input tabindex="130" type="submit" name="go" value="Use Credit Card" />&nbsp;
	  <input tabindex="140" type="submit" name="go" value="Return to Biling Info" />&nbsp;
	  <input tabindex="150" type="button" name="cancel" value="Cancel" onclick="location.href='checkout.php?action=billing&billing=view'" />

I want to use images for each of the buttons. The problem is that i Test for the values of these buttons to determine what to do next. What is the best way to do this. Should this be done with javascript?

 

[BillyRayPreachersSon]

Given that you're already using Javascript to navigate, alienating non-JS users further won't really make too much difference - so the answer is 'Yes' ;o)

Hope this helps,
Dan

 

[ChrisHunt]

If you want to use images instead of buttons, you'll have to be a bit sneaky...

<input tabindex="130" type="image" name="go_cc" src="somepic.gif" />&nbsp;
<input tabindex="140" type="image" name="go_bi" value="otherpic.gif" />&nbsp;
<a tabindex="150" href="checkout.php?action=billing&billing=view"><img src="yetanother.gif" /></a>

One of the foibles of the [tt]<input type="image">[/tt] is that it doesn't pass a value back against its name. Instead, it passes two values with the x & y coordinates of where it was clicked. So if you click the first image above, you might get the values [tt]go_cc.x=10&go_cc.y=16[/tt]. What your script needs to do to unpick this, is check to see if go_cc has a value (in which case the first image was clicked), else check if go_bi.x has a value, and so on...

If you want to put an image on a button, you can do it like this:

<button tabindex="130" type="submit" name="go" value="Use Credit Card"><img src="somepic.gif" /></button>

Be warned, though that ancient browsers don't understand the [tt]<button>[/tt] element.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[ChrisHunt]

Oh, and NEVER use Javascript if you can do the same thing with HTML!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[manarth]

Oh, and NEVER use Javascript if you can do the same thing with HTML!

I know where you're coming from, but the pedant in me is nitpicking....

What about JavaScript to validate form data? It's quicker (for the user) than server-side validation because they don't have to post the data to find out it's invalid.
Of course, relying on JavaScript is another issue altogether

<marc> i wonder what will happen if i press this...[ul][li]please tell us if our suggestion has helped[/li][li]need some help? faq581-3339[/li][/ul]

 

[axman505]

Testing to see weather the image has a x y value sounds like the best way for me. Now the question is, do all browsers submit back an X and Y value?

 

[ChrisHunt]

manarth: That's why I said "...if you can do the same thing with HTML". You can't do validation with plain HTML, so it's OK to do it with Javascript. One of the few legitimate uses for it, imo. Of course you need to do the validation server-side as well, for those that bypass or disable the javascript validation.

axman: Yes they do, it's right there in the Spec:

When a pointing device is used to click on the image, the form is submitted and the click coordinates passed to the server. The x value is measured in pixels from the left of the image, and the y value in pixels from the top of the image. The submitted data includes name.x=x-value and name.y=y-value where "name" is the value of the name attribute, and x-value and y-value are the x and y coordinate values, respectively.

Even IE behaves properly in this case.


-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd