jquery - Convert JSON form error response into a html string -
seeing can't find solution problem might going wrong.
i'm trying build form using ajax provide error response or successful response upon submitting form. able error response sent form, in json, looks bad. moment using simplified form 2 requirements: (1) name must john , (2) date must in future.
here html:
<!doctype html> <head> <title>ajax form</title> </head> <body> <form action="ajax/contact.php" method="post" class="ajax"> <div> <input type="text" name="name" placeholder="your name"> </div> <div> <input type="text" name="email" placeholder="your email"> </div> <div> <input type="text" placeholder="" class="textinput" name="departuredate" id="departing"> </div> <div> <textarea name="message" placeholder="your message"></textarea> </div> <input type="submit" value="send"> </form> <div id="ack"></div> <script type="text/javascript" src="js/jquery-1.11.0.js"></script> <script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/jquery-ui-1.10.4.custom.js"></script> <script> $(document).ready(function() { $("#departing").datepicker({ //mindate: 0, //maxdate: "+1y", dateformat: "yy-mm-dd", defaultdate: new date(), }); }); </script> </body> </html>
here php file:
<?php $errors = array(); $form_data = array(); $name = htmlspecialchars($_post['name']); $email = htmlspecialchars($_post['email']); $date = htmlspecialchars($_post['departuredate']); $message = htmlspecialchars($_post['message']); if (date('y-m-d') > $date) { $errors['date'] = "date in past"; goto end; } if ($name != 'john') { $errors['name'] = "name not john"; goto end; } end: if (empty($errors)) { $form_data['success'] = true; } else { $form_data['errors'] = $errors; } echo json_encode($form_data); ?>
here ajax file:
$('form.ajax').on('submit', function() { var = $(this), url = that.attr('action'), type = that.attr('method'); $.ajax({ url: url, type: type, data: that.serialize(), datatype: 'json', cache: false, success: function(result) { if(!result.success) { $('#ack').html(json.stringify(result.errors)); console.log(result.errors); } else { console.log('valid date , name entries'); } } }); return false; });
thanks!
Comments
Post a Comment