Question

I have a problem with this jQuery code:

$(document).ready( 
  function(){  
    alert($('#search').val());  

    var dummyInput = $('#search').clone()
    .attr('id', 'search_watermark')
    .val('Search query')

    $('#search').before(dummyInput);
  }
);

$(window).unload(function(){
  $('#search_watermark').remove();
});

and the HTML:

<form id='test_form' action='/test.php' method='post'>
  <label>Create New Team</label><br/>
  <input type='text' id='search' />
</form>

The problem is:

We are assigning a value only to the clone of the input field, not the actual input field. But you will find that in Firefox, when you refresh the page, the value of the actual input field has changed. This behaviour is unexpected.

All other browsers (except FF) behaving as expected. I am using FF 3.5 on XP.

Answer 1

I had to wrap my brain around the question because the alert kind of put me off. Assign some names to your input fields and when you do the clone, give it a different name, ie.+

var dummyInput = $('#search').clone()
.attr('id', 'search_watermark')
.val('Search query').attr( 'name', 'foo' );

Firefox will remember the input, it has nothing to do with JS. If you do a full refresh (+Shift) it should clear out the input from the example you posted as well.