jQuery can't clear specific input with .val('')

Question

I've been looking and looking for an error here as I can't clear the input #keywordsearch when clicking on the reset button in my HTML. However, I can't find anything - can you see an issue?

http://jsfiddle.net/eKWyY/

Here's my JS:

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

Thanks for any help, it's driving me a bit mad!

Osu

Your code works... You have a initial value of "asf" which will never be cleared however if thats what you're thinking of. If you remove your value from the input `value="asf"`you will have a completly empty input. :) — Henrik Andersson, Jan 22 '13 at 09:40

score 5 · Accepted Answer · answered Jan 22 '13 at 09:44

Clicking Reset button, the entries are reset to the default values. And asf is your default value, so it wont clear, 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

andyb · Answer 2 · 2013-01-22T09:51:09.837

4

The default JavaScript reset is being called after your .click() function, which resets the input back to the default value of asf.

If you want to avoid executing the default reset functionality use jQuery's event.preventDefault() or more simply add a return false; to the end of your function. For example

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

Alternatively change the type of the <input> to "button" which will not have the default reset functionality executed after your function. However, you may need to do some extra work if you are wanting to mimic the reset.

edited Jan 22 '13 at 09:51

answered Jan 22 '13 at 09:45

andyb

43,435
12
121
150

Thanks @andyb (and everyone for the answers), the first option clears everything which is useful to know. Changing input to button works in this case – Osu Jan 22 '13 at 09:58

score 4 · Answer 3 · edited May 23 '17 at 11:44

4

After click on "reset" button your click event executes but after that it reset's the form. That time "asf" will come back to the input field since it is initial value.

Try to look into following.

How to execute code after html form reset with jquery?

edited May 23 '17 at 11:44

Community

1
1

answered Jan 22 '13 at 09:49

Ashwin Preetham Lobo

1,856
1
14
19

+1 the question linked in your answer has a really good example of how to customise the reset – andyb Jan 22 '13 at 09:54

score 0 · Answer 4 · answered Jan 22 '13 at 09:44

0

If you want to keep the default value "asf" you have to change the input type resetto button

answered Jan 22 '13 at 09:44

Kris

1,882
1
20
23

score 0 · Answer 5 · answered Jan 22 '13 at 09:46

As you have specified the value as asf on clearing the value attribute you will get the default value only.

One suggestion you can use the placeholder attribute of input type if you want to show a little hint to the user about the input.

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

score 0 · Answer 6 · answered Jan 22 '13 at 09:49

try below code its works.

DEMO

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

Use attr.

jQuery can't clear specific input with .val('')

6 Answers6