使用jquery阻止表單提交的問題

我希望按下回車鍵執行基於jQuery的Ajax表單提交。顯然這涉及到停止正常的表單提交過程。我的表單由單個輸入字段組成。下面是代碼：使用jquery阻止表單提交的問題

<script type="text/javascript"> 
$(document).ready(function() { 
    // add vid ajax 
    $.ajaxSetup({ 
     cache:false; 
    }); 
    var ajax_load = '<div class="displayBox">Adding url...</div>'; 
    var loadUrl = 'ajax/add'; 

    $("#vidForm").submit(function(){ 
     e.preventDefault(); 
     alert("hello"); 
     /*$("body").html(ajax_load) 
     .load(loadUrl,{url:$("#addurl").value},function(responseText){ 
      $("#videos").append(responseText); 
     });*/ 
     return false; 
    }); 

}); 
</javascript> 
... 
<form id="vidForm" action="ajax/"> 
    <input id="addurl" name="addurl"/> 
</form>

我期望上述遞交給「AJAX /添加」但事實並非如此，而是提交一個完全成熟的http請求爲「AJAX」的默認行爲（在Chrome至少）。

我在做什麼錯？

來源

2010-10-04 rutherford

嗯。那麼，如果你的javascript中有任何東西被破壞，你可能甚至沒有得到像submit（）這樣的......如果你使用Firebug等調試器來運行這個控制檯，你會發現控制檯中有任何錯誤嗎？ – 2010-10-04 13:52:56

這是非常值得使用一些工具來幫助你的東西。查看使用屬於Chrome或Safari（Ctrl + Shift + I）的開發工具，或在Firefox上安裝Firebug，或使用免費的Visual Studio環境（用於IE）。他們中的任何人都會指出該代碼的幾個問題。留下很少出問題 - – 2010-10-04 13:53:26

沒有錯誤的螢火固定下面 – rutherford 2010-10-04 14:09:38

更新：現在你已經清除了以前的問題，我沒有看到任何問題。基本上，它的工作原理如下：http://jsbin.com/ugowa4（在Chrome，Firefox和Opera for Linux上測試; IE6和IE8）。您必須通過調試器才能找出問題出在哪裏。基本知識應該可以工作。

看起來你忘了聲明事件參數：

$("#vidForm").submit(function(e){ 
           ^--- Add this

沒有它，你正試圖從包含範圍內訪問變量e。如果沒有一個，或者它沒有一個名爲preventDefault的函數，那麼您將在此時發生異常，並且該函數的其餘部分將被忽略。

另請參見尼克關於結束標記（應該是</script>）和錯位;的說明。

來源

2010-10-04 13:50:45

我還有一小段javascript，顯然隱藏了我上面發佈的代碼的缺陷;交換了自己的位置，並立即行動起來，歡呼聲 – rutherford 2010-10-04 17:50:11

@rutherford：我們都做到了。很高興這有幫助。 – 2010-10-04 21:15:37

作爲一般規則，任何JavaScript錯誤可能會導致相同的行爲沒有JavaScript的所有，這就是你看到的...因爲腳本錯誤的默認提交行爲。我在下面列出的問題：

你關閉標籤熄滅：

</javascript>

應該是：

</script>

對象還沒有文字應該有一個特性;，所以更改：

$.ajaxSetup({ 
    cache:false; 
});

要：

$.ajaxSetup({ 
    cache:false 
});

最後，刪除此：

e.preventDefault();

你return false已經照顧這個（反正會錯誤的原因是缺少的參數，如在TJ的答案）。

來源

2010-10-04 13:50:03

我刪除了分號和e.preventDefault（）的調用。是我的問題中的拼寫錯誤。仍然沒有彈出警告框和默認行爲。 – rutherford 2010-10-04 14:04:57

你有沒有中的form的按鈕？例如像

<form id="vidForm" action="ajax/"> 
    <input id="addurl" name="addurl"/> 
    <button type="submit">Send</button> 
</form>

或

<form id="vidForm" action="ajax/"> 
    <input id="addurl" name="addurl"/> 
    <input type="submit" value="Send" /> 
</form>

點擊本例中的「發送」按鈕將提交表單。如果你的表單有更多的元素，請發佈整個代碼。

來源

2010-10-04 15:45:41 Oleg

使用jquery阻止表單提交的問題

回答

相關問題