Reputation: 17

why this jquery functions not getting called

I have written very simple code, here is the html code:

<form name="signInForm">
    <section id="signInSection">
        <input class="large" type="text" placeholder="username" />
        <br>
        <input class="large" type="password" placeholder="password">
        <br>
        <button id="signinbtn" class="small">Sign In</button>
        <br>
        <label><input type="checkbox" />Remember me.</label>
        <a href="#">Reset Password</a>

        <img src="../images/cancel.jpg" alt="Cancel Sign In">
    </section>
</form>

And here is the jQuery:

$('#signinbtn').on('click', function () {
    $('#signInSection').fadeOut(200);       
    $('#signedInSection').fadeIn(200);
    $('.signUp').fadeOut(1);
    $('.signIn').closest('header').find('input').fadeIn(200);
    $('#memberToolBarSection').fadeIn(1500);
    $('#contents').fadeIn(1500);
});

Whatever I write inside the above mentioned click handler, it is not working. Although I tested by putting an alert that the handler is getting invoked.

Can anyone please tell me why it is not invoking all the fadeIn and fadeOut function calls?

Upvotes: 1

Answers (4)

Reinstate Monica Cellio

Reputation: 26143

Try this...

$('#signinbtn').on('click', function (e) {
    e.preventDefault();
    $('#signInSection').fadeOut(200);       
    $('#signedInSection').fadeIn(200);
    $('.signUp').fadeOut(1);
    $('.signIn').closest('header').find('input').fadeIn(200);
    $('#memberToolBarSection').fadeIn(1500);
    $('#contents').fadeIn(1500);
});

It looks like the form is being submitted, which in this case just reloads the page.

Adding the e parameter to the event handler and adding e.preventDefault() will stop the form submitting.

Here's a working example

Upvotes: 6

xknozi

Reputation: 1495

Try This one

 $('form').on('click', '#signinbtn', function () {
    $('#signInSection').fadeOut(200);       
    $('#signedInSection').fadeIn(200);
    $('.signUp').fadeOut(1);
    $('.signIn').closest('header').find('input').fadeIn(200);
    $('#memberToolBarSection').fadeIn(1500);
    $('#contents').fadeIn(1500);
});

Upvotes: -2

SarathSprakash

Reputation: 4624

Working DEMO

Try this

e.preventDefault(); prevent it from submitting the form after animations $("#signInForm").submit(); will submit the form where signInForm is the form id

html

<form name="signInForm" id="signInForm">
                <section id="signInSection">
                    <input class="large" type="text" placeholder="username"/><br>
                    <input class="large" type="password" placeholder="password"><br>    
                    <button id="signinbtn" class="small">Sign In</button><br>
                    <label><input type="checkbox"/>Remember me.</label>
                    <a href="#">Reset Password</a>
                    <img src="../images/cancel.jpg" alt="Cancel Sign In">   
                </section>
            </form>

code

$('#signinbtn').on('click', function (e) {
     e.preventDefault();
    $('#signInSection').fadeOut(200);       
    $('#signedInSection').fadeIn(200);
    $('.signUp').fadeOut(1);
    $('.signIn').closest('header').find('input').fadeIn(200);
    $('#memberToolBarSection').fadeIn(1500);
    $('#contents').fadeIn(1500);
    $("#signInForm").submit();
});

Upvotes: 0

DoctorMick

Reputation: 6793

Is it not because the form is being submitted so you're being redirected? If that is the case, change your handler to the following:

$('#signinbtn').on('click', function (e) {
    e.preventDefault();
    $('#signInSection').fadeOut(200);       
    $('#signedInSection').fadeIn(200);
    $('.signUp').fadeOut(1);
    $('.signIn').closest('header').find('input').fadeIn(200);
    $('#memberToolBarSection').fadeIn(1500);
    $('#contents').fadeIn(1500);
});

The crucial line being e.preventDefault();