Ajax call is not responding give me a empty result (PHP) code is properly working only issue i have is with ajax. I'll already check all the CDN is working fine
My html code :
<form method="post">
<input type="hidden" name="product_id" id="product_id" value="<?= $id ?>" >
<input type="hidden" name="user_id" id="user_id" value="<?= $_SESSION['id'] ?>">
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>
<input type="hidden" name="rating" id="rating">
<input type="submit" name="c_submit" id="c_submit">
</form>
<ol id="comment"> </ol>
My php code :
<?php
include "../../functions/dbs.php";
if (isset($_POST["c_submit"])){
$product_id = $_POST['product_id']; $user_id = $_POST['user_id'];
$comment = $_POST['comment']; $rating = $_POST['rating'];
$query = "INSERT INTO user_profile (product_id,user_id,comment,ratting) values ('$product_id','$user_id','$comment','$rating')";
print_r($query);exit();
$sql=mysqli_query($con->connect(),$query);
?>
<li class="box">
<?= '<span class="email">' . $product_id. '</span>' ?>
<?= '<span class="comment">' . $comment . '</span>' ?>
</li>
<?php } ?>
My ajax code : If user can click on submit all the result that we have in input field will be shone in ol#comment.
$(function () {
$("#c_submit").click(function() {
var product_id = $("#product_id").val();
var user_id = $("#user_id").val();
var comment = $("#comment").val();
var rating = $("#rating").val();
var dataString = 'product_id =' + product_id + '&user_id=' + user_id + '&comment=' + comment + '&rating=' + rating;
if (product_id == '' || user_id == '' || comment == '' || rating ==''){
alert('Please Give Valid Details');
}else {
$.ajax({
type: "POST",
url : "include/comm.php",
data : dataString,
cache: false,
success : function(html){
console.log(html);
$("ol#comment").append(html);
$("ol#comment li:last").fadeIn("slow");
}
});
}
});
});
Ignore :
"The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs. Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz "
I tried your code snippet and found several problems with it:
My code suggestion:
$(function () {
$("form").on('submit', function(e) {
e.preventDefault();
...
var dataString = 'product_id=' + product_id + '&user_id=' + user_id + '&comment=' + comment + '&rating=' + rating;
...
});
});
For the PHP counterpart, assuming product_id data is always submitted, I suggest:
if (isset($_POST["product_id"])){
....
}
You must first prevent the default behavior of the click or submit event. You can do this by adding this line at the beginning of your event handler. Also, I never saw the way you called an anonym function using the $
sign of jQuery object. I will assume that this function is the root or the wrapper function for your whole application and I will show you how I am doing it and how people do it.
(function($) {
$(document).ready(function() {
$(document).on('submit', '#info_form', function(event) {
event.preventDefault();
// Add this line.
var product_id = $("#product_id").val();
var user_id = $("#user_id").val();
var comment = $("#comment_input").val();
var rating = $("#rating").val();
var data = {
product_id: product_id,
user_id: user_id,
comment: comment,
rating: rating
};
if (product_id == '' || user_id == '' || comment == '' || rating == '') {
alert('Please Give Valid Details');
}
else {
$.ajax({
type: "POST",
url: "include/common.php",
data: data,
cache: false,
success: function(html) {
console.log(html);
$("ol#comment").append(html);
$("ol#comment li:last").fadeIn("slow");
}
});
}
});
});
})(window.jQuery);
As per the way you are listening to the submit
event. I think the way you are doing it now, will cause some problems if you start changing the HTML content or manipulating the DOM related to the form itself. I prefer to use $(document).on('submit', "#my-form-id", function(e){});
this way the listener will be bound to the document not to the element itself. I don't know if this is a bad practice or not but it solved lots of my issues in the past. Also, I tend to wrap my event listeners code inside the $(document).ready(function(){});
function to avoid executing the code before the DOM tree finish loading or the needed libraries that I am going to be using in my app.
For the data also, because you are using a post request to send your data. You have to preserve the structure of your data in the way you want to access them in the backend. In your front-end code, you are concatenating your parameters using string concatenation which is wrong. The AJAX
function in jQuery take the data and serialize them. So in your case you have to do it like follow:
var product_id = $("#product_id").val();
var user_id = $("#user_id").val();
var comment = $("#comment").val();
var rating = $("#rating").val();
var data = {
product_id: product_id,
user_id: user_id,
comment: comment,
rating: rating
};
And then pass it to the data parameter or field in the ajax
function object. You can find an example based on your solution here , and the code here .
Change your ol
id to comment_answer
or anything else you want because you already have comment
id on your input
.
<ol id='comment_answer'></ol>
you need to prevent the default behavior of form submit, right now the page should be getting refreshed when you call on submit button which should not be done so, for that just write return false;
after the ajax call, and change ol#comment
to ol#comment_answer
in ajax success function
$(function () {
$("#c_submit").click(function() {
var product_id = $("#product_id").val();
var user_id = $("#user_id").val();
var comment = $("#comment").val();
var rating = $("#rating").val();
var dataString = 'product_id =' + product_id + '&user_id=' + user_id + '&comment=' + comment + '&rating=' + rating;
if (product_id == '' || user_id == '' || comment == '' || rating ==''){
alert('Please Give Valid Details');
}else {
$.ajax({
type: "POST",
url : "include/comm.php",
data : dataString,
cache: false,
success : function(html){
console.log(html);
$("ol#comment_answer").append(html);
$("ol#comment_answer li:last").fadeIn("slow");
}
});
}
return false;
});
});
Changes
1) IDs can't be same through out the page. a) <textarea name="comment" id="comment"
& <ol id="comment"></ol>
. Which is changed it to <ol id="show_comment"></ol>
.
2) Since, no action
is provided in the form and no e.preventDefault();
, it will take current URL. For preventing it, add e.preventDefault();
in the script.
3) In include/comm.php
file, first condition you are checking if (isset($_POST["c_submit"])){
. No c_submit
attribute is passed in ajax script. So, it is not enetering in the condition. Pass c_submit
in ajax script.
4) In <?= '<span class="email">' . $email . '</span>' ?>
<?= '<span class="email">' . $email . '</span>' ?>
<?= '<span class="email">' . $email . '</span>' ?>
this line.
Undefined Index
will come as no where $email
is defined. So, check it. I've replaced it with $user_id
Form
<form method="post">
<input type="hidden" name="product_id" id="product_id" value="<?= $id ?>" >
<input type="hidden" name="user_id" id="user_id" value="<?= $_SESSION['id'] ?>">
<textarea name="comment" id="comment" cols="30" rows="10"></textarea>
<input type="hidden" name="rating" id="rating">
<input type="submit" name="c_submit" id="c_submit">
</form>
<ol id="show_comment"></ol>
include/comm.php
<?php
include "../../functions/dbs.php";
if (isset($_POST["c_submit"])){
$product_id = $_POST['product_id'];
$user_id = $_POST['user_id'];
$comment = $_POST['comment'];
$rating = $_POST['rating'];
$query = "INSERT INTO user_profile (product_id,user_id,comment,ratting) values ('$product_id','$user_id','$comment','$rating')";
$sql= mysqli_query($con->connect(),$query);?>
<li class="box">
<?= '<span class="email">' . $user_id . '</span>' ?>
<?= '<span class="comment">' . $comment . '</span>' ?>
</li>
<?php }?>
Script
<script>
$(function () {
$("#c_submit").click(function(e) {
e.preventDefault();
var product_id = $("#product_id").val();
var user_id = $("#user_id").val();
var comment = $("#comment").val();
var rating = $("#rating").val();
if (product_id === '' || user_id === '' || comment === '' || rating === ''){
alert('Please Give Valid Details');
} else {
$.ajax({
type: "POST",
url : "include/comm.php",
data : {
product_id : product_id, user_id : user_id, comment: comment, rating:rating,
c_submit: true
},
cache: false,
success : function(html){
console.log(html);
$("ol#show_comment").append(html);
$("ol#show_comment li:last").fadeIn("slow");
}
});
}
});
});
</script>
Quick Links
Until you don't echo the output in PHP, response will be blank.
Take the below code in a variable and echo the output:
$output = '<li class="box">
'<span class="email">' . $email . '</span>'
'<span class="comment">' . $comment . '</span>'
</li>';
and echo the output : echo $output
Also in JS ajax content type should be html/text
as you are sending html content in response.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.