Reset textbox value in javascript

Question

If I have a input textbox like this:

<input type="text" id="searchField" name="searchField" />

How can I set the value of the textfield using javascript or jQuery?

You would think this was simple but I've tried the following:

Using defaultvalue

var a = document.getElementById("searchField");
a.value = a.defaultValue;

Using jQuery

jQuery("#searchField").focus( function()
{ 
  $(this).val(""); 
} );

Using js

document.getElementById("searchField").value = "";

None of them are doing it... :/

I have a anchor link which calls some javascript method onClick. The rest of the js in there runs fine, but this code doesn't want to work. I think I've got something else interfering with it :/ — ingh.am
– ingh.am, Commented Aug 24, 2011 at 11:01
Could show us a a bit more of your code. The context in wich this is use? maybe a jsfiddle? — David Laberge
– David Laberge, Commented Aug 24, 2011 at 11:02
Have you tried to trace your code with alert. The error might occur above in the code. — David Laberge
– David Laberge, Commented Aug 24, 2011 at 11:04

David Laberge · Accepted Answer · 2011-08-24 10:54:54Z

128

In Javascript :

document.getElementById('searchField').value = '';

In jQuery :

$('#searchField').val('');

That should do it

answered Aug 24, 2011 at 10:54

David Laberge

16.1k15 gold badges56 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user2985029 · Accepted Answer · 2013-06-26 10:27:34Z

10

With jQuery, I've found that sometimes using val to clear the value of a textbox has no effect, in those situations I've found that using attr does the job

$('#searchField').attr("value", "");

answered Jun 26, 2013 at 10:27

user2985029

1 Comment

Halter Over a year ago

I haven't done extensive testing on this, but it seems that this method is the only one that works with elements that are dynamically created and injected into the DOM, for instance the jQuery UI combobox. .val() does not work

lukad · Accepted Answer · 2011-08-24 11:12:29Z

3

Use it like this:

$("#searchField").focus(function() {
    $(this).val("");
});

It has to work. Otherwise it probably never gets focused.

edited Aug 24, 2011 at 11:12

answered Aug 24, 2011 at 11:00

lukad

17.9k3 gold badges39 silver badges56 bronze badges

2 Comments

lukad Over a year ago

Maybe you need to give us more of your code because i tested my script and it works fine. You probably made a mistake where you expect it the least. By the way, if you want a placeholder in your text input you could use: <input type="text" (id, name, etc) placeholder="hello" />

ingh.am Over a year ago

Turns out something else was stopping the script being called. This wasn't a ideal solution though as it would only empty the box when the user clicks on it.

Senad Meškin · Accepted Answer · 2011-08-24 10:54:59Z

1

To set value

 $('#searchField').val('your_value');

to retrieve value

$('#searchField').val();

answered Aug 24, 2011 at 10:54

Senad Meškin

13.8k4 gold badges39 silver badges55 bronze badges

1 Comment

ingh.am Over a year ago

This is what I've been trying, I've got a feeling it might be something else interfering with it :/

AnOldMan · Accepted Answer · 2015-12-11 17:50:40Z

1

I know this is an old post, but this may help clarify:

$('#searchField')
    .val('')// [property value] e.g. what is visible / will be submitted
    .attr('value', '');// [attribute value] e.g. <input value="preset" ...

Changing [attribute value] has no effect if there is a [property value]. (user || js altered input)

answered Dec 11, 2015 at 17:50

AnOldMan

111 bronze badge

Comments

taylorc93 · Accepted Answer · 2015-12-29 17:55:22Z

1

Try using this:

$('#searchField').val('');

edited Dec 29, 2015 at 17:55

taylorc93

3,7162 gold badges22 silver badges34 bronze badges

answered Dec 29, 2015 at 17:35

salar

415 bronze badges

Comments

pimvdb · Accepted Answer · 2011-08-24 10:55:13Z

0

First, select the element. You can usually use the ID like this:

$("#searchField"); // select element by using "#someid"

Then, to set the value, use .val("something") as in:

$("#searchField").val("something"); // set the value

Note that you should only run this code when the element is available. The usual way to do this is:

$(document).ready(function() { // execute when everything is loaded
    $("#searchField").val("something"); // set the value
});

answered Aug 24, 2011 at 10:55

pimvdb

155k80 gold badges313 silver badges357 bronze badges

Comments

Jose · Accepted Answer · 2016-12-28 08:55:16Z

0

This worked for me:

$("#searchField").focus(function()
{ 
    this.value = ''; 
});

answered Dec 28, 2016 at 8:55

Jose

1,9071 gold badge17 silver badges34 bronze badges

Comments

Malik Muhammad Bilal Awan · Accepted Answer · 2017-04-12 06:18:50Z

-2

this is might be a possible solution

void 0 != document.getElementById("ad") &&       (document.getElementById("ad").onclick =function(){
 var a = $("#client_id").val();
 var b = $("#contact").val();
 var c = $("#message").val();
 var Qdata = { client_id: a, contact:b, message:c }
 var respo='';
     $("#message").html('');

return $.ajax({

    url: applicationPath ,
    type: "POST",
    data: Qdata,
    success: function(e) {
         $("#mcg").html("msg send successfully");

    }

})

});

answered Apr 12, 2017 at 6:18

Malik Muhammad Bilal Awan

3210 bronze badges

Collectives™ on Stack Overflow

Reset textbox value in javascript

9 Answers 9

Comments

1 Comment

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

1 Comment

2 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related