Может быть, кто-то может помочь мне с этим маленьким вопросом, который у меня есть. Я пытаюсь отправить эту форму без обновления страницы. Но он пропустит сообщение и перейдет непосредственно к вызову ajax. Я думаю, что я пропустил понимание preventDefault (). Я искал в Интернете, но не смог найти то, что мне нужно для этого. Ваша помощь была бы очень признательна или указана на другую форму представления
HTML
<!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
Просто поймите событие отправки и предоставьте это, затем сделайте 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); } }); }); });
<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>
Проблема заключается в методе POST, который ваша форма отправляет с использованием метода «post», а в AJAX вы используете «GET».
<!-- 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); ?>