Question

I have the following bit of jQuery for adding a “clear” button to the end of a search form:-

$('#search-tools input:last').after($('<input>',{
  'class': 'search-clear'
  , 'val': 'Clear'
  , 'type': 'submit'
  , 'click': function() {
    // do something
  }
}));

This works well in all browsers except IE; in IE the input button is not getting the value “Clear” set and instead displays “Submit query”. Am I setting val incorrectly or is this a known IE issue with jQuery?

Answer 1

I’ve figured it out…
You have to define the 'value' property after the 'type' property:

$('<input>', {
    'class': 'search-clear',
    'type': 'submit',
    'value': 'Clear',
    'click': function() {
        // do something
    }
})

Live demo: http://jsfiddle.net/b8mk6/10/

---

IE clears the value of the 'value' property when the 'type' property is set to 'submit'. So:

var input = document.createElement( 'input' );

input.value = 'test...';
input.type = 'submit'; // the value is cleared

document.body.appendChild( input );

Live demo: http://jsfiddle.net/Z3xQ5/1/