ansaurus

Question

IE sends inner HTML when clicking on a button element

Answer 1

A:

I think you should be using an <input type="submit" /> instead of <button>.

AJ 2008-12-18 17:51:07

Using button allows you to separate the value submitted and the text presented to the user. Other fancy things can be done with buttons which can't with submit inputs, too.

strager 2008-12-18 22:28:21

Answer 2

A:

Use <input> instead of <button>. Otherwise, here's a description of a nice jQuery-based hack.

Bullines 2008-12-18 17:53:13

Answer 3

+3 A:

One solution is to use Javascript and a hidden field

   <input type="hidden" name="actionparam" value="DoNothing">
   <input type="button" onclick="OnSubmitForm('ActionA')" Value="Click Here for A" />
   <input type="button" onclick="OnSubmitForm('ActionB')" Value="Click Here for B" />


   function OnSubmitForm(actionname) {
 var f = document.frm;
 f.actionparam.value = actionname;
 f.submit();
 }

This works as a hidden CATPCHA also, and you can add some client validation in the javascript function

Edit:

Since you say you want to degrade to non-javascript browsers, you can use this version, that allow only one default action to the people with no javascript

The extra buttons are disabled in HTML but then re-enabled with javascript.
Tested code:

<html>
<head>
    <script type="text/javascript">
    <!--
    function OnSubmitForm(actionname) {
      var f = document.frm;
      f.actionparam.value = actionname;
      f.submit();
    }
    //-->
    </SCRIPT>
</head>
<body>
   <noscript>
        <div style="background-color: yellow; margin: 20px;" >
            You are using a limited version of the site because you don't have Javascript enabled
        </div>
    </noscript>


   <h1>form</h1>
    <form name="frm" method="post">
    <input type="hidden" name="actionparam" value="DefaultAction" />
    <button name="defaultbutton" type="submit">default action</button>
    <button name="extrabutton1" disabled onclick="OnSubmitForm('ExtraAction1')">Extra action 1</button>
    <button name="extrabutton2" disabled onclick="OnSubmitForm('ExtraAction2')">Extra action 2</button>
    </form>


   <h1>Results</h1>
   <h2>forms collection</h2>
   <ol>
   <%
   For x = 1 To Request.Form.count()
      Response.Write("<li>" + Request.Form.key(x) + "=" + Request.Form.item(x) + "</li>")
   Next
   %>
   </ol>


    <script type="text/javascript">
    <!--
    document.frm.extrabutton1.disabled = false;
    document.frm.extrabutton2.disabled = false;
    //-->
    </SCRIPT>

</body>
</html>

Eduardo Molteni 2008-12-18 17:56:56

I like this method, but I don't really want to rely on Javascript. I don't see an easy way to gracefully degrade this if Javascript is disabled.

Kibbee 2008-12-18 18:38:13

Answer 4

+1 A:

As Eduardo mentions, JavaScript sounds like your best option. However, you'll need to somehow consider the fact that if a user has JavaScript disabled, you will not receive the appropriate value.

cLFlaVA 2008-12-18 18:00:25

This is a drawback, but I guess all modern site requires javascript, at least to interact with the site.

Eduardo Molteni 2008-12-18 18:04:05

site -> sites

Eduardo Molteni 2008-12-18 18:04:38

I would disagree with that statement. What about mobile devices?

cLFlaVA 2008-12-18 18:05:15

Like the iPhone? :) Just kidding. I see your point, but please try to use the internet for 1 day without javascript, and you will see what I mean. It is just the real world.

Eduardo Molteni 2008-12-18 18:12:00

I agree with you on that front. Still... we must be mindful of our users :)

cLFlaVA 2008-12-18 18:59:12

Answer 5

+1 A:

I think that you should reconsider this whole concept. I have a feeling your scenario goes something like this:

User clicks Save or Cancel
Server-side, you check for "Save" or "Cancel" value
You perform actions based on this

In reality, it shouldn't matter what the value of a Save button is. In PHP, for example, you can simply check for a value in the Save element. Regardless of whether the value is "Save" or "Sauver", you can perform the saving functionality.

I apologize if I'm way off base here. Let me know if my assumptions are accurate.

cLFlaVA 2008-12-18 19:07:42

The value of the save value matters if you want to have multiple buttons with the same name.

Kibbee 2008-12-18 20:15:44

Sure, but what would the benefit of multiple buttons with the same name be?

cLFlaVA 2008-12-18 20:45:20

@cLFIaVA, I've had to do something similar to this, and went with a Javascript approach. In my case, I had a table with UPDATE and DELETE buttons next to each item, but also check boxes on the left which are used when you hit a button for the whole form (to perform a mass operation).

strager 2008-12-18 22:29:53

Answer 6

+1 A:

Good news: Microsoft fixed this in IE8 (standards mode only)

Bad news: It is still in beta

This jQuery fix works alright or you can hack your own JS to handle IE.

As for those suggesting input over button, that's fine, but if you want graphics or different styles on your button, then button is the only way to go.

scunliffe 2008-12-18 21:47:46

Answer 7

+1 A:

The link you provided in the question explains that IE6 submits all the buttons with every form submission, so your app won't work with IE6 no matter what workaround you use. I tested this and verified that IE6 does indeed do this. This means that without Javascript the <button> tag is useless with IE6, and given the other limitation it is severely limited with IE7 as well. The only non-Javascript workaround I can think of is to put your <button> tags outside your main <form>, in their own forms. You could do this with <a> tags as well, but I can't recommend that since links are always GET requests and GET requests should never have side-effects, such as modifying data.

<div style="float:left">
  <form name="shoppingCart" action="#c" method="GET">
    <input type="hidden" name="item1" value="hat">
    <input type="text" name="item1quantity" value="1"> Hat, red<br>
    <input type="hidden" name="item2" value="scarf">
    <input type="text" name="item2quantity" value="1"> Scarf, red<br>
    <button type="submit" name="button" value="purchase">Buy now!</button>
  </form>  
</div>
<div style="float:right">
  <form name="remove" action="#a" method="GET">
    <input type="hidden" name="item" value="item1">
    <button type="submit" name="button" value="delete1">Remove this item</button>
  </form>
  <form name="remove" action="#b" method="GET">
    <input type="hidden" name="item" value="item2">
    <button type="submit" name="button" value="delete2">Remove this item</button>
  </form>
</div>

The downside of using multiple forms is that you are limited in what you can transmit; if the user changes the quantity in the above form that information won't be submitted when the user clicks 'remove'. But you could consider that graceful degredation for non-JS users, and use JS to synchronize the data in the main form with the hidden forms.

Mr. Shiny and New 2008-12-18 22:03:50

TYPO: You write %lt; instead of <. Good answer, though.

strager 2008-12-18 22:31:43

Thanks strager. Fixed.

Mr. Shiny and New 2008-12-23 18:57:05

Answer 8

A:

I don't know any way of making it work in IE7 (or IE6) without the need for JavaScript (or strange multi-form constructions).

Isn't that localized accessible to the back-end somehow either? Say, is the text coming from a database or will that just be inline in the local templates or so? You should be able to retrieve the localized version of the label both on printing and on validating the form on the back-end, shouldn't you (as much as you'd rather just use the unchanging value as you should really be able to do)?

There's always the JavaScript solution...

The following is more of a proof-of-concept that'll need some tweaking than a ready-made jQuery one-liner, but it should work without the need to change any of the HTML:

<!doctype html>
<html>

<head>

<title>Fix Buttons in IE6</title>

<script type="text/javascript">
function fixButtons() {
    var btns = document.getElementsByTagName('button');

    for (var i = 0; i < btns.length; i++) {
     btns[i].onclick = fixValue;
    }
}

function fixValue() {
    var btns = document.getElementsByTagName('button');

    for (var j = 0; j < btns.length; j++) {
     if (this == btns[j]) {
      this.value = this.getAttributeNode('value').value;
     }
     else {
      btns[j].parentNode.removeChild(btns[j--]);
     }
    }
}
</script>

</head>

<body onload="fixButtons()">

<form action="" method="get">
    <button type="submit" name="action1" value="value1">Do Action 1</button>
    <button type="submit" name="action2" value="value2">Do Action 2a</button>
    <button type="submit" name="action2" value="value3">Do Action 2b</button>
</form>

</body>

</html>

If it only needs to work in IE7, and not in IE6, the fiXValue() function can be reduced to just:

this.value = this.getAttributeNode('value').value

mercator 2008-12-19 00:27:06

Answer 9

+1 A:

The usual workaround to get it working with an input-submit is to munge the value into multiple 'name' attributes, eg.:

<input type="submit" name="submit.buttonA" value="Sausage" />
<input type="submit" name="submit.buttonB" value="Mash" />

The form layer I personally use will automatically convert that as if a 'submit' control with value 'buttonA' or 'buttonB' were clicked, but it should be easy to do manually in most environments.

bobince 2008-12-20 13:09:48

Answer 10

+2 A:

Just had to deal with IE6's wonderful implementation of button elements. This solution does rely on Javascript but some may find it useful.

It's particularly annoying when using the AbstractWizardController in the Spring framework as the button element is the ideal solution for the "Next", "Back" and "Finish" buttons of the wizard but don't work in IE6.

So, I ended up writing a small jQuery based fix (though it's quite trivial to convert it so that you don't have to use the jQuery library).

$(function(){
if((window.XMLHttpRequest == undefined) && (ActiveXObject != undefined)) {
 $('button').click( function(event) {
  var rx = /\bvalue ?= ?(".*?"|'.*?')/i;
  var matches = $(this)[0].outerHTML.match( rx );
  if( matches != null )
   $(this).attr( 'value', matches[1].substring( 1, matches[1].length - 1 ) );
  $('button').not( $(this) ).attr('disabled','disabled');
 });
}
});

This will add an onclick event to all button elements. When a button is clicked it will grab the outerHTML of the button, e.g.:

<button name="playerId" value="34">Walter Payton</button>

and parse out the value attribute. Seems a lot of trouble to go in order to get the value but I found that getAttributeNode('value').value returned the innerHTML rather than the specified value attribute so wasn't very helpful. We then set the submatch of the regex as the value of the button. It should match it if you use either double or single quotes as delimiters but you do have to use some form of delimiter.

The upshot of this is that instead of "Walter Payton" being posted it will actually post "34" instead. The downside is that the button's appearance on the page will also change to "34" just before the form is submitted.

Finally the script will find all button elements except the clicked one and set their disabled attribute to be disabled. This ensures they aren't included in the POST and you don't get false positives.

Luke 2009-06-17 16:28:20

Answer 11

A:

Check out this ie-button-fix project which uses IE behaviors (i.e. javascript) to neatly solve the problem.

Tamlyn 2009-09-03 10:09:14

ansaurus

tags:

views:

answers:

IE sends inner HTML when clicking on a button element

Edit:

related questions