javascript - JQuery not displaying HTML data from ajax response -
howdie do,
i have form takes username , email user. input sanitiazed via client , on server side.
the script sending post no issue , it's returning data should i've checked in log. however, reason, data isn't being displayed in browser.
code below , feel it's stupid item i'm overlooking, can't find anywhere
<!doctype html> <head> <title>jeremy's form submit test </title> <script type="text/javascript" src="js/jquery-1.11.2.js"></script> <script> $(document).ready(function() { $("#formsubmit").click(function() //set click action on formsubmit button { var submit = true; $('#mainform input[type="text"]').each(function() //loop through input fields ensure data present { if($.trim($('#user').val()) == '') //remove whitespaces , check if field empty { alert('input can not blank'); submit = false; } var regex = /^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/; //regex test email against if(!regex.test($.trim($('#email').val()))) //if supplied email without whitespaces doesn't match pattern, alert user { alert('please provide valid email'); submit = false; } }); if(submit == true) //if data present, prepare email , user values submitted .php page { data = {'user_name': $('#user').val(), 'email': $('#email').val()}; //add username , email array $.post("success.php", data, function(returneddata) //post data via ajx success.php , retrieve response { console.log(json.stringify(returneddata)); if(returneddata.type == 'error') //if error returned, display error message { var results = '<h1>'+returneddata.message+'</h1>'; } else if(returneddata.type == 'success') //if success returned, display message , remove submit button { var results = '<h1>'+returneddata.message+'</h1>'; $('#formsubmit').remove(); } $('div#dataholder').html(results); }, 'json'); } }); }); </script> </head> <body> <form id="mainform"> *username: <input type="text" id="user" name="formusername" required /> *email: <input type="email" id="email" name="formemail" required /> <input type="submit" id="formsubmit" value="submit"> </form> <div id="dataholder"></div> </body> </html> the php file below returns json_encoded response , i've confirmed via console log data being returned properly, it's not displaying in div i've set. log file showing correct response, it's not displaying:
{"type":"error","message":"username must @ least 3 characters!!!"}
<?php if(!empty($_server['http_x_requested_with']) && strtolower($_server['http_x_requested_with']) == 'xmlhttprequest') //check apache header ensure json request { $returneddata = json_encode(array("type" => "error", "message" => "naughty naughty. wasn't ajax request")); die($returneddata); } if(isset($_post)) //ensure post set { //santiaze post variables double sure no 1 funky business $saniuser = filter_var($_post['user_name'],filter_sanitize_string); $saniemail = filter_var($_post['email'],filter_sanitize_email); //check username @ least 3 characters , return error if it's not if(strlen($saniuser) != 3) { $returneddata = json_encode(array("type" => "error", "message" => "username must @ least 3 characters!!!")); die($returneddata); } //check email valid email if(!filter_var($saniemail,filter_validate_email)) { $returneddata = json_encode(array("type" => "error", "message" => "please supply valid email address!!!")); die($returneddata); } //all variables good. return message $returneddata = json_encode(array("type" => "success", "message" => "success!!!" .$saniuser. "has submitted form")); die($returneddata); } else { $returneddata = json_encode(array("type" => "error", "message" => "naughty naughty. no data submitted!!!")); die($returneddata); } ?>
wowowow issue staring me right in face.
i didn't initialize var results when data present. when called .html(results), result variable scope in if/else statement.
setting variable @ top of if statement , setting returneddata value works
updated code below:
if(submit == true) //if data present, prepare email , user values submitted .php page { var results; data = {'user_name': $('#user').val(), 'email': $('#email').val()}; //add username , email array $.post("success.php", data, function(returneddata) //post data via ajx success.php , retrieve response { console.log(json.stringify(returneddata)); if(returneddata.type == 'error') //if error returned, display error message { results = '<h1>'+returneddata.message+'</h1>'; //alert(returneddata.message); } else if(returneddata.type == 'success') //if success returned, display message , remove submit button { $('#formsubmit').hide(); results = '<h1>'+returneddata.message+'</h1>'; } $('#dataholder').html(results); }, 'json'); }
Comments
Post a Comment