JQuery cannot clear specific input with .val ('')

Question

I searched and searched for an error here, since I cannot clear the #keywordsearch input when I click the reset button in my HTML. However, I cannot find anything - can you see the problem?

http://jsfiddle.net/eKWyY/

Here is my JS:

$('#dirreset').click(function() { $('#fatform option').each(function(index) { $(this).removeAttr("selected"); }); $('#keywordsearch').val(''); }); 

Thanks for any help, it bothers me a bit!

Os

Answer 1

When you press the Reset button, the Reset values ​​correspond to the default values. And asf is your default value, so it is not cleared, so change

 <input type="reset" name="osu_directory_search_reset" value="Reset" id="dirreset"> 

to

 <input type="button" name="osu_directory_search_reset" value="Reset" id="dirreset"> 

Demo: jsFiddle

Answer 2

After clicking the "reset" button, the click event is executed, but after that the form is reset. At this time, “asf” will return to the input field, as it will be the initial one.

Try to see the following.

How to execute code after html reset form with jquery?

Answer 3

By default, JavaScript reset is called after your .click() function, which returns the default asf value.

If you want to avoid using the default reset functionality, use jQuery event.preventDefault() or just add return false; at the end of your function. for instance

 $('#dirreset').click(function() { $('#keywordsearch').val(''); return false; }); 

Alternatively, change the <input> type to "button" , which will not have the default reset functionality executed after your function. However, you may need to do extra work if you want to simulate a reset.

Answer 4

If you want to keep the default value of "asf", you need to change the input type reset to button

Answer 5

As you specified the value as asf when clearing the value attribute, you will only get the default value.

In one sentence, you can use the placeholder attribute of the input type if you want to show a little input hint to the user.

Example http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_placeholder

Answer 6

try to sign his work.

Demo

 $(document).ready(function() { $('#dirreset').click(function() { $('#fatform option').each(function(index) { $(this).removeAttr("selected"); }); $('#keywordsearch').attr('value',''); }); }); 

Use attr .