How to clear the textbox value after 5 sec using JQuery?

Question

I have tried this :

  <script type="text/javascript">
        $(function() {
            $("#button").click( function()
            {
                alert('button clicked'); // this is calling
                setTimeout(function(){
                    alert('setTimeout');  // this is not calling
                    document.getElementById('clearTxt').value = "";
                }, 9000);
            }
        );
        });
    </script>

my HTML code:

    <form>
            <input type="text" id="clearTxt"/>                                              
            <input type="submit"  value="Search" id="button"  />
    </form>

But this code is not working.Please help me to solve this issue.

Levi Botelho · Accepted Answer · 2013-01-04T07:20:21.277

9

When I pasted your code into a fiddle, the alert did fire. However the timeout function won't execute because due to the form tags surrounding the inputs, when you click the submit button you navigate away from the page and the timeout doesn't have time to execute. You should either change the submit to a button, or call preventDefault() in the function to stop the form from submitting.

This code works:

HTML:

<form>
    <input type="text" id="clearTxt" />                                           
    <input type="button" value="Search" id="button" />
</form>

Script:

$(function() {
    $("#button").click( function () {
        alert('button clicked');
        setTimeout(function(){
            alert('setTimeout');
            document.getElementById('clearTxt').value = "";
        }, 5000);
    });
});

See http://jsfiddle.net/acfkU/1/

edited Jan 04 '13 at 07:20

answered Jan 04 '13 at 07:13

Levi Botelho

24,626
5
61
96

but i want to submit the form as well. So how to do this? – Jeetu Verma Jan 04 '13 at 07:24
You want to submit the form, have it reload and then 5 seconds after the reload erase the field? – Levi Botelho Jan 04 '13 at 07:24
Instead of firing this on the button click, you need to pass a parameter when the page is reloaded that indicates that you wish to start the timer. You can do this by adding a querystring parameter to the `action` method of the form such as `action="myurl?timer=true"`. You then need to use JavaScript to check for this parameter when the page loads, and if it exists you call the timer function. This http://stackoverflow.com/questions/901115/how-can-i-get-query-string-values tells you how to get querystring values using JS. You could also use server-side code to insert the function if necessary. – Levi Botelho Jan 04 '13 at 07:32

Ram · Answer 2 · 2013-01-04T07:39:52.797

Your code is fine, but you are submitting the form, you can use preventDefault method of the event object and make sure jQuery is loaded in your page.

$("#button").click(function(event) {
    event.preventDefault();
    //alert('button clicked'); // this is calling
    setTimeout(function() {
        // alert('setTimeout'); // this is not calling
        document.getElementById('clearTxt').value = "";
        // $('form').submit();
    }, 9000);
});

Vishal Suthar · Answer 3 · 2013-01-04T08:18:37.610

override the default submit action (that has a preventDefault method) like below:

$("#yourform").submit(function(event) {
    event.preventDefault();
});

Here it is:

HTML

<input type="text" cssClass="textField" id="clearTxt"/>
<input type="button" value="Search" id="button" />

JS

$(function(){
    $("#button").click( function () {
        alert('button clicked');
        setTimeout(function(){
            alert('setTimeout');
            document.getElementById('clearTxt').value = "hi";
        }, 5000);
    });
});

Demo JSFiddle

score 1 · Answer 4 · answered Jan 04 '13 at 07:43

Instead of adding it to click event you can try adding it on form submit.

function onSubmit() {
 alert('button clicked');
  setTimeout(function(){
    alert('setTimeout');
    $('#clearTxt').attr('value',"hi");
  }, 5000);
 return false;
}

Since your are updating the value attribute directly it will take immediate effect in the UI. If don't want to add to the onsubmit, better change the type of the button from submit.

How to clear the textbox value after 5 sec using JQuery?

4 Answers4

Demo JSFiddle