如何根據用戶選擇的選項使用JQuery提交表單

Question

關於這個主題，我環顧了幾個不同的問題，沒有任何突破。 我要做的是，當用戶單擊“ submit按鈕時，我在屏幕上顯示3個按鈕，如果用戶單擊第三個按鈕，則表單將提交。 否則，我將阻止提交表單。

但是我在實現這個方面遇到了麻煩。 目前，我正在以這種方式進行操作，從我的研究中，我發現在提交表單后立即調用e.preventDefault()犯了一個非常明顯的錯誤，導致無法提交表單。

希望在我的代碼中您會看到我正在嘗試做的事情。 在提交表單之前顯示三個選項，只有在選擇了第三個選項時才提交。

HTML：

<form action="some_url" method="post">
    <input type="text" value="" id="fname" />
    <input type="submit" value="Submit" />
</form>
<br/>
<div id="option-box"> 
 <span id="option-a">Option A</span>
 <span id="option-b">Option B</span>
 <span id="option-c">Option C</span>
</div>

JQuery的：

 $('form').submit(function (e) { e.preventDefault(); $('#option-box').show(); $('#option-a').click(function () { alert('option a'); //Do something else }); $('#option-b').click(function () { alert('option b'); //Do something else }); $('#option-c').click(function () { alert('option c - SUBMIT'); $('form').submit(); }); }); 

 #option-box { display: none; } #option-box span { background:green; color: white; display: block; cursor: pointer; padding:5px; margin: 10px 0; text-align:center; max-width: 100px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <form action="some_url" method="post"> <input type="text" value="" id="fname" /> <input type="submit" value="Submit" /> </form> <br/> <div id="option-box"> <span id="option-a">Option A</span> <span id="option-b">Option B</span> <span id="option-c">Option C</span> </div> 

這是我當前代碼的小提琴：

https://jsfiddle.net/javacadabra/rb553ttw/1/

Answer 1

您需要阻止提交表格才能開始

$('form').submit(function (e) {
    e.preventDefault(); //<-- Need this
    //... other code
});

在另一個動作中添加事件處理程序也會導致問題。 提交不止一次，您將擁有更多的事件處理程序。 因此，您需要刪除以前的事件。 您可以off將其刪除

 $('#option-a').off("click").on("click", function () { /* other code */ });

最后，您無需取消按鈕的默認操作，因為它們不應執行任何操作。

而且，如果您要提交表單，則可能要取消綁定Submit方法或直接從DOM調用它。

$('form').off("submit").submit();

要么

$('form')[0].submit();

Answer 2

記下最后一個選擇是什么，並基於該選擇進行preventDefault ：

var selectedOption = "";

$('form').submit(function (e) {
    $('#option-box').show();
    if (selectedOption != "option-c") {
        e.preventDefault();
    }
});

$('#option-box').on('click', 'span', function () {
    selectedOption = $(this).attr("id");
});

JSFiddle： https ：//jsfiddle.net/TrueBlueAussie/rb553ttw/4/

Answer 3

我可以考慮幾種解決方案。

1.刪​​除type =“ submit”

這里不是使<button type="submit">你可以把它<button type="button">除非你在點擊事件監聽器腳本指定它不提交表單$('form').submit()

2.在選擇選項上激活按鈕

在這里，您的提交按鈕最初被禁用。 您可以使用選項或腳本中的onClick事件來調用該函數，並刪除按鈕的Disabled屬性

3.在選擇選項上應用表單操作網址

與第二個選項類似，在這里您將設置當用戶使用腳本選擇特定選項時的操作網址。 如果用戶選擇任何其他選項並單擊“提交”，則不會執行任何操作