Question

I have a page with login form (on click, login form slides dowm) and underneath I have a link for registering a new user. With click on ‘register new’ link, new form pops-up and after validating each field, the submit event doesn’t work – because there is a login form too and jQuery tries to trigger submit event of the first form.

How to trigger this specific onsubmit event – for the second form? I tried to hide a first form, but it didn’t work and then I try to disabled it, which doesn’t work as well.
(forms on separate pages works fine – validated with PHP and JS)

I think this is an easy thing to do .. but I cannot figure out how to do. Till now I overcome this problem, but I really like to find out how to make it work.

Thanks.

Unfortunatelly .. none of this answers works …
Here is the code:

<div id="loginFormContainer">
<h2 id="loginShow" class="myriad_pro_bold_condensed_italic">Login</h2>    
<form name="login_form" action="<?php if(isset($action) && !empty($action)) echo $action; ?>" method="POST" id="login_form" >
    <fieldset>
        <label>Your name </label>
        <input type="text" name="username" maxlength="30" id="username_login" value="" class="required" placeholder="Enter Your Name" />
        <label>Your password </label>
        <input type="password" name="password" maxlength="16" id="password_login" value="" class="required " placeholder="Enter Your Password" />
    </fieldset>
    <input type="hidden" name="token" value="<?php if(isset($token)) echo $token; ?>" />
    <input type="submit" name="submit-login" id="submit_login" value="Login" />
</form>
    <div class="small"><a href="register.php" id="register">Register</a> | <a href="password-new.php" id="new-password">Forgotten Password</a></div>
    <div class="error"></div>
</div>

And JS … should work like: if on register click: register windows pops-up, if on login the login form should slide down.
Right now, both of them slides …I can remove the login form if I want to register, but the submit button from register form doesn’t work.

 $("#login_form").hide();
    $("#loginShow").click(function(){


        $('form#login_form .error').remove();
        $("#login_form").slideDown("slow");

        $('form#login_form').on("submit", function(event) {

            event.preventDefault();
            //code validation and ajax submit
        }); //end form submit

    });    

    $('#register').click(function(e) {
        //$('#loginShow').remove(); //form is removed, but submit event still doesn't work
        //if I completely remove login form from php page, then works fine

        e.preventDefault();

        $('form#register_form').click(function(event) {
            event.preventDefault();
            //

        }); //end form submit

    });//end register floating

Oh, yes, one final detail: on Chrome works fine :S, not in FF (v.10)

Answer 1

$(":submit").click(function(e){
  $(this).closest("form").submit();
  return false;
});