45

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
Improve this question
4
  • 1
    you don't need click() and submit() Commented May 7, 2014 at 2:25
  • seems <input type="submit" action="xxx"/> will redirect url, Commented May 7, 2014 at 2:26
  • try data: $('#myform').serialize(), Commented May 7, 2014 at 2:26
  • you may use a jquery plugin, visit here Commented Dec 13, 2015 at 20:35

4 Answers 4

Reset to default
48

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); } }); }); });
Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Adeneo, when i change the url to $(this).attr('action') it will post but will re-direct to the "success" post. How can i call a second php file which will show the records?
Not sure I get what you mean, the success callback is where you get the data ?
With the form which contains the html.The form <form id="myform" method="post" action="addrecord">. there is a successful echo stating that it was posted. There is a second php file listreord.php which is the page im looking to call with ajax
19 
<script type="text/javascript"> var frm = $('#myform'); frm.submit(function (ev) { $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { alert('ok'); } }); ev.preventDefault(); }); </script> <form id="myform" action="/your_url" method="post"> ... </form>
Improve this answer

Comments

4 
<!-- index.php --> <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> </head> <body> <form id="myForm"> <input type="text" name="fname" id="fname"/> <input type="submit" name="click" value="button" /> </form> <script> $(document).ready(function(){ $(function(){ $("#myForm").submit(function(event){ event.preventDefault(); $.ajax({ method: 'POST', url: 'submit.php', dataType: "json", contentType: "application/json", data : $('#myForm').serialize(), success: function(data){ alert(data); }, error: function(xhr, desc, err){ console.log(err); } }); }); }); }); </script> </body> </html> <!-- submit.php --> <?php $value ="call"; header('Content-Type: application/json'); echo json_encode($value); ?>
Improve this answer

Comments

1

The problem is the Method 'POST' your form is submitting by using the "post" method, and in the AJAX you are using "GET".

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.