jQuery - on form submit trigger event on page load

Question

I have a login form, when you Click the login button the form fadesIn(), then when the user submits the page it is reloaded with the Error validation.

The issue is, Once the page loads again, the form box doesn't appear because there was no trigger from the login button. Is there a way that once the form has been submitted, the javascript automatically fadesIn the form box again?

example

//Login trigger
<a href="#" class="login">Login</a>

//Form that appears on trigger
<form method="POST" action="index.php">
<label>Username</label><input type="text" name="username" />
<label>Password</label><input type="password" name="password" />
<input type="submit" name="submit" value="submit" />
</form>

JQuery

$("a.login").click(function(event) {
    event.preventDefault();
    $("form").fadeIn("200");
});

User submits form -> page reloads -> want the page to automatically trigger the login handler so the form fades back in

Jubayer Arefin · Accepted Answer · 2011-12-04 18:14:07Z

2

Can you wrap the form in a div and make it hidden by CSS. Then upon click event use jQuery show() or change CSS to show the div with the form.

answered Dec 4, 2011 at 18:14

Jubayer Arefin

4957 silver badges17 bronze badges

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

Comments

phemios · Accepted Answer · 2011-12-04 17:41:15Z

0

Another solution could be to use Jquery .trigger(): http://api.jquery.com/trigger/

Something like $("a.login")).trigger('click'); when your are in a case you want to simulate a click on $("a.login"))

answered Dec 4, 2011 at 17:41

phemios

6744 silver badges10 bronze badges

2 Comments

user863739 Over a year ago

I was thinking that but the page will reload when the submit is pressed so won't the js re-load and the trigger won't be activated?

phemios Over a year ago

You can add an input hidden on the reloaded page. If this input is set you use the trigger function. Like if ($('#autofadein').val() == 1){$("a.login")).trigger('click');}

Sudhir Bastakoti · Accepted Answer · 2011-12-04 17:39:27Z

0

Wont this help:

$(document).ready(function() {
  //show the form
  $("form").fadeIn("200");
});

answered Dec 4, 2011 at 17:39

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

1 Comment

user863739 Over a year ago

No because that will show the form constantly, I only want it to show the form when it's validated or when the user clicks "login". Not always show it.

Collectives™ on Stack Overflow

jQuery - on form submit trigger event on page load

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related