Отправить форму с помощью jquery с методом preventDefault()

Я пытаюсь отправить форму с помощью JQuery. Моя цель - отправить форму на сервер с помощью .ajax. После представления содержимое формы перейдет на страницу без перезагрузки страницы (я полагаю, что e.preventDefault() ниже достигнет этого). Код указан ниже.Отправить форму с помощью jquery с методом preventDefault()

Но когда я нажимаю кнопку «Отправить», форма, похоже, перезагружается. Что не так с моим кодом?

<!DOCTYPE html> 
<html> 
<head> 

<script src="http:////code.jquery.com/jquery-1.10.2.js"></script>  
<script type='text/javascript'> 

     $("#submitForm").submit(function(e){ 

      e.preventDefault(); 
     // some ajax code to submit the form 

      var container = document.getElementById("div2"); 
      var node = document.createTextNode("put form contents here");   
      container.appendChild(node);   

     }); 

</script> 

</head> 

<body> 
<h1>edit form here</h1> 

<div id = "div1"> 
<form id = "submitForm"> 
    <input type = "text"/> 
    <input type = "submit" value = "submit"/> 
</form> 
</div> 

<h1>show form contents here</h1> 

<div id = "div2"> 

</div> 

</body> 
</html>

источник

2016-12-09 Zhuo

[Изменено]: Этот код работает для меня. Просто положите его после раздела тела.

$("#submitForm").submit(function(e){ 
     e.preventDefault(); 
     var container = document.getElementById("div2"); 
     var node = document.createTextNode("put form contents here");   
     container.appendChild(node);  
    });

источник

2016-12-09 18:38:50

Или, поместите файл javascript под раздел тела ... –

Все еще не работает для меня. Вы попробовали? – Zhuo

Я обновил свой ответ. Этот сценарий должен быть после тела, тогда вы уверены, что ваши элементы визуализированы, поэтому к ним может быть прикреплено событие. –

Сценарий выполняется до того, как в документе появится форма.

Fix:

$(document).ready(function() { 
     $("#submitForm").submit(function(e){ 

      e.preventDefault(); 
     // some ajax code to submit the form 

      var container = document.getElementById("div2"); 
      var node = document.createTextNode("put form contents here");   
      container.appendChild(node);   

     }); 
});

Это будет выполнять код, когда DOMContentLoaded срабатывает событие

источник

2016-12-09 18:36:50

Я изменяю код, как вы предлагали. Это все еще не работает. Weird. – Zhuo

Это странно. Вы пытались перезагрузить страницу ctrl + r? –

добавьте несколько консольных вызовов в первые строки функции готовности. Проверьте, все ли выполнено. –

Отправить форму с помощью jquery с методом preventDefault()

ответ

Смежные вопросы