Javascript на представлении вызывает обновление страницы

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» на моей клавиатуре, вся страница обновляется, когда я нажимаю «Add Donor», ничего не происходит.

Я уверен, что это должна быть простая проблема.Я думаю, что это одна из тех вещей, на которые мне просто нужны чьи-то глаза.

Answer 1

Попробуйте назначить событие onsubmit в javascript:

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

Проблема в том, что ваша функция называется addDonor, а ваш элемент - addDonor. Каждый элемент с идентификатором имеет объект, созданный в document для его идентификации. Попробуйте alert(addDonor) во встроенной отправке, чтобы увидеть, что он предупреждает HTML-элемент, а не функцию. Встроенные функции выполняются в цепочке областей действия внутри документа, поэтому addDonor указывает на document.addDonor до того, как он достигнет window.addDonor (ваша функция).

Answer 2

Ваша кнопка явно установлена ​​на type="button", что не заставит ее отправить форму. Измените его на <button type="submit"> или на <input type="submit">, если вы предпочитаете (мне самому нравятся параметры стиля <button>).

Answer 3

Вы должны изменить <button> на <input type="submit"> (как предложено @ fireshadow52), которое должно решить вашу проблему.вам следует попробовать онлайн-тестер jcascript для школ Wc3 Schools, чтобы опробовать простые javascript-скрипты перед тем, как поместить их на страницу, или любую другую, которую вы предпочитаете.Google имеет что-то в этом роде.кроме того, вы обычно можете попробовать консоль javascript в соответствующем браузере.