JS button, bind function not working

Question

I am working with js and jquery. I have a test login page I'm working on and seem to be having trouble with the bind on the login button. In Chrome i see that the js file is loading, but when you click on the button it just refreshes the page. It doesn't show the alert section or shake if you enter the incorrect info, and it doesn't redirect to the main page if you enter the correct info. Here is my code:

HTML:

<body>
    <div id="content">

        <section class="ui-widget ui-corner-all">
            <header class="ui-widget-header ui-corner-top">
                Test Login
            </header>

            <div class="ui-widget-content ui-corner-bottom">

                <p class="ui-state-error">Uername / Password Incorrect.</p>

                <form>
                    <div>
                        <label for="username">Username:</label>
                        <input id="username" type="text">
                    </div>

                    <div>
                        <label for="password">Password:</label>
                        <input id="password" type="password">
                    </div>

                    <div>
                        <input id="btnLogin" type="submit" value="Login">
                    </div>
                </form>
            </div>
        </section>
    </div>

    <div class="ui-widget-overlay" style"z-index: 1002;"> </div>

</body>

JS:

$(".ui-state-error").hide();

$("#btnLogin").button()

.bind ("click", function() {
    if($("#username").val() != "test" && $("#password").val() != "test") {
        $(".ui-state-error").show();
        $("#login section").effect("shake", 150);
    }
    else {
        document.location = 'index.html';
    }

    return false;
});

remove .button() from javascript block

AHMED EL-HAROUNY
– AHMED EL-HAROUNY

2012-06-06 17:44:23 +00:00
Commented Jun 6, 2012 at 17:44 — AHMED EL-HAROUNY
– AHMED EL-HAROUNY, Commented Jun 6, 2012 at 17:44

Adil · Accepted Answer · 2012-06-06 18:21:43Z

2

Try this

$(function(){
    $("#btnLogin").button().bind ("click", function() {
        if($("#username").val() != "test" && $("#password").val() != "test") {
            $(".ui-state-error").show();
            $("#login section").effect("shake", 150);
        }
        else {
            document.location = 'index.html';
        }

        return false;
    });
});

edited Jun 6, 2012 at 18:21

answered Jun 6, 2012 at 17:38

Adil

148k25 gold badges217 silver badges207 bronze badges

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

4 Comments

Dave Over a year ago

That did not work. Still doesn't do anything when you click the button. And to pull the jQuery UI formatting I want, I think I do need the .button() call.

Dave Over a year ago

for reference, I was pulling the example from here and it works there.

Adil Over a year ago

Yes its working on JsFiddle, one thing I could guess is the right binding and I make it on document ready event. I have updated my answer.

Dave Over a year ago

That nailed it. Thank you very much!

AHMED EL-HAROUNY · Accepted Answer · 2012-06-06 17:59:03Z

0

check this: http://jsfiddle.net/Q5YeX/

I think you are not referencing the right jquery UI lib or your are referencing it the wrong way

answered Jun 6, 2012 at 17:59

AHMED EL-HAROUNY

7266 silver badges18 bronze badges

1 Comment

AHMED EL-HAROUNY Over a year ago

JQueryUI reference. can you add the whole markup of the page including header section or where you are putting your <script> tags

Collectives™ on Stack Overflow

JS button, bind function not working

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related