使用JavaScript將表單提交到兩個不同的位置，然後使用jQuery驗證

Question

我有一個表單，名爲#summaryforms，用戶可以現在預訂或稍後預訂。

這裏是我的按鈕：

<div class="bookingbuttondiv"> 
    <input type="hidden" name="bookingid" value="<?php echo $bookingid; ?>" /> 
    <input type="button" class="button" value="Book Now" onClick="this.form.action='payment.php';this.form.submit()"> 
    <input type="button" class="button" value="Book Later" onClick="this.form.action='poa.php';this.form.submit()"><br/><br/> 
</div> 

但是每當我試圖使用jQuery驗證，如：

$("#summaryforms").validate(); 

它不工作，我沒有錯誤，我懷疑這是因爲它在jQuery被調用之前提交，是否有解決方法，同時仍然保持提交到兩個不同位置的選項？

Answer 1

從button元素刪除內聯onClick處理程序。您使用的jQuery否定了內聯JavaScript的任何需要。其次，由於jQuery Validate插件已經內置了submit事件處理程序，因此您需要將的按鈕放置在<form></form>的以外，並分別捕獲它們的click事件。

我刪除了內聯onclick處理程序並添加了id屬性。我也用/>自動關閉了input標籤。

HTML：

<form id="summaryforms"> 
    ... 
</form> 

<div class="bookingbuttondiv"> 
    <input type="hidden" name="bookingid" value="<?php echo $bookingid; ?>" /> 
    <input type="button" class="button" value="Book Now" id="now" /> 
    <input type="button" class="button" value="Book Later" id="later" /> 
</div> 

jQuery的：

$(document).ready(function() { 

    $('.button').each(function() { 
     $(this).on('click', function() { 
      var action; 
      if ($(this).attr('id') == "now") { 
       action = 'payment.php'; 
      } else { 
       action = 'poa.php'; 
      } 
      $('#summaryforms').attr('action', action).submit(); 
     }); 
    }); 

    $('#summaryforms').validate({ // initialize the plugin 
     // any options and/or rules 
    }); 

}); 

DEMO：http://jsfiddle.net/a9zAh/

---

編輯：

報價OP：

」 ...我懷疑這是因爲它提出了jQuery調用之前......」

它不應該。調用submit()應該只觸發驗證，因爲插件有一個submit事件監聽器內置有可能是另一個您的代碼中的問題您沒有在OP中顯示我們，也許您的規則定義存在問題。此外，您的id爲summaryforms;爲什麼這個複數？id應該是唯一的，如果您有更多比一個form或頁面上的任何元素共享一個id="summaryforms"，這將導致問題。

Follow my wo以上代碼和jsFiddle演示作爲您的模型，如果遇到問題，請提問。

Answer 2

絕對如此。你想「捕捉」正常的提交，防止它發生，然後做你的驗證。

要停止提交表單，確保它有一個ID（它看起來像你這樣做），並使用這樣的事情：

// on DOM load... 
jQuery(function() { 
    // attach a handler to the SUBMIT of your form 
    jQuery('#summaryforms').submit(function() { 
     // do validation or whatever, and if it passes, return true 
     // to submit 
     if (myFormIsValid) { 
      return true; 
     } 
     // otherwise, prevent it from submitting "normally" 
     return false; 
    }); 
}); 

Answer 3

問題是結合JavaScript和jQuery的。一般來說，JavaScript優先於jQuery。如果你這樣做，像IE這樣的瀏覽器會產生意想不到的結果。並嘗試如下，

編輯的腳本：

在jQuery中，

$(document).ready(function(){ 

    $("#summaryforms").validate(); 

    $("#summaryforms input.button").click(function(e){ 
    var action = ''; 
    if($(e.target).val() === 'Book Now'){ 
     action = 'payment.php'; 
    }else if($(e.target).val() === 'Book Later'){ 
     action = 'poa.php'; 
    } 
    $("#summaryforms").attr('action', action); 
    $("#summaryforms").submit(); 
    }) 

    }); 

在HTML，

<div class="bookingbuttondiv"> 
    <input type="hidden" name="bookingid" value="<?php echo $bookingid; ?>" /> 
    <input name="booknw" type="button" class="button" value="Book Now" > 
    <input name="booklater" type="button" class="button" value="Book Later" ><br/><br/> 
</div>