CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Mr. Fox
Mr. Fox

Reputation: 328

Jquery click event works on 2nd click

I'm trying to format the users input in the textarea, where extra spaces and enters are replaced with single spaces fortunately this part works, however only on the 2nd click of the button. I want to know what's wrong and how to fix this:

Here's my code and a fiddle: http://jsfiddle.net/EnXp7/

Html

<textarea type="text" id="address" onfocus="if(this.value===this.defaultValue)this.value=''" onblur="if(this.value==='')this.value=this.defaultValue">
   Input Address Here
</textarea>
<input type="button" id="Validate" value="Validate" onClick="valbtn()">

Jquery/Javascript

function valbtn() {
    $("#Validate").click(function () {
        $('#address').val($('#address').val().replace(/\s+/g, ' '));
    });
    var x = document.getElementById("address").value;
    if (x === "" || x === "Input Address Here") {
        alert("No Input");
    }
}

Upvotes: 0

Views: 564

Answers (5)

MildlySerious
MildlySerious

Reputation: 9170

Your current function valbtn() gets called on the first click and binds your validation to click again. So you'll have to click again before actually running that validation.

If you keep calling valbtn() onclick, modify the function like that:

function valbtn() {

    // Run it instead of binding it to the click event
    $('#address').val($('#address').val().replace(/\s+/g,' '));

    var x = document.getElementById("address").value;
    if (x === "" || x === "Input Address Here") {
        alert("No Input");
    }
}

Upvotes: 1

Bhavin Radadiya
Bhavin Radadiya

Reputation: 63

Put your jquery script out side valbtn() function. no need create function use only

below code

$("#Validate").click(function () {
    $('#address').val($('#address').val().replace(/\s+/g,' '));
});

Upvotes: 0

dfsq
dfsq

Reputation: 193261

You should move 

$("#Validate").click(function () {
    $('#address').val($('#address').val().replace(/\s+/g, ' '));
});

outside of the valbtn function:

$("#Validate").click(function () {
    if (valbtn()) {
        $('#address').val($('#address').val().replace(/\s+/g, ' '));
    }
});

I also made valbtn return boolean indicating if processing is needed or not:

function valbtn() {
    var x = $("#address").value;
    if (x === "" || x === "Input Address Here") {
        alert("No Input");
        return false;
    }
    return true;
}

Updated code: http://jsfiddle.net/EnXp7/1/

Upvotes: 0

Steini
Steini

Reputation: 2783

Change your code to:

<script type="text/javascript">
    $(document).ready(function() {
        $("#Validate").click(function() {
            $('#address').val($('#address').val().replace(/\s+/g, ' '));
            var x = document.getElementById("address").value;
            if (x === "" || x === "Input Address Here") {
                alert("No Input");
            }
        });
    });
</script>

and totally remove the onclick event in your input:

<input type="button" id="Validate" value="Validate">

With JQuery you dont need that.

You have an action listener in an action listener or in other words you mixed jQuery and JavaScript I suggest you drop the JavaScript call as desribed above and do a pure JQUery action listener which is more clear and easy to use.

It will also take care about browser compatiblity for you.

Upvotes: 0

Martin Zikmund
Martin Zikmund

Reputation: 39072

Because you are assigning a second click handler inside the click function.

Delete the onClick attribute from you HTML and in Javascript replace your current code with just this:

$("#Validate").click(function () {
    $('#address').val($('#address').val().replace(/\s+/g, ' '));
});

Upvotes: 0

Related Questions