jQuery的：防止默認形式的行動，並提醒用戶

我有以下腳本：jQuery的：防止默認形式的行動，並提醒用戶

<script type="text/javascript"> 
$(document).ready(function(){ 

$("#ProjModelChoose").change(function() { 
    $("#ProjModelChooseCOM").attr("name","form" + $(this).val()); 
    $("input[name='buyid']").attr("value", $(this).val()); 
}); 

$("#ProjModelChoose2").change(function() { 
    $("#ProjModelChooseOEM").attr("name","form" + $(this).val()); 
    $("input[name='buyid']").attr("value", $(this).val()); 
}); 

$(".atcButton").click(function() { 
    if($("select option:selected").val("Choose Your Projector Model")) { 
    event.preventDefault(); 
    alert("Please choose a projector model"); 
    } 
    }); 
}); 
</script>

的HTML：

<table cellpadding="0" cellspacing="0" border="0"> 
<tr> 
<span>Purchase today for: </span><h3 class="atcPrice">$192</h3> 
<select name="chooseModelOEM" id="ProjModelChoose"> 
<option value="Choose Your Projector Model">Choose Your Projector Model</option> 
<option value="126648">PLC-SU70</option> 
<option value="126682">PLC-WXE45</option> 
<option value="126684">PLC-WXE46</option> 
<option value="126686">PLC-WXL46</option> 
<option value="126717">PLC-XE40</option> 
<option value="126719">PLC-XE45</option> 
<option value="126795">PLC-XL40</option> 
<option value="126797">PLC-XL45</option> 
<option value="126998">PLC-XU73</option> 
<option value="127000">PLC-XU74</option> 
<option value="127006">PLC-XU83</option> 
<option value="127008">PLC-XU84</option> 
<option value="127010">PLC-XU86</option> 
<option value="127012">PLC-XU87</option> 
</select> 
<form name="" action='someaction' method=post id="ProjModelChooseCOM" target="_blank"><input type='hidden' name='buyid' value=""><input type='hidden' name='c' value="1025622"><input type='hidden' name='n' value='5'><td class='text'><input name='add' id='add' size=4 value=1 class='qtyButton' border="0" ></td><td class='text'><input type="image" src="olp-atcbutbg.png" border='0' value='Add to Cart' alt='Add to Cart' class='atcButton'></td></form> 
</tr> 
</table>

好了，所以基本上我將在選定的選項進入價值當用戶從下拉菜單中選擇時的表單。這工作正常。但是，如果用戶不進行選擇（葉上的「選擇您的投影機型號」下拉列表中），並試圖將產品添加到購物車中，我希望它停止的形式提交（它是動態的，所以它會嘗試執行該行動無論）並顯示警報。我上面的代碼既不=/

來源

2012-02-16 user1098767

你可能想看看成表單內的選擇標記，並檢查該值。這樣，每一件事都在你的形式下進行。我做了一個http://jsfiddle.net/3NMDd/隨時編輯它 – iGbanam 2012-02-16 22:14:29

我同意@Yasky。這將使你的HTML更有效，你其實不會有任何代碼從。忘記提前這一點。 – 2012-02-16 23:26:41

明天我會在工作中嘗試新的建議，但您是怎麼意思的，我不需要將價值複製到隱藏的輸入中？我只有一個表單提交和隱藏字段的值將仍然取決於選擇什麼改變。 – user1098767 2012-02-17 04:06:44

試試這個：

$(".atcButton").click(function() { 
    if($("select option:selected").val() === "Choose Your Projector Model") { 
     alert("Please choose a projector model"); 
     return false; 
    } 
});

您也可能希望將事件處理程序更改從$(".atcButton").click()到$("#ProjModelChooseCOM").submit()。

更新對不起，我誤會了問題。編輯來解決價值比較問題。

來源

2012-02-16 22:05:08

試過了，沒有工作。選擇列表中的默認選項實際上是否被JS視爲「選擇」？也許這就是問題 – user1098767 2012-02-16 22:06:47

對不起。我錯過了有兩個問題。上面的代碼應該會更好一些。 – 2012-02-16 22:11:47

我試過你的更新代碼，它仍然提交沒有提示的表單 – user1098767 2012-02-16 22:12:21

試試這個：

$(".atcButton").click(function(event) { 
    if($("select option:selected").val() === "Choose Your Projector Model") { 
     event.preventDefault(); 
     alert("Please choose a projector model"); 
     } 
    }); 
});

我補充說：「事件」作爲參數傳遞給被稱爲點擊的結果匿名函數。

更新：我改變的價值比較代碼。

來源

2012-02-16 22:08:29 itsmequinn

工作！感謝：D – user1098767 2012-02-16 22:09:25

其實，它沒有工作，對不起。它顯示提醒並取消表單提交，無論我選擇什麼 – user1098767 2012-02-16 22:11:42

好吧，我更新了數值比較部分。再試一次。 – itsmequinn 2012-02-16 22:17:41

$(".atcButton").click(function(event) { 
    if($("select option:selected").index() == 0) { 
    alert("Please choose a projector model"); 
     event.preventDefault();  
    } 
});

試試這個。

來源

2012-02-16 22:48:26 littlealien

jQuery的：防止默認形式的行動，並提醒用戶

回答

相關問題