基本的jQuery彈出多個表單

Question

我想創建一個對話框彈出框中的2個窗體。彈出窗口很好用，但在對話框中有兩個窗體，每個窗體都有不同的動作。

我使用jQuery表單插件，提交我的形式，並顯示出應對#showResponse

我遇到的問題是，每當我單擊的形式加載第一種形式的#showResponse ，我不知道是什麼原因....

這是我的JavaScript代碼

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

這是我的我的對話窗口內的HTML。

<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> 

任何幫助將是值得讚賞的。

Answer 1

我在這裏猜測了一下，但它可能是表單驗證程序中的一個錯誤。

驗證插件可能會使用您的原始CSS選擇器（.formFill2）以獲取submitHandler函數的參數。如果他們使用類似get(0)的東西，那麼它將始終返回由.formFill2發現的第一個DOM對象 - 第一種形式。

如果您將console.log傳遞到submitHandler的「表單」參數，您是否得到正確的表單？

如果它總是給你的第一種形式，你可能想嘗試像下面這樣：

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

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