IE doesnt read the real button value! How to get round this?

I have a button tag as supposed to and input tag, which has different text to what I what its value to do, see below.

<button value="<%=RS("field1")%>" name="change" id="change">Change</button>

This works dandy in Firefox, but in IE.. dun,dun,dunnnn... the value of the button comes back as the word "change" wh开发者_开发技巧ich is meant to be the text the button displays.

I would usually just use and input tag but I think I can only use a button tag

Is there anyway to get round this?

From w3schools.com:

Important: If you use the button element in an HTML form, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute. Use the input element to create buttons in an HTML form.

Therefore, What you should do is <input type="button" />

What I've generally done in situations like this is to embed the information in the name attribute so you'd have

<button name="change:<%=RS("field1")%>" id="change:<%=RS("field1")%>">Change</button>

then use the server-side code to discard the returned value and then decompose the name back into a {name, value) pair.

(Note that your "id"s need to be unique anyway.)

As far as I know there is no way around it. It's simply the way IE handles the button tag, it will send the text between the opening and closing tag.

Considering you can't use a normal input tag for the button, how about using a hidden field to convey the method you want to use?

<form action="somepage" method="POST">
    <!-- some fields here -->
    <input type="hidden" name="action" value="<%=RS("field1")%>" />
    <button name="change" id="change">Change</button>
</form>

Seems to me the desired value is always in the button "value" attribute (since that's the value the other browsers submit), so why not simply:

<button ... onclick="this.innerHTML=this.value;" ... >

IE8 does send the value, so it's IE7 only (probably 6 too but who cares) problem.

Anyhow, one possible trick is to put the value as part of the text, hidden, then in the button click event (using JavaScript) change the button text to that value.

The final result would look like this:

<button value="<%=RS("field1")%>" name="change" onclick="this.innerHTML = this.childNodes[1].innerHTML;"><span>Change</span><span style="display: none;"><%=RS("field1")%></span></button>

Also, as you have this in loop, don't set the ID to avoid having more than one element sharing the same ID - it's invalid and if you need the ID for some reason, append something unique to it in each iteration.

As I described above, don't check value in pair {button_name,button_value} instead check only button_name exist in input set without checking its value.