Unable to submit form without reloading page using php and ajax call
Question
I have many forms on a page. I want to submit each form without reloading page. I tried many methods but could not do. I have a form similar to this. I tried using ajax as well but could't do. Please help me. Now, I'm unable to insert in database also.
<form id="a" onsubmit="return func();">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
Jquery
function func(){
$.ajax({
url:'registration_detail.php?id=' +reg_id,// in this you got serialize form data via post request
type : 'POST',
data : $('#a').serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
5 answers
solution1
1 2019-07-12 06:13:16
Don't use " action " attribute not even with " # "
And if using AJAX, use " Return False "
$.ajax({
url : "example.php",
type : 'POST',
data : $(this).serialize();
success: function(result){
}
});
return false;
solution2
0 ACCPTED 2019-07-12 06:15:44
Make sure you are having a unique id for all the forms remove action="#" and onsubmit="" from the form as you are handling the submit event in jquery
function func(id){ alert($('#'+id).serialize()) $.ajax({ url:'registration_detail.php',// in this you got serialize form data via post request type : 'POST', data : $('#'+id).serialize(), success: function(response){ console.log(response); } }); return false; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="a" onsubmit="return func('a');"> <input type="text" name="fname"> <input type="text" name="lname"> <input type="text" name="email"> <input type="submit"> </form> <form id="b" onsubmit="return func('b');"> <input type="text" name="fname"> <input type="text" name="lname"> <input type="text" name="email"> <input type="submit"> </form> <form id="c" onsubmit="return func('c');"> <input type="text" name="fname"> <input type="text" name="lname"> <input type="text" name="email"> <input type="submit"> </form>
id="a" should be unique for all the forms
in your code new variable reg_id will give undefined variable error, that might be the cause to reload the page.
solution3
0 2019-07-12 06:43:40
Use below code :
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<form onsubmit="return func();">
<input type="text" name="fname">
<input type="text" name="lname">
<input type="text" name="email">
<input type="submit">
</form>
</body>
<script>
function func(){
$.ajax({
url : "example.php", // in this you got serialize form data via post request
type : 'POST',
data : $('form').serialize(),
success: function(response){
console.log(response);
}
});
return false;
}
</script>
</html>
solution4
0 2019-07-12 07:12:44
I'm pretty sure that you want that GET url to be POST as well. Obviously the code below won't work on this site here, but it shows concept of proper AJAX post.
//<![CDATA[ /* js/external.js */ $(function(){ var regId = 'someId'; $('#form').submit(function(e){ $.post('registration_detail.php', 'id='+encodeURIComponent(regId)+'&'+$(this).serialize(), function(jsonObjResp){ console.log(jsonObjResp); }, 'json'); e.preventDefault(); }); }); // load end //]]>
/* css/external.css */ *{ box-sizing:border-box; padding:0; margin:0; } html,body{ width:100%; height:100%; } body{ background:#ccc; } #content{ padding:7px; } label{ display:inline-block; width:80px; padding-right:4px; text-align:right; } input[type=text]{ width:calc(100% - 80px); } input{ padding:5px 7px; } input[type=submit]{ display:block; margin:0 auto; } #form>*{ margin-bottom:5px; }
<!DOCTYPE html> <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'> <head> <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' /> <title>Test Template</title> <link type='text/css' rel='stylesheet' href='css/external.css' /> <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script> <script type='text/javascript' src='js/external.js'></script> </head> <body> <div id='content'> <form id='form'> <label for='fname'>First Name</label><input type='text' id='fname' value='' /> <label for='lname'>Last Name</label><input type='text' id='lname' value='' /> <label for='email'>Email</label><input type='text' id='email' value='' /> <input type='submit' id='submit' value='submit' /> </form> </div> </body> </html>
solution5
0 2019-07-12 07:42:09
$(document).ready(function(){
$("form").on("submit", function(){
var form_id = $(this).attr("id");
$.ajax({
url : "example.php",
type : 'POST',
data : $("#"+form_id).serialize(),
success: function(result){
}
});
return false;
})
})
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.