7

我正在寻求执行基本表单发布，但以下内容在 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 中向服务器发送重复的帖子。我会很感激任何见解。

4

4 回答 4

3

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

于 2010-07-07T11:15:13.467 回答
1

我不是 100% 确定，但请试试这个：

<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')

以防万一。

于 2010-07-06T13:05:45.573 回答
0

return false;您可以在警报后尝试并删除event.preventDefault();. 也许你还需要return true;在你的 else 子句中。我相信我在某个地方有这样的工作。

于 2010-07-06T13:00:30.490 回答
0

好的，不确定这有多大帮助，但尝试删除提交输入并通过 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
    }
});

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

于 2010-07-06T19:56:59.383 回答