why this jquery functions not getting called

Question

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?

Reinstate Monica Cellio · Accepted Answer · 2013-09-11 15:44:46Z

6

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

edited Sep 11, 2013 at 15:44

answered Sep 11, 2013 at 15:15

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

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

2 Comments

RAJA MALIK Over a year ago

It is working with event.preventDefault(). But I have not given method="post" in the form then why it is submitting?

Reinstate Monica Cellio Over a year ago

If you haven't specified a method or action then the default behaviour of a form is to submit a GET to the current URL.

DoctorMick · Accepted Answer · 2013-09-11 15:20:11Z

0

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

answered Sep 11, 2013 at 15:20

DoctorMick

6,80330 silver badges27 bronze badges

Comments

SarathSprakash · Accepted Answer · 2013-09-11 15:30:14Z

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

xknozi · Accepted Answer · 2013-09-11 15:32:56Z

-2

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

answered Sep 11, 2013 at 15:32

xknozi

1,5053 gold badges14 silver badges21 bronze badges

Collectives™ on Stack Overflow

why this jquery functions not getting called

4 Answers 4

2 Comments

Comments

Working DEMO

html

code

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Working DEMO

html

code

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related