Form Submission without page refresh [duplicate]
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); } }); });});
<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>
<!-- 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);?>