javascript - How to show ajax response in a para or div in text form? -
i have created 1 page ajax function insert data database on click of submit data getting insert in database want show message data inserted or not created div , showing result in cant see text.
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>post</title> </head> <body> <form class="postform" id="postform" method="post" action="addpost.php"> <fieldset> <legend>please add details below </legend> <p> <label for="title">title (required, @ least 2 characters)</label> <input id="title" name="title" minlength="2" type="text" required> </p> <p> <label for="url">url (required)</label> <input id="url" type="url" name="url" required> </p> <p> <label for="desc">description (required, @ least 2 characters)</label> <input id="desc" name="desc" minlength="2" type="text" required> </p> <p> <label for="keywords">keywords (eg:#facebook)(required, @ least 2 characters)</label> <input id="keywords" name="keywords" minlength="2" type="text" required> </p> <p> <label for="urltype">select url type :(required)</label> <select name="urltype" id="urltype"> <option value="">select url type...</option> <option value="0">server image</option> <option value="1">server video</option> <option value="2">youtube video</option> <option value="3">vimeo video</option> <option value="4">facebook image</option> <option value="5">facebook video</option> <option value="6">instagram image</option> <option value="7">instagram video</option> <option value="-1">other</option> </select> </p> <p> <label for="posttype"> select post type :(required)</label> <select name="posttype" id="posttype"> <option value="">select post type...</option> <option value="0">normal</option> <option value="1">featured</option> <option value="2">sponsored</option> </select> </p> <p> <label for="category"> select category :(required)</label> <select name="category" id="category"> <option value="0">select category...</option> </select> </p> <p> <input type="hidden" name="action_type" id="action_type_id"/> <input type="hidden" name="id" id="p_id"/> <!-- <a href="javascript:void(0);" class="btn btn-warning" onclick="$('#postform').slideup();">cancel</a> <a href="javascript:void(0);" class="btn btn-success" onclick="useraction('add')">add user</a>--> <input type="button" name="submit" id="submit" value="submit" onclick="useraction('add')"> </p> </fieldset> <div class="result"></div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ getcategories(); }); function getcategories() { $.ajax({ type: "post", url: 'getcategories.php', datatype: 'text', async: false, cache: false, success: function (result) { $('#category').html(result); } }); } function useraction(type,id){ var statusarr = {add:"added",edit:"updated",delete:"deleted"}; if (type == 'add') { $('#action_type_id').val(type); $('#p_id').val(id); } $.ajax({ type: 'post', url: 'addpost.php', data: $('#postform').serialize(), success:function(report){ $(".result").html(data); location.reload(); } }); } </script> </form> </body> </html> addpost.php
<?php include 'database.php'; ini_set('display_errors', 1); error_reporting(1); ini_set('error_reporting', e_all); if(isset($_post['action_type']) && !empty($_post['action_type'])) { if($_post['action_type'] == 'add') { $database = new database(constants::dbhost, constants::dbuser, constants::dbpass, constants::dbname); $dbconnection = $database->getdb(); $dbconnection->setattribute(pdo::attr_errmode, pdo::errmode_exception); $stmt = $dbconnection->prepare("insert keywords(keyword) values(?)"); $stmt->execute(array($_post['keywords'])); //insert data posts table $stmt = $dbconnection->prepare("insert posts(category_id,title,url,url_type,description,keywords,post_type) values(?,?,?,?,?,?,?)"); $stmt->execute(array($_post['category'], $_post['title'], $_post['url'], $_post['urltype'], $_post['desc'], $_post['keywords'],$_post['posttype'])); $count = $stmt->rowcount(); if ($count > 0) { //if inserted // echo '<p id="report">post submitted</p>'; echo "post submitted."; } else { //if not inserted // echo '<p id="report">post submitted</p>'; echo "could not submit post."; } } } ?> please help.. thank you.
here updated segment of code. form reset code has been added.
$.ajax({ type: 'post', url: 'addpost.php', data: $('#postform').serialize(), success:function(report){ // replace data report $(".result").html(report); //reset form $(':input','#form') .not(':button, :submit, :reset, :hidden') .val('') .removeattr('checked') .removeattr('selected'); } });
Comments
Post a Comment