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的：防止默认形式的行动，并提醒用户

回答

相关问题