Question

我在使用这个小脚本时遇到了麻烦。我有一个产品清单。每个产品都可以从此列表中添加到购物车中。

但我需要验证是否选择了变体。验证工作正常，但提交没有。

JS ：

function submitForm() {
    if ($('#variants').val() !== '') {
        $(this).closest('form').submit();
    } else {
        alert("You need to pick variant");
    }
}

HTML ：

<form id="form" action="FormPost.aspx">
    <select name="variants" id="variants" class="variants">
        <option value="">Select variant</option>   
        <option value="Black">Black</option>
        <option value="White">White</option>
        <option value="Red">Red</option>
    </select>
    <a href="javascript:submitForm();" class="addToCart buybtn_small text-left pull-right">Buy</a>
</form>

JSFiddle

Answer 1

您应该始终尝试制作脚本unobtrusive。
改为使用jQuery的.click()方法：

$('.addToCart').click(function(e){
    e.preventDefault();
    var form = $(this).closest('form');

    // to access the select by tag name:
    if (form.find('select').val()) {

    // to access the select by class:
    // if (form.find('.variants').val()) {

        form.submit();
    } else {
        alert("You need to pick variant");
    }
});

HTML：

<form id="form" action="FormPost.aspx">
    <select name="variants" id="variants" class="variants">
        <option value="">Select variant</option>   
        <option value="Black">Black</option>
        <option value="White">White</option>
        <option value="Red">Red</option>
    </select>
    <a href="#" class="addToCart buybtn_small text-left pull-right">Buy</a>
</form>

Answer 2

JQuery没有找到你的表单，而是使用它：

$('form#form').submit();

这是一个更新的小提琴，调整后工作：

http://jsfiddle.net/y5ytrcuq/

（我添加了jquery引用，使submit函数成为window的一部分，并更改了上面的行）

Answer 3

您应该使用jQuery .submit()方法和提交按钮。提交按钮是提交表单的标准方式，对语义和可访问性更好。

此方法使用提交按钮检测表单的提交时间（优于仅检测链接上的点击，尤其比将代码放入href属性更好）。
您可以传递一个执行检查的功能。并且您使用事件的preventDefault()方法取消提交：

$( "#form" ).submit(function( event ) {
  if($("variants").val() == "")
  {
    //Something is wrong, display a warning and stop the submit action
    alert("You need to chose a variant")
    event.preventDefault();
  }
  //Everything is ok, the submit action happens normally
});

如果未调用event.preventDefault();，表单会正常提交。如果您不必找到被单击的代码，则更容易更改多个表单的代码这是JsFiddle：https://jsfiddle.net/k3zmon2d/3/

使用href a long提交表单并进行验证

3 个答案: