如何从用户与之交互的表单的输入值创建Javascript警报？

我想从每个表单中的特定输入值创建动态警报。我在一页上有许多表格。每个警报都需要略有不同。我使用两个表单输入值来生成自定义消息<代码>&

。我的警报适用于页面上的第一个表单，但在第二个表单之后，我的警报与该表单的选定输入值不匹配。如何在用户与之交互的表单中针对这些输入值的特定实例

下面是我的代码的简化版本，只显示了两种形式：

---

您有两个选择名为

os0

，两个选择名为

os1

。这是你问题的根源

---

第一个表单完成后，

if

语句不会通过，因为名为

os0

的第一个DOM元素已经完成。将名称更改为

os2

或类似名称，如果符合

条件，则执行唯一的
。
您有两个选择，分别为
os0
和
os1
。这是你问题的根源

第一个表单完成后，
if
语句不会通过，因为名为
os0
的第一个DOM元素已经完成。将名称更改为
os2
或类似的名称，并在满足
条件的情况下执行唯一的
。
如果不指定，您如何期望脚本知道您正在谈论的是哪种形式（以及具有相同
名称
属性的元素）？试着这样做：

$(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);
    });
});

工作示例：


通过这种方式，
popWarning
能够从通过单击触发父窗体的
输入.目录
，通过
obj
（
This
传入）获取父窗体。然后，使用
find
查找所有元素/值，因为您知道要查找的元素是表单的后代。
在不指定表单的情况下，您如何期望脚本知道您正在谈论的表单（以及具有相同
名称
属性的元素）？试着这样做：

$(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);
    });
});

工作示例：


通过这种方式，
popWarning
能够从通过单击触发父窗体的
输入.目录
，通过
obj
（
This
传入）获取父窗体。然后，使用
find
查找所有元素/值，因为您知道要查找的元素是表单的后代。
引用表单并将其用作上下文

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) );
});​

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

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) );
});​

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

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

我将重写您的
单击
事件侦听器，并按其形式对其进行范围限定，例如：

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

……等等。这样可以很容易地确定单击了哪个表单。或者可能更容易：

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

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


$（'input.catalog.size'）。单击（函数（）{popWarning（'size'）；}）；

…这可能更灵活/动态，以便您可以在一个处理程序中处理所有表单…但对于您问题的性质来说，这可能是一个过份的回答

无论如何。祝你好运

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

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

我将重写您的
单击
事件侦听器，并按其形式对其进行范围限定，例如：

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

……等等。这样可以很容易地确定单击了哪个表单。或者可能更容易：

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

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


$（'input.catalog.size'）。单击（函数（）{popWarning（'size'）；}）；

…这可能更灵活/动态，以便您可以在一个处理程序中处理所有表单…但对于您问题的性质来说，这可能是一个过份的回答

无论如何。祝你好运。
如果你使用
this
关键字，用JQuery的
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;
      }
});​

我认为，如果使用JQuery的
each（）
在选择列表中迭代使用
this
关键字，您可以更加坚持干爽和优雅。大致如下：

  $("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;
      }
});​

这与使用相同的
名称有何不同？他没有使用相同的名称，这是理所当然的。你不能对同一表单中的两个元素使用相同的
名称
，即使在表单之间，不同的名称也可以作为唯一的IDI。我知道它们使用的不是相同的名称，但它们在表单之间（这就是我的意思）…我猜你指的是到处都是相同的类…我不知道你在说什么，但是为所有隐藏字段设置相同的类在任何方面都没有帮助。它不允许OP识别特定隐藏字段所属的形式。它也不能帮助OP识别要使用的表单。除非你提供一个你所说的例子，否则这没有意义。这与使用相同的
名称有何不同？他没有使用相同的名称，这是理所当然的。不能对中的两个元素使用相同的
名称