javascript - Jquery Ajax Request Not Working -
i tried send form data via jquery ajax request
server , display response of php file located on server, in <div id=”response-box”></div>
. when submit form nothing happened. mistake? tried 3 days solve this. me. thank you!
i tested on localhost (wamp server)
this html code on index.html
<form id="myform"> <input type="text" id="fname"> <input type="text" id="lname"> <input type="submit" id="data-send-button" value="send data"> </form> <div id="responce-box"> </div>
this jquery ajax request on app.js
$(document).ready(function(){ $('form#myform').on('submit' , function(){ $.ajax({ url:"submit.php" , type: "post" , data: {fname: $('#fname').val(), lname: $('#lname').val()} , success: function(data){ $('#responce-box').html(data);} }); }); });
this php code on submit.php (localhost/wamp server)
<?php $fname = $_post['fname']; $lname = $_post['lname']; echo $name $lname; // code data sending mysql data base
no when click submit button, text values in text boxes disappeared
looking @ code, using $.ajax request when clicking submit button. means that, form reacted normal form refresh page. if want request ajax, should disable default behavior of form using preventdefault()
code. , did't see error in js code.
change js code :
$(document).ready(function(){ $('form#myform').on('submit' , function(e){ e.preventdefault();//<--add here ---^ $.ajax({ url:"submit.php" , type: "post" , data: {fname: $('#fname').val(), lname: $('#lname').val()} , success: function(data){ $('#responce-box').html(data);} }); }); });
some error in php code. try following code :
$fname = $_post['fname']; $lname = $_post['lname']; echo $fname.$lname;
Comments
Post a Comment