Question

我正在尝试将脚本添加到我的html表单中，该表单将删除所有未选中的复选框，并将其替换为隐藏字段和值“no”。如果选中复选框，它们将显示值“是”。

请注意，我无法将此隐藏字段添加到表单中，因为我托管它的网站不允许两个具有相同名称的表单字段，正如我之前看到的建议：Post the checkboxes that are unchecked

出于某种原因，脚本仅在我加载页面时工作，提交未选中所有复选框的表单，然后再次提交表单。如果我重新加载页面，我必须再次做同样的事情。这显示了我所指的内容：https://gfycat.com/HarshWaterloggedKestrel

是因为我在第一次提交表单后添加了事件监听器吗？

以下是示例代码的小提琴：https://jsfiddle.net/gvd1jr0o/6/

这是我的剧本：

$("#foo").submit(
  function() {
    var formEl = $(this);//get the reference of the form
    debugger;
    // Add an event listener on #foo submit action...
    // For each unchecked checkbox on the form...
    formEl.find("input:checkbox:not(:checked)").each(

      // Create a hidden field with the same name as the checkbox and a value of 0
      // You could just as easily use "off", "false", or whatever you want to get
      // when the checkbox is empty.
      function(index) {
        var input = $("<input>");
        input.attr('type', 'hidden');
        input.attr('name', $(this).attr("name")); // Same name as the checkbox
        input.attr('value', "no"); // or 'off', 'false', 'no', whatever

        // append it to the form the checkbox is in just as it's being submitted
        formEl.append(input); //$("#foo") is referring to the form

      } // end function inside each()
    ); // end each() argument list

    return true; // Don't abort the form submit

  } // end function inside submit()
);

Answer 1

我认为你会以错误的方式解决这个问题。

首先，在表单或页面中添加一个onLoad事件处理程序，为所有未选中的复选框创建复选框。然后，在复选框元素上创建一个事件处理程序，在其选中状态更改时创建或删除该复选框的相关输入元素。这样，您提交表单时就已创建了复选框。我认为您目前遇到了竞争条件，即在创建复选框之前提交表单。

有关如何向复选框或表单/页面添加事件处理程序的更多信息，请参阅jQuery文档。

Answer 2

你的小提琴正常工作（据我所知）。您可以将所有内容包装到 document.ready（）或（它是愚蠢的）当您打开控制台时忘记调试器。

Answer 3

我已经更改了添加输入标记并使用preventDefault进行提交，请检查下面的代码，如果您需要，请告诉我..检查时没有编写设置为的代码..

$(function() {
$("#foo").submit(
  function(e) {
    e.preventDefault();
  	var formEl = $(this);//get the reference of the form
    debugger;
    // Add an event listener on #foo submit action...
    // For each unchecked checkbox on the form...
    formEl.find("input:checkbox:not(:checked)").each(

      // Create a hidden field with the same name as the checkbox and a value of 0
      // You could just as easily use "off", "false", or whatever you want to get
      // when the checkbox is empty.
      function(index) {
        var input = $("<input/>");
        input.attr('type', 'hidden');
        input.attr('name', $(this).attr("name")); // Same name as the checkbox
        input.attr('value', "no"); // or 'off', 'false', 'no', whatever

        // append it to the form the checkbox is in just as it's being submitted
        formEl.append(input); //$("#foo") is referring to the form

      } // end function inside each()
    ); // end each() argument list

    return true; // Don't abort the form submit

  } // end function inside submit()
);                                                 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="foo">
  <input type=checkbox name="c1"/>
  <input type=checkbox name="c2"/>
  <input type=checkbox name="c3"/>
  <input type=submit value=submit />
</form>

为什么我的表单脚本仅适用于第二次提交

3 个答案: