Menu
Maybe someone can assist me with this little issue I'm having. I'm trying to submit this form without a page refresh. But it will skip the post and go directly to the ajax call. I think I miss understood the preventDefault(). I have searched online but unable to locate what I need for this. Your help would greatly be appreciated or point to another form submission.
HTML below:
<!DOCTYPE html> <html> <head> <title>AJAX | Project</title> <link href="project.css" rel="stylesheet"/> <script src="jquery.js"></script> </head> <body> <div id="mainCon"> <h1>Contact Book</h1> <div id="form_input"> <form id="myform" method="post" action="addrecord.php"> <label for="fullname">Name:</label> <input type="text" name="fullname" id="fullname"/><span id="NameError"> </span> <br/> <label for="phonenumber">Phone Number:</label> <input type="text" id="phonenumber" name="phonenumber"><span id="PhoneError"></span> <br /> <input id="buttton" type="submit" onClick="addnumber()" value="Add Phone Number"/> <input type="button" id="show" value="the Results"/> </form> </div> <div id="form_output"> </div> </div> <script src="project.js"></script> <script type="text/javascript"> function addnumber(){ var Fullname = document.getElementById("fullname").value; var Phonenumber = document.getElementById("phonenumber").value; if(Fullname == ""){ document.getElementById("NameError").innerHTML = "Please Enter a valided Name"; } if(Phonenumber == ""){ document.getElementById("PhoneError").innerHTML = "Please Enter a valided Name"; } } </script> </body> </html> jquery
$("document").ready(function () { $("#buttton").click(function () { $('#myform').submit(function (e) { e.preventDefault(); $.ajax({ url: "listrecord.php", type: "GET", data: "data", success: function (data) { $("#form_output").html(data); }, error: function (jXHR, textStatus, errorThrown) { alert(errorThrown); } }); // AJAX Get Jquery statment }); }); // Click effect }); //Begin of Jquery Statement 
524
To prevent refresh data insertion, do a page redirection to same page or different page after record insert.
php', type: 'POST', data: { email: '[email protected]', message: 'hello world! ' }, success: function(msg) { alert('Email Sent'); } }); }); The form will submit in the background to the send_email. php page which will need to handle the request and send the email.
Just catch the submit event and prevent that, then do ajax
$(document).ready(function () { $('#myform').on('submit', function(e) { e.preventDefault(); $.ajax({ url : $(this).attr('action') || window.location.pathname, type: "GET", data: $(this).serialize(), success: function (data) { $("#form_output").html(data); }, error: function (jXHR, textStatus, errorThrown) { alert(errorThrown); } }); }); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
