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

...提交myform时，只有displayedInput值会被提交给服务器。