Ajax : function is not working - javascript

I don't know why my code does not work onclick, but there is no pop up. The AJAX function var phone and id got data, but the AJAX did not. Is there anything wrong with the script? Does the AJAX need a jQuery library?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/core.js"></script>
<script type="text/javascript">
function clickButton() {
var phone = document.getElementById('phone').value;
var id = document.getElementById('id').value;
$.ajax({
type: "post",
url: "userDetaiAjax.php",
data: {
'phone': phone,
'id': id
},
cache: false,
success: function(html) {
alert('Data Send');
$('#msg').html(html);
}
});
return false;
}
</script>
<div class="col">
<div class="form-group">
<h6>
<label>Name :</label>
<?php echo $name ?>
</h6>
<h6>
<label>Email :</label>
<?php echo $email ?>
</h6>
<input type="" name="phone" id="phone">
<input type="" name="id" id="id" value="<?php echo $_SESSION[" staff_id "];?>" hidden>
<h6>
<label>Phone :</label>
<?php echo $phone ?>
</h6>
<input type="submit" name="aa" value="submit2" onclick="return clickButton();">
</form>
<p id="msg"></p>
</div>
</div>
</div>
</div>
for the url
<?php
$phone = $_POST['phone'];
$id = $_POST['id'];
echo 'success';
echo $phone;
echo $id;
$a='"USR_ID"';
$b='"phone"';
include 'conn.php';
if (!$conn) {
$e = oci_error();
trigger_error(htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR);
}
$query = "update usr_web SET phone=:c1 WHERE usr_id=:c2";
$stid = oci_parse($conn, $query);
oci_bind_by_name($stid, ":c1", $phone);
oci_bind_by_name($stid, ":c2", $id);
$result = oci_execute($stid);
oci_free_statement($stid);
oci_commit($conn);
oci_close($conn);
echo $result;
?>

When you open the console of your browser you should see an error message like "ReferenceError: $ is not defined". So it seems that $ is not part of core.js which you have loaded. Just load the full version (https://code.jquery.com/jquery-3.3.1.min.js) and it should work.

U have error in your console:
$ is not defined
Which mean u did not include jquery, so u should add this code after ajax include:
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
U can chack your console errors with F12 key in browser and tab Console.

Related

Email input is not taking email address as valid input in newsletter subscribe box

I have newsletter subscribe input in opencart website and when i input email and press subscribe it says "Email is not valid!: even thou it is.
So i cant use it since it doesnt take emails.
I used this theme and didnt change anything in the subscribe module,
you can scroll down to the footer and check how it behaves here: http://demopavothemes.com/pav_woosa/demo2/
Cant figure out what is the problem.
Heres the code of the module:
<div class="<?php echo $prefix; ?> newsletter-v1" id="newsletter_<?php echo $position.$module;?>">
<form id="formNewLestter" method="post" action="<?php echo $action; ?>" class="formNewLestter">
<div class="panel panel-v1">
<div class="panel-heading">
<h4 class="panel-title"><?php echo $objlang->get("entry_newsletter");?></h4>
</div>
<div class="panel-body">
<div class="input-group">
<input type="text" placeholder="Email Here ..." class="form-control email" <?php if(!isset($customer_email)): ?> <?php endif; ?> size="18" name="email">
<div class="input-group-btn pull-left">
<button type="submit" name="submitNewsletter" class="btn btn-primary icon-mail radius-6x"><?php echo $objlang->get("button_subscribe");?></button>
</div>
</div>
<input type="hidden" value="1" name="action">
<div class="valid space-top-10"></div>
</div>
<?php if (!empty($social)): ?>
<?php echo html_entity_decode( $social );?>
<?php endif ?>
</div>
</form>
</div>
<script type="text/javascript"><!--
$( document ).ready(function() {
var id = 'newsletter_<?php echo $position.$module;?>';
$('#'+id+' .box-heading').bind('click', function(){
$('#'+id).toggleClass('active');
});
$('#formNewLestter').on('submit', function() {
var email = $('.inputNew').val();
$(".success_inline, .warning_inline, .error").remove();
if(!isValidEmailAddress(email)) {
$('.valid').html("<div class=\"error alert alert-danger\"><?php echo $objlang->get('valid_email'); ?><button type=\"button\" class=\"close\" data-dismiss=\"alert\">×</button></div></div>");
$('.inputNew').focus();
return false;
}
var url = "<?php echo $action; ?>";
$.ajax({
type: "post",
url: url,
data: $("#formNewLestter").serialize(),
dataType: 'json',
success: function(json)
{
$(".success_inline, .warning_inline, .error").remove();
if (json['error']) {
$('.valid').html("<div class=\"warning_inline alert alert-danger\">"+json['error']+"<button type=\"button\" class=\"close\" data-dismiss=\"alert\">×</button></div>");
}
if (json['success']) {
$('.valid').html("<div class=\"success_inline alert alert-success\">"+json['success']+"<button type=\"button\" class=\"close\" data-dismiss=\"alert\">×</button></div>");
}
}
});
return false;
});
});
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(#((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(#\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
return pattern.test(emailAddress);
}
--></script>
This line:
$('.inputNew')
is looking for a class named inputNew. Your HTML doesn't have an element with that name. Your element it looks like has a class of email.
<input type="text" placeholder="Email Here ..." class="form-control email" <?php if(!isset($customer_email)): ?> <?php endif; ?> size="18" name="email">
^^^^^
You also could use the form-control but that doesn't sound unique. An id would be better or you could use the name attribute like this:
$('input[name="email"]')
so change the JS line to:
var email = $('.email').val();
or
var email = $('input[name="email"]').val();
You can read more about these here, https://api.jquery.com/category/selectors/.

I have a comment form in fullpost.php and the inserting form is in sql.php, how do I get post_id for my comments table?

I have my comment form in fullpost page and I am proccessing a form using ajax, but I don't know how to insert post_id in my comments table to specify the post comment. Kindly help
as I am trying to get the get_id in sql.php but I'm gettng an error which shows undefined post_id in line 13 sql.php
Please find my code below:
fullpost.php
?php
ob_start();
require_once('includes/header.php'); ?>
<?php
$db = new Database();
if(isset($_GET['id'])){
$id = $_GET['id'];
$query = "SELECT * FROM posts WHERE post_id ='$id'";
$post = $db->select($query);
}
$c_query = "SELECT * FROM comments WHERE post_id='$id' ORDER BY comment_id DESC";
$c_run = $db->select($c_query);
?>
<div class ="col-8">
<div class="content-area">
<?php if($post):?>
<?php while($row = $post->fetch_array()):?>
<h2 class="title-full-post"><?php echo $row['title'];?></h2>
<p class="content-area-auth"><?php echo formatDate($row['created_date']);?> By
<a class="content-area-author" href=""><?php echo $row['author']; ?></a></p>
<img class="post-img" src="assets/images/<?php echo $row['image']; ?>">
<p class="content-area-body"><?php echo $row['body'];?><br /><br /><br />
</p>
<?php endwhile; ?>
<?php endif; ?>
<div class="comment">
<h2>Recent Comments</h2>
<?php
if($c_run):
while($r = $c_run->fetch_assoc()):
?>
<p><?php echo $r['name']; echo $r['date']; ?></p>
<p><?php echo $r['comment']; ?></p>
<!--<input type='button' name='reply' id='reply' value='Reply' onclick='replyComment("<?php echo $message_id?>")' />-->
<hr>
<?php
endwhile;
endif;
?>
</div>
<div class="comments-area" id="editbutton">
<h2>Comment Below</h2>
<form action="fullpost" id ="commentForm" method="post" class="form-commment">
<input type="hidden" name="commentId" value="<?php echo $id ?>">
<label for="">Name</label><span style="color: red;">*</span>
<input type="text" name="name" id="commentName" class="form-control-comment" placeholder="Type your Name..">
<label for="">Email</label>
<input type="Email" name="email" id="commentEmail" class="form-control-comment" placeholder="Type your Email..">
<label for="">Website</label>
<input type="text" name="website" id="commentWebsite" class="form-control-comment" placeholder="Type your Website..">
<label for="">Comment</label>
<textarea name="comment" id="commentMessage" class="form-control-comment form-text-area">Comment ...</textarea>
<input type="submit" id="submitComment" name="submitComment" class="btn-comment" value="Post Comment">
<span id="errorMessage"></span>
<span id="successMessage"></span>
</form>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#commentForm").submit(function(event){
event.preventDefault();
var commentName = $("#commentName").val();
var commentEmail = $("#commentEmail").val();
var commentWebsite = $("#commentWebsite").val();
var commentMessage = $("#commentMessage").val();
if(commentName == '' || commentEmail == '' || commentMessage == '' ){
$("#errorMessage").html("Fill all the required fields");
} else{
$("#errorMessage").html('');
$.ajax({
url: "sql.php",
type: "POST",
async: false,
data:{
"done": 1,
"username": commentName,
"useremail": commentEmail,
"userwebsite": commentWebsite,
"usercomment": commentMessage,
"commentId": commentId
},
success: function(data){
//$("#name").val('');
//$("#message").val('');
$("form").trigger("reset");
$("#successMessage").fadeIn().html(data);
}
});
}
});
});
</script>
</div><!--End of Content Area-->
</div><!--end of col-8-->
<?php require_once('includes/footer.php'); ?>
<!--- this is sql.php-->
<?php
require_once('config/config.php');
require_once('libraries/database.php');
require_once('helpers/format_helpers.php');
//require_once('includes/header.php');
//$conn= new mysqli('localhost','root','','myblog');
$db = new Database();
//$id = $_GET['id'];
/*Insert comments*/
if(isset($_POST['done'])){
$name = mysqli_real_escape_string($db->link, $_POST['username']);
$email = mysqli_real_escape_string($db->link, $_POST['useremail']);
$website = mysqli_real_escape_string($db->link, $_POST['userwebsite']);
$comment = mysqli_real_escape_string($db->link, $_POST['usercomment']);
$postId = mysqli_real_escape_string($db->link, $_POST
['commentId']);
if(!empty($name && $email && $comment)){
// $conn= new mysqli('localhost','root','','myblog');
$i_query ="INSERT INTO comments(name, email, website, comment, post_id)VALUES('$name','$email','$website','$comment','$postId')";
$insert_query =$db->insert($i_query);
if($insert_query){
echo "Comment has been submitted and waiting for approval..";
} else{
$error_message ="Please try again..comment not submitted";
}
} else{
$error_message ="All(*)Fields Are required";
}
}
Any assistance would be greatly appreciated
You can use mysql_insert_id() to return the last ID generated my MySQL.
If you show your Database class I can give you an example.

Ajax jQuery retrieving data from previous query

I'm currently using Ajax & jQuery for my chat, some might say its stupidly complex but so long as I can get it working.
It works on the first friend result, how ever not on the other. What its doing is the chat-load.php (Ajax part) is creating a new query to select the friends details, which are then being put into a result query on the chat.php page.
Therefore it only displays one "Working" chat window for the 1st friend. I tried grabbing the previous friend_id from the chat.php query and using it in the chat-load.php query but it didn't seem to notice any data.
Here is an example of what I'm getting, 1st result full width meaning its working, other results not full width as not working with ajax.
This is my current setup:
chat.php
<?php $users = $db->query("SELECT DISTINCT users.id, users.firstname, users.lastname,
message.date, message.time, message.message, message.recipient, message.sender
FROM users
JOIN friends
ON users.id IN (friends.sender, friends.recipient)
JOIN message
ON (users.id = message.sender)
AND 75 IN (message.sender,message.recipient)
ORDER BY message.date DESC, message.time DESC"); ?>
<!-- Friends query -->
<?php $users = $db->query("SELECT IF(friends.sender = ".$_SESSION["user"]["id"].", friends.recipient, friends.sender) AS user_id
FROM friends
WHERE friends.sender = ".$_SESSION["user"]["id"]."
OR friends.recipient = ".$_SESSION["user"]["id"].""); ?>
<?php while($friend = $users->fetch_object()): ?>
<?php $friends = $db->query("SELECT firstname, lastname, id FROM users WHERE id = $friend->user_id "); ?>
<?php while($FriendName = $friends->fetch_object()): ?>
<div class="chat-box">
<div class="header">
<?= $FriendName->firstname ?> <?= $FriendName->lastname ?> <?= $FriendName->id ?>
</div>
<script>
$(window).load(function() {
$("#chat-box, #messages").animate({ scrollTop: $(document).height() }, 1000);
});
</script>
<script>
function loadlink(){
$('#messages').load('chat-load.php',function () {
$(this).unwrap();
});
}
loadlink(); // This will run on page load
setInterval(function(){
loadlink() // this will run after every 5 seconds
}, 100);
</script>
<div id="messages" class="messages">
</div>
<div class="input-box">
<form id="SendForm" class="SendMsg" role="form" method="post">
<input type="text" id="s_firstname" name="s_firstname" class="MsgInputHidden" value="<?= $_SESSION["user"]["firstname"] ?>" />
<input type="text" id="s_lastname" name="s_lastname" class="MsgInputHidden" value="<?= $_SESSION["user"]["lastname"] ?>" />
<input type="text" id="sender" name="sender" class="MsgInputHidden" value="<?= $_SESSION["user"]["id"] ?>" />
<input type="text" id="r_firstname" name="r_firstname" class="MsgInputHidden"value="<?= $FriendName->firstname ?>" />
<input type="text" id="r_lastname" name="r_lastname" class="MsgInputHidden"value="<?= $FriendName->lastname ?>" />
<input type="text" id="recipient" name="recipient" class="MsgInputHidden" value="<?= $FriendName->id ?>" />
<input type="text" id="ip" name="ip" class="MsgInputHidden" value="<?= $_SERVER["REMOTE_ADDR"] ?>" />
<input type="text" id="date" name="date" class="MsgInputHidden" value="<?= date('Y-m-d') ."\n" ?>" />
<?php
$now = time();
$utc_time = $now - intval(date('Z', $now));
?>
<input type="text" id="time" name="time" class="MsgInputHidden" value="<?= '' . date('H:i:s', $now) . '' ?>" />
<input id="message" type="text" name="message" style="width: 100%; overflow: scroll;">
<input id="submit" class="submit" type="submit" name="submit" value="Submit" />
</form>
</div>
</div>
<script>
$("#submit").click(function(e) {
e.preventDefault();
var message = $("#message").val();
var s_firstname = $("#s_firstname").val();
var s_lastname = $("#s_lastname").val();
var sender = $("#sender").val();
var r_firstname = $("#r_firstname").val();
var r_lastname = $("#r_lastname").val();
var recipient = $("#recipient").val();
var ip = $("#ip").val();
var date = $("#date").val();
var time = $("#time").val();
var dataString = '&message=' + message + '&s_firstname=' + s_firstname + '&s_lastname=' + s_lastname + '&sender=' + sender + '&r_firstname=' + r_firstname + '&r_lastname=' + r_lastname + '&recipient=' + recipient + '&ip=' + ip + '&date=' + date + '&time=' + time;
$.ajax({
type:'POST',
data:dataString,
url:'sendmessagefriend.php',
});
});
</script>
<script>
$("#submit").click(function(e) {
$("#SendForm").get(0).reset();
});
</script>
<script>
$("#submit").click(function(e) {
$("#chat-box, #messages").animate({ scrollTop: $(document).height() }, 1000);
});
</script>
<?php endwhile; ?>
<?php endwhile; ?>
chat-load.php
<!DOCTYPE html>
<html>
<head>
<?php
session_start();
if(!isset($_SESSION["user"]) or !is_array($_SESSION["user"]) or empty($_SESSION["user"])
)
// redirect to index page if not superuser
header('Location: index.php');
?>
</head>
<body>
<?php
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','****','****','****');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT message, sender, recipient, date, time, IF(recipient = ".$_SESSION["user"]["id"].", 'received', 'sent') AS direction FROM message WHERE recipient IN (".$_SESSION["user"]["id"].", ".$friend->user_id.") AND sender IN (".$_SESSION["user"]["id"].", ".$friend->user_id.")";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_array($result)) {
echo "<ul>";
echo "<li>";
echo "<span class='". $row['direction'] ."'>". $row['message'] ."</span>";
echo "<div class='clear'></div>";
echo "</li>";
echo "</ul>";
}
mysqli_close($con); ?>
</body>
</html>
Try using $.ajax() instead of $.load(). Set cache: false.
Example:
function loadlink(){
$.ajax({
url:'chat-load.php',
cache: false,
success: function(result){
$('#messages').html(result);
}
});
}

Ajax loaded comment not working

My php file loops out each blog post in my database and also creates the comments section. The blogs post great. When I comment on the most recent blog post, the comment does not appear but it seems to add a line as the space expands, just does not include the comment. When I comment on the first post, it works great and exactly as expected. I can't figure out how to correct it. I thought it was a matter of add a .closest to the comment-block selector but that didn't seem to do the trick.
I appreciate any help or feedback!
PHP/HTML
<?php // retrive post
include('php/config.php');
include ('php/function.php');
dbConnect();
$blog_query = mysql_query(
'SELECT *
FROM Blog
ORDER BY DATE DESC');
$date = date_create($row['DATE']);
while($row = mysql_fetch_array($blog_query)): ?>
<div class="post">
<h2><?php echo $row['TITLE']?></h2>
<h3><?php echo date_format($date, 'l, F j, Y')?></h3>
<p><?php echo $row['CONTENT']?></p>
</div>
<h2>Comments.....</h2>
<div class="comment-block">
<?php // retrieve comments with post id
$comment_query = mysql_query(
"SELECT *
FROM Comments
WHERE BID = {$row['ID']}
ORDER BY CID DESC
LIMIT 15") or die(mysql_error());
while($comment = mysql_fetch_array($comment_query)):?>
<div class="comment-item">
<div class="comment-post">
<h3><?php echo $comment['UNAME'] ?> <span>said....</span></h3>
<p><?php echo $comment['COMMENT']?></p>
</div>
</div>
<?php endwhile?>
</div>
<h2>Submit new comment</h2>
<!--comment form -->
<form id="form" method="post">
<div>
<input type="hidden" name="BID" value="<?php echo $row['ID']?>">
<label> <span>Display Name: *</span>
<input id="uname" type="text" tabindex="1" name="commentName" required />
</label>
</div>
<div>
<label> <span>Comment: *</span>
<textarea id="textarea" placeholder="Enter your comment here..." tabindex="2" name="commentMessage" required></textarea>
</label>
</div>
<div>
<input type="submit" id="submit" value="Submit Comment">
</div>
</form>
<?php endwhile?>
</div>
Jquery/Ajax:
var form = $('form');
var submit = $('#submit');
form.on('submit', function(e) {
// prevent default action
e.preventDefault();
// send ajax request
$.ajax({
url: 'php/ajaxcomment.php',
type: 'POST',
cache: false,
data: form.serialize(), //form serizlize data
beforeSend: function(){
// change submit button value text and disabled it
submit.val('Submitting...').attr('disabled', 'disabled');
},
success: function(data){
// Append with fadeIn see http://stackoverflow.com/a/978731
var item = $(data).hide().fadeIn(800);
$('.comment-block').append(item);
// reset form and button
form.trigger('reset');
submit.val('Submit Comment').removeAttr('disabled');
},
error: function(e){
alert(e);
}
});
});
ajajcomment.php
<?php
if (isset( $_SERVER['HTTP_X_REQUESTED_WITH'] )):
include('config.php');
include('function.php');
dbConnect();
if (!empty($_POST['commentName']) AND !empty($_POST['commentMessage']) AND !empty($_POST ['BID'])) {
$name = mysql_real_escape_string($_POST['commentName']);
$comment = mysql_real_escape_string($_POST['commentMessage']);
$BID = mysql_real_escape_string($_POST['BID']);
mysql_query("
INSERT INTO Comments
(UNAME, BID, COMMENT)
VALUES('{$name}', '{$BID}', '{$comment}')");
}
?>
<div class="comment-item">
<div class="comment-post">
<h3><?php echo $name ?> <span>said....</span></h3>
<p><?php echo $comment ?></p>
</div>
</div>
<?php
dbConnect(0);
endif?>
What does "php/ajaxcomment.php" return when you post a comment? Pure HTML?
I'd make the "php/ajaxcomment.php" return JSON, for example:
<?php
/*
here you do what ever you do now,
Insert the new comment to database, etc
*/
// Then you return the inserted data:
$data = array(
'UNAME' => $username,
'COMMENT' => $comment,
);
header('Content-Type: application/json');
print json_encode( $data );
?>
..and change the ajax:
...
...
success: function(data){
var commentItem = $('<div/>').addClass('comment-item');
var commentPost = $('<div/>').addClass('comment-post');
var user = $('<h3/>').html( data.UNAME +'<span>said...</span>' );
var comment = $('<p/>').html( data.COMMENT );
commentItem.html( commentPost.html( user + comment ) ).hide().fadeIn(800);
$('.comment-block').append(commentItem);
// reset form and button
form.trigger('reset');
submit.val('Submit Comment').removeAttr('disabled');
},
...
...

AJAX improvement for validation

SO i have this piece of AJAX that work as it should be but i want to add some validation to it.I dont want it to send empty information.The AJAX is done for a comment system.It takes the value from the form and then with php it inserts it to the databse. The Problem i am haveing is that it just insert empty comment to the database
index.php
<?php
require_once("menu.php");
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script src="comments.js" type="text/javascript" ></script>
<script type="text/javascript">
function validateForm()
{
var comment = document.getElementsByName('comment').value;
if (comment == "" )
{
alert("Please fill in all the fields");
return false;
}
else
{
return true;
}
}
</script>
<?php
$connection = connectToMySQL();
$selectPostQuery = "SELECT * FROM (SELECT * FROM `tblposts` ORDER BY id DESC LIMIT 3) t ORDER BY id DESC";
$result = mysqli_query($connection,$selectPostQuery)
or die("Error in the query: ". mysqli_error($connection));
while ($row = mysqli_fetch_assoc($result))
{
$postid = $row['ID'];
?>
<div class="wrapper">
<div class="titlecontainer">
<h1><?php echo $row['Title']?></h1>
</div>
<div class="textcontainer">
<?php echo $row['Content']?>
</div>
<?php
if (!empty($row['ImagePath'])) #This will check if there is an path in the textfield
{
?>
<div class="imagecontainer">
<img src="images/<?php echo "$row[ImagePath]"; ?>" alt="Article Image">
</div>
<?php
}
?>
<div class="timestampcontainer">
<b>Date posted :</b><?php echo $row['TimeStamp']?>
<b>Author :</b> Admin
</div>
<?php
#Selecting comments corresponding to the post
$selectCommentQuery = "SELECT * FROM `tblcomments` LEFT JOIN `tblusers` ON tblcomments.userID = tblusers.ID WHERE tblcomments.PostID ='$postid'";
$commentResult = mysqli_query($connection,$selectCommentQuery)
or die ("Error in the query: ". mysqli_error($connection));
#renderinf the comments
echo '<div class="comment-block_' . $postid .'">';
while ($commentRow = mysqli_fetch_assoc($commentResult))
{
?>
<div class="commentcontainer">
<div class="commentusername"><h1>Username :<?php echo $commentRow['Username']?></h1></div>
<div class="commentcontent"><?php echo $commentRow['Content']?></div>
<div class="commenttimestamp"><?php echo $commentRow['Timestamp']?></div>
</div>
<?php
}
?>
</div>
<?php
if (!empty($_SESSION['userID']) )
{
?>
<form method="POST" class="post-frm" action="index.php" onsubmit="return validateForm();">
<label>New Comment</label>
<textarea name="comment" class="comment"> </textarea>
<input type="hidden" name="postid" value="<?php echo $postid ?>">
<input type="submit" name ="submit" class="submitComment"/>
</form>
<?php
}
echo "</div>";
echo "<br /> <br /><br />";
}
require_once("footer.php") ?>
My AJAX code.I have tried to do some validation but it doesnt work properly and i dont know what is wrong with it.I am quite new to AJAX so not rlealy able to debug it myself.
$(document).ready(function(){
$(document).on('click','.submitComment',function(e) {
e.preventDefault();
//send ajax request
var form = $(this).closest('form');
var comment = $('.comment');
if (!comment.val()){
alert('You need to write a comment!');
}
else{
$.ajax({
url: 'ajax_comment.php',
type: 'POST',
cache: false,
dataType: 'json',
data: $(form).serialize(), //form serialize data
beforeSend: function(){
//Changeing submit button value text and disableing it
$(this).val('Submiting ....').attr('disabled', 'disabled');
},
success: function(data)
{
var item = $(data.html).hide().fadeIn(800);
$('.comment-block_' + data.id).append(item);
// reset form and button
$(form).trigger('reset');
$(this).val('Submit').removeAttr('disabled');
},
error: function(e)
{
alert(e);
}
});
}
});
});
My php code to insert into the database.
<?php
if (isset($_SERVER['HTTP_X_REQUESTED_WITH'])):
session_start();
include('connection.php');
$connection = connectToMySQL();
$userId = $_SESSION['userID'];
$username = $_SESSION['username'];
$postId = $_POST['postid'];
$comment = $_POST['comment'];
$date_format = " Y-m-d g : i : s";
$time = date ($date_format);
$insertCommentQuery = "INSERT INTO `tblcomments`
(`Content`,`UserID`,`PostID`,`Timestamp`)
VALUES (
'$comment','$userId','$postId',
CURRENT_TIMESTAMP)";
$result = mysqli_query($connection,$insertCommentQuery);
$obj = array();
$obj['id'] = $postId;
$obj['html'] = '<div class="commentcontainer">
<div class="commentusername"><h1> Username :'.$username.'</h1></div>
<div class="commentcontent">'.$comment.'</div>
<div class="commenttimestamp">'.$time.'</div>
</div>';
echo json_encode($obj);
connectToMySQL(0);
endif?>
You never call the function validateForm()
And this part
if (!comment.val()){
alert('You need to write a comment!');
}
will always pass if there is a input field with the class comment, even if it's empty. You could do something like:
//send ajax request
if(validateForm()===false){
alert('You need to write a comment!');
return false;
}
else{
....
You could try to change the comment.val() to comment.text() since you are using a textarea and see if that solves your problem. The change is to be modified in your js code

Categories

Resources