Saturday, December 02, 2006

Button tag problems and IE 6

Discovered that IE and Firefox handle the <button> tag differently.

If you have a tag like

< button type="submit" name="b" value="abc">
Button Text< /button>


When the form is submitted, the value of the parameter "b" is "abc" in firefox (the value attribute) while for IE, it is "Button Text" (the innerText)

Workaround?

We needed to submit a form using different buttons and each should send back its respective value.

We used

< input type="submit" name="b" value="Button Text 1">
< input type="hidden" name="Hash_of_Button_Text_1"
value="value1">

< input type="submit" name="b" value="Button Text 2">
< input type="hidden" name="Hash_of_Button_Text_2"
value="value2">


and on the server, accessed it by

params[hash(params["b"])]

where hash("Button Text 1") returns Hash_of_Button_Text_1


8 comments:

Anonymous said...

you can use a hidden field for the entire form (instead of using one hidden field for each visible button) which would carry the value of the button clicked to the server.

In onclick you can set the current button's value to the hidden field, and you can submit the form through Javascript!

Anonymous said...
This comment has been removed by a blog administrator.
Narayan Raman said...

What you suggest is what is simple and right in most cases. The solution was to handle the scenario without javascript. I should have mentioned that in the post.

tpraja said...
This comment has been removed by a blog administrator.
santhosh said...

I think your observation not correct, you are talking about button tag and fix it using input tag, the behavior is consistent both for IE and Firefox for Input tag.

Anonymous said...

i had the same problem, try following, it works for me

use this in onSubmit or onLoad
objs = document.getElementsByTagName("button");
for (i=0; i < objs.length; i++){
objs[i].value = objs[i].attributes.getNamedItem("value").value;
}

Anonymous said...

try this, place onSubmit or onLoad

objs = document.getElementsByTagName("button");
for (i=0; i < objs.length; i++){
objs[i].value = objs[i].attributes.getNamedItem("value").value;
}

Spot said...

you guys can also try this approach :)http://thespotontheweb.blogspot.com/2009/04/trouble-using-element-in-ie7.html :

Trouble using <button> element in IE (internet Explorer)
I've been having trouble using the <button> in IE7. The problem is IE always uses the "TEXT" between the <button name="action" value="thevalue" >TEXT</button> as the return value from a form POST, instead of "thevalue".

As I observed this only happens in IE6/7 but not on Firefox and Chrome. I've tried to Google for a work around but I usually get solutions using JavaScript... which I also prefer not to use.

Instead, I used the following to get around the issue:

<button name="action[thevalue]" >TEXT</button>

when submitted the result array will be like this:

Array ( [action] => Array ( [thevalue] => TEXT ))

having the array structure above, all I need to do is to get the "thevalue" key of the variable array "action". Here's how I did it in PHP:

<?php
$parameters = $_REQUEST;
$action = implode(array_keys($parameters['action']));
echo "Value of action: ".$action;
?>

the result will be:
Value of action: thevalue

--

That's all to it... well I hope I have given you another option on how to go around the subject.
Feel free to use the code above, and if you find it useful, I would greatly appriace if you atleast provide a feedback via comment.