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.

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.

• javascript
• jquery

4 Answers 4

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/acfkU/1/

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

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.

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