Jquery Apache - IE problem

Question

I'm having a button tag on my page with a value.

<button class='btn' value='value'>show value</button>

I have this jquery code :

    $('.btn').click(function() {
    var w = 'value = '+$(this).val()+' / text = '+$(this).html();
    alert(w);
});

In FF, no problem the result is ok (display: value = value / text = show value).
The problem comes with IE8 which displays a different results from my testing server and the production server. The testing server is my local machine with a standard XAMPP installation. The productionserver is a server based on linux with apache, php and mysql.

Result from the testing server is ok (display like FF), the result from the production server is not good (displaying : value = show value / text : show value).

Anyone an idea if it is apache that causes the error ? I know there are some issues with the use of val() because IE is considering it as an attribute and not a value.

The problem is that changing the jQuery from val() to attr('value') is quit a lot of work (this implementation is already on a lot of pages) and I think it could be much easier to change something on the webserver.

Answer 1

This is a known client-side issue with IE, I can't adequately explain the differences between the servers, other to say ensure you're testing with the same browsers and versions.

From W3C:

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.

The easiest way to get consistent behavior (aside from .attr('value'), which I strongly recommend) from this is to replace your button with:

<input type="submit" class='btn' value='value' />

Unfortunately this doesn't give you the display value, however if you had a proxy button you could get the same effect as button, it's messy but it makes IE work:

<input type="button" class='btnPoxy' value='show value' />
<input type="submit" class='btn' value='value' style='display: none;' />

jQuery for this:

$(".btnProxy").click(function() {
  $(this).next(".btn").click();
});