Reset textbox value in javascript

JavascriptJqueryHtml

Javascript Problem Overview


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... :/

Javascript Solutions


Solution 1 - Javascript

In Javascript :

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

In jQuery :

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

That should do it

Solution 2 - Javascript

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", "");

Solution 3 - Javascript

Use it like this:

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

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

Solution 4 - Javascript

To set value

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

to retrieve value

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

Solution 5 - Javascript

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)

Solution 6 - Javascript

Try using this:

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

Solution 7 - Javascript

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
});

Solution 8 - Javascript

This worked for me:

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

Solution 9 - Javascript

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");
		
	}
	
})

});

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questioningh.amView Question on Stackoverflow
Solution 1 - JavascriptDavid LabergeView Answer on Stackoverflow
Solution 2 - Javascriptuser2985029View Answer on Stackoverflow
Solution 3 - JavascriptlukadView Answer on Stackoverflow
Solution 4 - JavascriptSenad MeškinView Answer on Stackoverflow
Solution 5 - JavascriptAnOldManView Answer on Stackoverflow
Solution 6 - JavascriptsalarView Answer on Stackoverflow
Solution 7 - JavascriptpimvdbView Answer on Stackoverflow
Solution 8 - JavascriptJoseView Answer on Stackoverflow
Solution 9 - JavascriptMalik Muhammad Bilal AwanView Answer on Stackoverflow