Question

我有一个非常直接的jQuery AJAX代码片段，应该在没有页面刷新的情况下提交表单但由于某种原因它被忽略并且表单正常提交。

jQuery代码：

$(".createEvent").live('click', function() { 

                $(".eventResult").html($("<img/>").attr("src", "<?php echo __FULL_PATH; ?>images/loader.gif").attr("id", "loader"));
                $('.eventResult').show();  
                var form =  $(this).parents('form:first');
                var eventName = $("input[name='eventName']",form).val();
                var eventID = $("input[name='eventName']",form).id();

                  var dataString = 'eventName ='+ eventName;  
                  $.ajax({  
                  type: "POST",  
                  url: "{site.createPageURL}"+eventID+"/event/",  
                  data: dataString,  
                  cache: false,
                  success: function(html) {  
                    alert('done');
                    $('.eventResult').html(html);  
                    $('.eventForm').hide(); 
                    updateBookingList(eventID);             

                  } 
                });  
                return false; 

        });

和表格：

<form id="eventForm_1318915800" method="POST" action="path_here..." name="eventForm">
<label for="eventName">Please enter a name for the event</label>
<input id="1318915800" type="text" name="eventName">
<label for="submit">&nbsp;</label>
<input class="createEvent" type="submit" value="Create event" name="submit">
</form>
<div id="eventResult_1318915800" class="eventResult">&nbsp;</div>

Answer 1

这表明中间的JS错误 - 绕过了return false

Answer 2

在调用ajax之前，您需要添加event.preventDefault();。您的功能应修改如下：

$(".createEvent").live('click', function(event) { 
     event.preventDefault();
     .
     .
     .
     //ajaxCall
});

Answer 3

如果你想停止提交表单，你可能会做得更好：

$("#eventForm_1318915800").submit(function () { return false; });

这样做更好，因为它还会处理由Enter键触发的提交，例如。

jQuery ajax表单仍然提交WITH页面刷新

3 个答案: