Question

我正在寻求执行一个基本的表单帖子，但是以下内容在Chrome和Safari中提交服务器两次（但在Firefox中表现得如预期的那样）：

<form id="create-deck-form" action="/decks/create" method="post">
  <fieldset>
    <legend>Create new deck</legend>
    <label for="deck-name-field">Name</label>
    <input id="deck-name-field" name="deck-name-field" type="text" value="" maxlength="140" />

    <label for="tag-field">Tags</label>
    <input id="tag-field" name="tag-field" type="text" value="" maxlength="140" />

    <input class="add-button" type="submit" value="Create" />
  </fieldset>
</form>

我想在提交之前使用onsubmit属性对字段执行验证，但只要返回值为true，表单就会提交两次。

我试图将jQuery处理程序绑定到表单，但是在这里也没有阻止默认行为，表单被提交两次，例如：

<script type="text/javascript">
 $(document).ready(function() {
     $("#create-deck-form").submit(function(event){
          if($("#deck-name-field").val() == "") {
            event.preventDefault();
            alert("deck name required");
          }
        });
 });
</script>

虽然我认为这对于一双新鲜的眼睛有一些令人目眩的明显错误，但我深感困惑的是，为什么提交（无论有无验证）都会在Chrome和Safari中向服务器发送重复的帖子。我很感激任何洞察力。

Answer 1

此问题实际上与Facebox（http://defunkt.github.com/facebox/）相关联。 Facebox初始化会在页面加载后导致第二组请求。因此，如果您发布到/myaction/create，Facebox将启动第二组请求，并将基本网址设置为/myaction/create。修复方法是重定向到一个URL，该URL在发布帖子后处理获取请求，因此您最终不会执行两次发布。非常感谢你的帮助。

Answer 2

我不是百分百肯定，但请尝试这个：

<script type="text/javascript">
   $(document).ready(function() {
      $("#create-deck-form").submit(function(event){
         if(!$("#deck-name-field").val().length) {
           return false;
         }
       });
   });
</script>

如果不起作用，请查看

for(e in $("#create-deck-form").data('events'))
    alert(e);

这会提醒您绑定到form的所有事件。也许有更多的事件处理程序？否则还要提醒/记录

$("#create-deck-form").attr('onclick')

和

$("#create-deck-form").attr('onsubmit')

以防万一。

Answer 3

您可以在提醒后尝试return false;并移除event.preventDefault();。也许你的else子句中也需要return true;。我相信我在某处工作。

Answer 4

好的，不确定这会有多大帮助，但请尝试删除提交输入并通过javascript提交表单。所以例如

<input id="submit-button" class="add-button" type="button" value="Create" />

然后，您可以尝试

而不是收听onsubmit

$('#submit-button').click(function(evt) {
    if(validationSuccess(...)) {
        $("#create-deck-form").submit();
    } else {
        //display whatever
    }
});

现在你的方式也应该工作......但是这样你可以调试你问题的地方....这应该只提交一次......祝你好运！

表单在Chrome / Safari中提交两次

4 个答案: