Javascript onsubmit導致頁面刷新

Question

真的很簡單

<form id="addDonor" name="addDonor" onsubmit="addDonor(); return false;" action="" method="post" enctype="multipart/form-data">
<div class="sectionHeader">Add New Donor</div>
<div class="formRow"><label>Name</label> <input class="inputText fullTextBar" type="text" name="userName">
<div class="formRow"><button style="margin-left:350px; width: 80px" type="button" class="publish">Add Donor</button></div>
</form>

和addDonor功能

<script type="text/javascript">

function addDonor(){    
    alert("test");
    return false;
}
</script>

最終該函數將包含一些jquery ajax來提交信息。 但是，寶貝，步驟。 現在我甚至無法收到警報。 此外，當我在鍵盤上按“Enter”時，整個頁面刷新，當我按“添加捐贈者”時沒有任何反應。

我敢肯定它必須是一個簡單的問題。 我認為這是我需要別人指出的那些事情之一。

Answer 1

嘗試在javascript中分配onsubmit事件：

document.getElementById("addDonor").onsubmit = function () {
    alert("test");
    return false;
}

問題是你的函數名為addDonor，你的元素是addDonor。 每個具有id的元素都有一個在document下創建的對象來標識它。 alert(addDonor)聯onsubmit中嘗試alert(addDonor) ，看它是否警告HTML元素，而不是函數。 內聯函數在文檔中的作用域鏈中執行，因此addDonor在到達window.addDonor（您的函數）之前指向document.addDonor。

Answer 2

你應該將你的<button>更改為<input type="submit"> （如@ fireshadow52建議的那樣）來解決你的問題。 您應該嘗試使用Wc3 Schools在線javascript測試程序 ，在將其放入頁面或您喜歡的任何其他頁面之前嘗試簡單的javascripts。 谷歌有這樣的東西。 此外，您通常可以在各自的瀏覽器上試用javascript控制台。

Answer 3

您的按鈕顯式設置為type="button" ，這不會使其提交表單。 如果您願意，可<button type="submit">其更改為<button type="submit">或<input type="submit"> （我喜歡<button>我自己的樣式選項）。