Basic jQuery pop with mutiple forms

Question

I am trying to create a dialog pop-up box with 2 forms inside of it. The pop-up works great, but inside of the dialog I have 2 forms, each with separate actions.

I am using the jQuery Form Plugin, to submit my form and show a response to #showResponse

The problem i'm having is whenever I click either of the forms it loads the first form in the #showResponse, and i'm not exactly sure why....

This is my Javascript Code

$(".formFill2").validate({
    submitHandler: function (form) {
        $(form).ajaxSubmit({
            target: "#submitResponse",
            success: function (responseText, statusText, xhr, form) {
                $("#submitResponse").show('slow');
                $('#submitResponse').delay(4000).fadeOut('slow');

            },
            error: function (responseText, statusText, xhr, form) {
                alert("Oops... Looks like there has been a problem.");
            }
        });
        return false;
    }
});   

And this is my HTML inside my Dialog Window.

<fieldset><legend>Email this PDF to</legend>
                  <form class="formFill2" name="emailPDF" id="emailPDF" action="classes/class.Post.php?a=notifyForm" method="post">
                    <label for="email1">Email 1</label>
                    <input name="email1" type="text" value="<?php echo $_SESSION['myEmail']; ?>"><br />

                    <input type="submit" value="Send Emails">
                  </form>    
                  </fieldset>

                  <fieldset><legend>Fax this PDF to</legend>
                  <form class="formFill2" name="faxPDF" id="faxPDF" action="classes/class.Post.php?a=faxFile" method="post">
                    <label for="faxNumber">Fax #</label>
                    <input name="faxNumber" type="text" ><br />

                    <input type="submit" value="Send Fax">
                  </form>    
                  </fieldset>

Any help would be appreciative.

Answer 1

I'm speculating a bit here, but it might be a bug in the form validator.

It may be the case that the Validate plugin is using your original CSS selector (.formFill2) in order to get the parameter for the submitHandler function. If they're using something like get(0), then it'll always return the first DOM object discovered by .formFill2 -- the first form.

If you console.log the 'form' parameter that is passed into your submitHandler, do you get the right form?

If it's always giving you the first form, you might want to try something like the following:

var submitHandler = function(form) {
    //Your submitHandler...
}

$('#emailPDF').validate(submitHandler : submitHandler);
$('#faxPDF').validate(submitHandler : submitHandler);