javascript - 通过删除隐藏的 div 执行干净的提交

Question

我正在尝试执行“干净”提交，即在从表单字段中删除所有隐藏的 div 后调用的提交。

由于这是我将更经常使用的功能，因此我将代码转移到了扩展部分：

$.fn.extend({   
  bindCleanSubmit: function() {
    $(this).submit( function(event) {
      event.preventDefault();
      $(this).find("div:hidden").remove();
      console.log("trying to commit...");

      return true;
    });
  }
}); 

现在，所有的 div 都被删除了，控制台事件被触发，但最后没有执行提交。

你现在的问题在这里吗？

Answer 1

我不确定您要做什么preventDefault()，但是如果您将其从中删除bindCleanSubmit()，隐藏的 div 将从表单中删除，并且将正常提交。所以给出以下html：

<form id="myform" method="POST" action="/">
    <input type="text" name="displayedInput" value="1"/>
    <div style="display: none">
        <input type="text" name="hiddenInput" value="1"/>
    </div>
    <button type="submit">Submit</button>
</form>

...和更新的插件：

$.fn.extend({   
  bindCleanSubmit: function() {
    $(this).submit( function(event) {
      $(this).find("div:hidden").remove();
      console.log("trying to commit...");
      return true;
    });
  }
}); 

$('#myform').bindCleanSubmit();

...只有在提交时才displayedInput会将值提交给服务器myform。