Using jQuery to call an API, and then refresh the contents of the div containing the form?
Question
I have a page with a form inside a div. Submitting the form refreshes the div's containing page. When I submit the form, jQuery does not interrupt the submit of the form and execute.
My Code:
<html>
<head>
<script src="/js/jquery.prod.2.2.0.js"></script>
<script>
$("#genericForm").on('submit', function(e) {
console.log("Here");
$.ajax({
type: "POST",
url: "/app.php";
data: $(this).serialize(),
success: function(data){
console.log(data);
}
});
e.preventDefault();
return false;
});
</script>
</head>
<body>
<form enctype="multipart/form-data" method=post action="/app.php" id="genericForm">
<input name=firstname type=text>
<input name=lastname type=text>
<input name=nickname type=text>
<input type=submit>
</form>
</body>
</html>
4 answers
solution1
1 ACCPTED 2016-02-05 05:38:50
Firstly, You have a syntax error here:
url: "/app.php";
You need a comma instead of semicolon:
url: "/app.php",
Also, you need to put your code inside a $(document).ready event handler to make it work. As you have put your code before you have put the form, it is executed immediately which doesn't find any form in the DOM. So fix it like this way:
$(document).ready(function () {
$("#genericForm").on('submit', function(e) {
console.log("Here");
$.ajax({
type: "POST",
url: "/app.php",
data: $(this).serialize(),
success: function(data){
console.log(data);
}
});
e.preventDefault();
return false;
});
});
solution2
0 2016-02-05 05:46:07
Syntax error
Uncaught SyntaxError: Unexpected token ;breaks thesubmit handler
It is not somehow related with e.preventDefault();
There is a syntax error here:
url: "/app.php";
______________^^
It must be , like this: url: "/app.php",
Try this:
$("#genericForm").on('submit', function(e) { e.preventDefault(); console.log("Here"); $.ajax({ type: "POST", url: "/app.php", data: $(this).serialize(), success: function(data) { console.log(data); } }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <form enctype="multipart/form-data" method=post action="/app.php" id="genericForm"> <input name=firstname type=text> <input name=lastname type=text> <input name=nickname type=text> <input type=submit> </form>
solution3
-1 2016-02-05 05:32:35
e.preventDefault blocks the default behaviour of the element. But it should be placed just before doing any other task rather than the default functionality.
$("#genericForm").on('submit', function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/app.php";
data: $(this).serialize(),
success: function(data){
console.log(data);
}
});
});
solution4
-1 2016-02-05 05:33:51
As Richard suggested in the comments, try moving the e.preventDefault() to the top of the function. It is likely that the submission and refresh is happening before the e.preventDefault() is registered.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.