1

我想从每个表单中的特定输入值创建动态警报。我在一个页面上有很多表格。每个警报都需要略有不同。我正在使用其中两个表单输入值来生成自定义消息。<input type="hidden" name="on0" value="Size">& <input type="hidden" name="on1" value="Color">. 我的警报适用于页面上的第一个表单，但在第二个表单之后，我的警报与该表单的选定输入值不匹配。如何在用户与之交互的表单中定位这些输入值的特定实例？

这是我的代码的简化版本，仅显示两种形式： example on - jsfiddle

<form method="post" class="list1">
<input type="hidden" name="on0" value="Size">
<select name="os0">
<option value="">-- Choose a Size --</option>
<option value="Short">Short</option>
<option value=" Medium">Medium</option>
<option value=" Long">Long</option>                             
</select>
<input type="hidden" name="on1" value="Color">
<select name="os1">
<option value="">
-- Choose a Color --
</option>
<option value="ivory">ivory</option> <option value=" black"> black</option> 
</select> 
<input type="button" value="Add to Cart" class="catalog">                    
</form>
<!-- seconed form start --> 
<hr />
<form method="post" class="list2">
<input type="hidden" name="on0" value="Option">
<select name="os0">
<option value="">-- Choose a Option --</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>                             
</select>
<input type="hidden" name="on1" value="Accent Color">
<select name="os1">
<option value="">
-- Choose a Choose a Accent Color --
</option>
<option value="red">Red</option>
<option value="yellow">yellow</option> 
<option value="orange">orange</option>   
</select> 
<input type="button" value="Add to Cart" class="catalog">                    
</form>

​​还有我的js

$(document).ready(function(){

    var size_x = $("input[name='on0']").val();
    var color_x = $("input[name='on1']").val();

    function popWarning() {
        if ($("select[name='os0']").val() === "") {
            alert('Please choose a ' + size_x);
            return false;
        }   
        if ($("select[name='os1']").val() === "") {
            alert('Please choose a ' + color_x);
            return false;
        }
    }
    $("input.catalog").click(function() {
        popWarning();
    });​
});
4

5 回答 5

1

引用表单并将其用作上下文。

function popWarning(form) {

    var size_x = form.find("input[name='on0']").val();
    var color_x = form.find("input[name='on1']").val();
    var size = form.find("input[name='os0']").val();
    var color = form.find("input[name='os1']").val();

    if (size  === "") {
        alert('Please choose a ' + size_x);
        return false;
    }

    if (color === "") {
        alert('Please choose a ' + color_x);
        return false;
    }
}
$("input.catalog").click(function() {
    popWarning( $(this.form) );
});​

让我们传入对按钮的引用，因为这似乎是断点。

function popWarning(button) {

    var form = button.get(0).form;
    var size_x = form.find("input[name='on0']").val();
    var color_x = form.find("input[name='on1']").val();
    var size = form.find("input[name='os0']").val();
    var color = form.find("input[name='os1']").val();

    if (size  === "") {
        alert('Please choose a ' + size_x);
        return false;
    }

    if (color === "") {
        alert('Please choose a ' + color_x);
        return false;
    }
}
$("input.catalog").click(function() {
    popWarning( $(this) );
});​
于 2012-12-04T18:30:41.593 回答
0

您有两个带有名称的选择os0和两个带有名称的选择os1。那是你问题的根源。

一旦第if一个表单完成，语句就不会通过，因为具有名称的第一个 DOM 元素os0已经完成。将名称更改为os2或类似的名称并执行独特的if条件。

于 2012-12-04T18:28:40.140 回答
0

您如何期望脚本知道name您正在谈论的表单（以及具有相同属性的元素）而不指定它？尝试这样的事情：

$(document).ready(function(){
    function popWarning(obj) {
        var $form = $(obj).closest("form");
        var size_x = $form.find("input[name='on0']").val();
        var color_x = $form.find("input[name='on1']").val();
        var sel_os0 = $form.find("select[name='os0']");
        var sel_os1 = $form.find("select[name='os1']");
        if (sel_os0.val() === "") {
            alert('Please choose a ' + size_x);
            return false;
        }   
        if (sel_os1.val() === "") {
            alert('Please choose a ' + color_x);
            return false;
        }
    }
    $("input.catalog").click(function() {
        popWarning(this);
    });
});

工作示例：

http://jsfiddle.net/7YJ63/6/

这样，就可以通过单击（通过）从触发它popWarning的父表单中获取父表单。然后，找到所有元素/值，因为您知道要查找的元素是表单的后代。input.catalogobjthisfind

于 2012-12-04T18:30:36.643 回答
0

我的警报适用于页面上的第一个表单，但在第二个表单之后，我的警报与该表单的选定输入值不匹配。

这不是问题，真的。试试你的 JSFiddle，选择一个尺寸，然后单击颜色“添加到购物车”按钮。您将看到正确的消息。问题是您的点击处理程序说“如果大小为空，则说大小，否则如果颜色为空，则说颜色”。

我会重写您的click事件侦听器并按其形式限定它，例如：

$('#sizeForm input.catalog').click(function(){
    var form = $(this).parents('form');
    ...
});

...ETC。这应该可以很容易地确定单击了哪个表单。或者可能更简单：

<input class="catalog size" ... />

$('input.catalog.size').click(function(){popWarning('size');});

...这可能会更加流畅/动态，以便您可以在单个处理程序中处理所有表单...但这可能是对您问题性质的答案的过度杀伤。

反正。祝你好运。

于 2012-12-04T18:32:24.713 回答
0

this我认为如果您使用关键字来迭代带有 JQuery 的选择列表，您可以更加坚持 DRY 和优雅each()。这些方面的东西：

  $("input.catalog").click(function() {
      form = $(this).parent();
    select = form.find("select");
      message = '';
      select.each(
          function(){
              if ($(this).val()=='') {
          number = $(this).attr("name").substr(-1);
          message+= $("input[name=on" + number + "]").val() + " ";
            }
          }
      );
      if (message!='') {
      console.log("Please select the following: " + message);
          return false;
      }
});​
于 2012-12-04T18:32:40.747 回答