Here's the sample of my codes:
In index.php, I created drop down HTML and load drop down list with employee names from MySQL database table.
<div class="page-header">
<h3>
<select id="employee">
<option value="" selected="selected">Select Employee Name</option>
<?php
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM
employee LIMIT 10";
$resultset = mysqli_query($conn, $sql) or die("database error:".
mysqli_error($conn));
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
<option value="<?php echo $rows["id"]; ?>"><?php echo
$rows["employee_name"]; ?></option>
<?php } ?>
</select>
</h3>
</div>
<div id="display">
<div class="row" id="heading" style="display:none;"><h3><div
class="col-sm-3"><strong>Employee Name</strong></div><div class="col-sm-4">
<strong>Age</strong></div><div class="col-sm-4"><strong>Salary</strong>
</div>
</h3></div><br>
<div class="row" id="records"><div class="col-sm-3" id="emp_name"></div>
<div class="col-sm-4" id="emp_age"></div><div class="col-sm-3"
id="emp_salary"></div></div>
<div class="row" id="no_records"><div class="col-sm-3">Plese select
employee name to view details</div></div>
</div>
<div style="margin:50px 0px 0px 0px;">
<input type="submit" class="btn btn-default read-more" name="submit" value="submit">
</div>
</div>
Drop Down Selection Data Load with jQuery Ajax
Now in getData.js JavaScript file, we will handle drop down selection change event to get selected value and make Ajax request to server getEmployee.php to get selected employee details from MySQL database table employee. The Ajax request gets response employee data in JSON format from server. We will display that response JSON data with jQuery.
$(document).ready(function(){
// code to get all records from table via select box
$("#employee").change(function() {
var id = $(this).find(":selected").val();
var dataString = 'empid='+ id;
$.ajax({
url: 'getEmployee.php',
dataType: "json",
data: dataString,
cache: false,
success: function(employeeData) {
if(employeeData) {
$("#heading").show();
$("#no_records").hide();
$("#emp_name").text(employeeData.employee_name);
$("#emp_age").text(employeeData.employee_age);
$("#emp_salary").text(employeeData.employee_salary);
$("#records").show();
} else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
})
});
Get Data from MySQL Database
Now finally in getEmployee.php, we will get employee details from MySQL database table and return data as JSON using json_encode.
<?php
include_once("db_connect.php");
if($_REQUEST['empid']) {
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM
employee WHERE id='".$_REQUEST['empid']."'";
$resultset = mysqli_query($conn, $sql) or die("database error:".
mysqli_error($conn));
$data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$data = $rows;
}
echo json_encode($data);
} else {
echo 0;
}
?>
Now, I am going to add SUBMIT button and if that button is set, I want to INSERT the data that has been shown in the table after I clicked one of the employee names in the dropdown option. How do I do that?
You should link the Submit button .click event to an Ajax call.
Also you must have insertEmp.php file which will make the insert.
First, set an id to your Submit button (id = submitButton)
An approximation of the code could be like this:
$('#submitButton').click(function() {
$.ajax({
url:"/insertEmp",
type: "POST",
data: {emp_name:$('#emp_name').val() , emp_salary:$('#emp_salary').val() , .. all the others parameters... },
success: function (results) {
},
error: function (results) {
}
})
})
Related
I have an problem, I have multiple button generate with while, with different names (button[$nostation]).
Now, I want to update MySQL database (table: smt, column: no) with the same id ($nostation).
How I can generate AJAX function for that?
This is my code:
<?php
$query1 = mysqli_query($connect,"SELECT * FROM smt WHERE no <= 15");
while ( $data=mysqli_fetch_array($query1)){
$nostation = $data['no'];
$namastation = $data['name'];
echo "
<div class='col-xs-2-2'>
<form action='coba.php' method='post'>
<button name='button[$nostation]' value='2' style='background-color:#02780d; width:140px; height:75px; margin : 2px; border-radius:10%;'>
<center>
<b style='font-size:15px; color: #fff; font-family:Calibri;'>$namastation</b>
</center>
</button>
</form>
</div>
";}?>
And this is my code for update database with PHP:
<?php
include 'connect.php';
$array=$_POST['button'];
foreach ($array as $nostation => $value) {
$updch=mysqli_query($connect,"UPDATE smt SET status='$value' WHERE no='$nostation'");
}?>
How I can update with AJAX without refreshing the page?
View Part :-
<?php
$query1 = mysqli_query($connect,"SELECT * FROM smt WHERE no <= 15");
while ( $data=mysqli_fetch_array($query1)){
$nostation = $data['no'];
$namastation = $data['name'];
?>
<div class='col-xs-2-2'>
<form method='post'>
<input type="hidden" value="<?php echo $nostation;?>" id="name_<?=$nostation;?>" name="name">
<button type="submit" id="button_<?=$nostation;?>" data-id="<?=$nostation;?>">SAVE</button>
<center>
<b style='font-size:15px; color: #fff; font-family:Calibri;'>$namastation</b>
</center>
</button>
</form>
</div>
<?php } ?>
jQuery / AJAX Part:-
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){ //when DOM is Ready.
$("[id^=button_]").click(function () { //when Button is Clicked.
var id = $(this).data('id'); // Get the ID of the button that was clicked on.
var name = $("#name_"+id).val(); // value from `input` which is connected the clicked button.
// console.log(id+"---"+name);
$.ajax({ // AJAX request
url: 'update.php', // send request to server.
method: 'POST', // method is POST.
data: { //data which is sent to server.
id: id,name: name
},
success: function (data) { //success function called.
alert(data); // alert success data.
}
});
});
});
</script>
update.php:-
And in the php-side We catch it by:-
echo $id = $_POST['id'];
echo $name = $_POST['name'];
//use update query.
Note:- For more info regarding click()
https://api.jquery.com/click
I got some problems with my code. I want to delete multiple data from MySQL database that populate from Select Option.
Example: I select data with id 5, 2, 4, then press the delete button, it only deletes the latest id which is 5.
Can I know what is the problem? Below is my code:
index.html
<?php
include("configPDO.php");
$smt = $conn->prepare("SELECT * FROM frame_list ORDER BY framework_name ASC");
$smt->execute();
$results = $smt->fetchAll();
?>
<form method="post" id="multiple_select_form">
<select name="framework[]" id="framework" class="form-control selectpicker" data-live-search="true" multiple>
<?php foreach ($results as $row2): ?>
<option value= <?php echo $row2["framework_id"]; ?>><?php echo $row2["framework_name"];?></option>
<?php endforeach ?>
</select>
<br><br>
<input type="hidden" name="framework_id" id="framework_id" />
<input type="submit" name="submit" class="btn btn-info" value="Submit" />
</form>
<script>
$(document).ready(function(){
$('.selectpicker').selectpicker();
$('#framework').change(function(){
$('#framework_id').val($('#framework').val());
});
$('#multiple_select_form').on('submit', function(event){
event.preventDefault();
if($('#framework').val() != '')
{
var form_data = $(this).serialize();
$.ajax({
url:"delete.php",
method:"POST",
data:form_data,
success:function(data)
{
//console.log(data);
$('#framework_id').val('');
$('.selectpicker').selectpicker('val', '');
alert(data);
}
})
}
else
{
alert("Please select framework");
return false;
}
});
});
</script>
delete.php
<?php
include("configPDO.php");
$smt = $conn->prepare("DELETE FROM frame_list WHERE framework_id = '".$_POST["framework_id"]."'");
$smt->execute();
if($smt){
echo "Data DELETED";
}else{
echo "Error";
}
?>
Appreciate it if anyone can solve my problem.
Thank you very much.
this is where framework id got overwritten:
$('#framework').change(function(){
$('#framework_id').val($('#framework').val());
});
delete.php will only run when your ajax request send(in this case, when you click submit button).
so maybe you'll want to pass several id at a single request if you want delete them at the same time. or you may want to delete them one by one by sending the ajax request each time you choose a id.
How do I let AJAX know what I have checked with checkbox? I have a list of categories that are selected from a database. So how do let the AJAX know what I have checked?
This is my search PHP:
<div class ="search-category-container">
<div class ="search-category-header featured-header">
<label class ="featured-font">category</label>
</div>
<div class ="search-category-content">
<?php
$result=mysqli_query($connection,"SELECT * FROM category");
while($row= mysqli_fetch_array($result)) { ?>
<label class="checkbox category-list ">
<input type="checkbox" name="category_list[]" value="<?php echo $row['name']; ?>" form="search-form"><?php echo $row['name']; ?>
</label>
<?php
}
?>
</div>
</div>
This is my search function using on search before without AJAX. Now I was trying to use AJAX to get data can I use back the function?
<?php
if($filter == "post" && $time == "all" && $status == "all" && isset ($_POST['category_list'])) {
foreach ($_POST['category_list'] as $category) {
$result = mysqli_query($connection, "SELECT * FROM category WHERE name IN ('$category')")or die(mysqli_error($connection));
while($row= mysqli_fetch_array($result)) {
$getCategory = $row['id'];
$getPostIDRow = mysqli_query($connection, "SELECT * FROM post_category WHERE category_id = '$getCategory'") or die(mysqli_error($connection));
while($row2= mysqli_fetch_array($getPostIDRow)) {
$getPostID = $row2['post_id'];
$result2 = mysqli_query($connection,"SELECT * FROM post WHERE title LIKE '%$search%' AND id = '$getPostID'") or die(mysqli_error($connection));
$count2 = mysqli_num_rows($result2);
if($count2>0) {
while($row2= mysqli_fetch_array($result2)) {
$postID = $row2['id'];
$result3 = mysqli_query($connection, "SELECT * FROM user_post WHERE post_id = '$postID'") or die(mysqli_error($connection));
while($row3 = mysqli_fetch_array($result3)) {
$getUserName = mysqli_query($connection, "SELECT * FROM user WHERE id = '".$row3['user_id']."'")or die(mysqli_error($connection));
while($row4 = mysqli_fetch_array($getUserName)) {?>
<div class ="post-container" id="search-container">
<div class ="post-header-container">
<div class ="post-header">
<a href ="post.php?id=<?php echo urlencode($row2['id']);?>&user=<?php echo $row3['user_id']; ?>">
<p class ="post-header-font"><?php echo ($row2['title']); ?></p>
</a>
</div>
<div class ="post-user">
<p class ="faded-font">by : <?php echo $row4['username']; ?></p>
</div>
</div>
<div class ="post-content-container">
<p class ="post-content-font">
<?php echo ($row2['summary']); ?>
</p>
</div>
<div class ="post-info-container">
<div class ="post-info">
<span class ="glyphicon glyphicon-eye-open"> views: <?php echo ($row2['views']);?></span>
</div><div class ="post-info">
<span class ="glyphicon glyphicon-pencil"> answers:</span>
</div><div class ="post-info">
<span class ="glyphicon glyphicon-ok"> status: <?php echo ($row2['status']);?></span>
</div>
</div>
</div><?php
}
}
}
}
}
}
}
?>
This is AJAX search function
$(document).ready(function(){
function search() {
var searchWord = $("#search").val();
var filter = $("#filter:checked").val();
var time = $("#time:checked").val();
var status = $("#status:checked").val();
$.ajax({
type:"post",
url:"searchFunction.php",
data:"search="+searchWord+"&filter="+filter+"&time="+time+"&status="+status,
success:function(data) {
$("#searchContainer").html(data);
$("#search").val("");
}
});
}
$("#searchButton").click(function(){
search();
});
$("#search").keyup(function(e){
if(e.keyCode == 13) {
search();
}
});
});
To answer you ajax question I highly recommend changing your code to use the 'form' DOM for user experience and easier maintenance, just fyi and use the serialize function which will also send out the 'checked' checkboxes.
https://api.jquery.com/serialize/
function search() {
var postData = $('myForm').serialize(); // i.e <form id="myForm">
$.ajax({
type:"post",
url:"searchFunction.php",
data: postData,
success:function(data) {
$("#searchContainer").html(data);
$("#search").val("");
}
});
}
That will do all the work for you automatically instead of having to run a bunch of jQuery selection calls and putting together the HTTP query your self. If you ever need to know what your ajax is running. Go in inspector mode of your browser and look for "Network" tab, click that and you should see the ajax call to that search file, with everything you need to know. What HTTP request and response headers are and body.
P.s make sure you return false on the submit event and that the name of the fields on your HTML form match the $_POST key names for the ajax.
$("#myForm").on('submit', function(){
search();
return false;
});
Good luck!
I'm trying to send a variable from Javascript to PHP using AJAX.
The HTML (index.html):
<div class="table-popup">
<ul>
<li id="edit-toggle">Bearbeiten</li>
<li>Zu Favoriten hinzufügen</li>
<li>Datei öffnen</li>
<li>Im Ordner öffnen</li>
<li>Löschen</li>
</ul>
</div>
<div class="main-content">
<h2 class="main-content-header">Datenbank</h2>
<div id="table">
<table>
<thead>
<tr class="table-row" tabindex="1">
<th class="fixed-header"></th>
<th>Dateiname</th>
<th>Benutzer</th>
<th>Erstelldatum</th>
<th>Änderungsdatum</th>
<th>Erste Zeile</th>
<th>Kategorie</th>
<th>Projekt</th>
</tr>
</thead>
<?php
include_once('connect.php');
$result = $connect->query("SELECT file.name AS 'filename', file.description AS 'filedescription', category.name AS 'categoryname', project.name AS 'projectname', user.name AS 'username', idFile
FROM file, category, project, file_has_project, file_has_category, user, user_has_project, user_has_category
WHERE file.idFile = file_has_project.file_idFile AND file_has_project.project_idProject = project.idProject AND file.idFile = file_has_category.file_idFile AND file_has_category.category_idCategory = category.idCategory AND user.idUser = user_has_project.user_idUser AND user_has_project.project_idProject = project.idProject AND user.idUser = user_has_category.user_idUser AND user_has_category.category_idCategory = category.idCategory AND user.idUser = '".$_SESSION['userid']."'");
//echo "<tbody><td>".$result->num_rows."</td></tbody>";
if ($result->num_rows > 0) {
echo "<tbody>";
while($row = $result->fetch_assoc()) {
echo "<tr class='table-row' tabindex='1' id='".$row['idFile']."'>";
echo "<th class='table-edit-button fixed-header'><img src='images/open.gif' /></th>";
echo "<td>".$row['filename']."</td>";
echo "<td>".$row['username']."</td>";
echo "<td>-</td>";
echo "<td>-</td>";
echo "<td>".$row['filedescription']."</td>";
echo "<td>".$row['categoryname']."</td>";
echo "<td>".$row['projectname']."</td>";
echo "</tr>";
}
echo "</tbody>";
}
?>
</table>
</div>
</div>
The Javascript which is sending the AJAX request with jQuery (functions.js):
$(document).ready(function() {
var fileID;
$('.table-edit-button').click(function() {
fileID = $(this).parent().attr('id');
});
$('#edit-toggle').click(function() {
$.ajax({
url: 'edit.php',
type: 'post',
data: { fileID : fileID },
success: function(data) {
alert("Success");
}
});
});
});
The PHP file (edit.php):
<?php
if (isset($_POST['fileID']))
$fileID = $_POST['fileID'];
?>
<div class="edit-content">
<h2 class="edit-content-header">Bearbeiten<img src="images/cross.gif" /></h2>
<div>
<form action="" method="post">
<?php echo $fileID; ?>
<input type="text" placeholder="Dateiname"/>
<input type="text" placeholder="Benutzer"/>
<textarea placeholder="Erste Zeile" rows="7em" cols="100"></textarea>
<select name="Kategorie">
<option disabled selected>Kategorie</option>
<?php
include_once('connect.php');
$result = $connect->query("SELECT name FROM category");
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option value='".$row['name']."'>".$row['name']."</option>";
}
}
?>
</select>
<select name="Projekt">
<option disabled selected>Projekt</option>
<?php
$result = $connect->query("SELECT name FROM project");
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option value='".$row['name']."'>".$row['name']."</option>";
}
}
?>
</select>
<img id="savebtn" src="images/save.gif" />
</form>
</div>
</div>
The HTML displays data from a database in a table and each row has a button next to it. With jQuery I get the id of the row where the button has been clicked. I want to send this id to my php file to do some stuff there (irrelevant for now).
The problem I'm having is that I can't access the send variable (fileID) in my edit.php file.
The alert in the success part of the AJAX call gets executed.
What do I need to fix? I thought I had everything right.
I also tried to change the url of the AJAX call to ../edit.php but that didn't work either. Then the success part wouldn't be executed.
And different variable names didn't work either.
The project structure is as follows:
project (*)
edit.php
index.php
scripts (*)
functions.js
(*) directories
Edit:
The error message: Notice: Undefined variable: fileID in C:\xampp\htdocs\kuhlnotesweb\edit.php on line 10
AJAX returns the content of the page in the data success variable. Trying console.log(data) and you should see you variable has been echoing into the returned HTML.
If not, check in the dev tools that the fileID parameter is actually attached to the request.
UPDATE
<div class="edit-content">
<h2 class="edit-content-header">Bearbeiten<img src="images/cross.gif" /></h2>
<div>
<form action="" method="post">
<?php
if (isset($_POST['fileID'])) {
echo $_POST['fileID'];
}
?>
<input type="text" placeholder="Dateiname"/>
<input type="text" placeholder="Benutzer"/>
<textarea placeholder="Erste Zeile" rows="7em" cols="100"></textarea>
<select name="Kategorie">
<option disabled selected>Kategorie</option>
<?php
include_once('connect.php');
$result = $connect->query("SELECT name FROM category");
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option value='".$row['name']."'>".$row['name']."</option>";
}
}
?>
</select>
<select name="Projekt">
<option disabled selected>Projekt</option>
<?php
$result = $connect->query("SELECT name FROM project");
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option value='".$row['name']."'>".$row['name']."</option>";
}
}
?>
</select>
<img id="savebtn" src="images/save.gif" />
</form>
</div>
</div>
The problem is a syntax error in your js when you try to pass data
your code. see js fiddle example http://jsfiddle.net/mdamia/njd8m0g5/4/. how to get the value from the tr.
data: ({ fileID : fileID }),
should be data:
{ fileID : fileID } // no ()
Tested and it works.
from jQuery AJAX
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
This is my solution now:
functions.js:
$(document).ready(function() {
var fileID, fileName, fileDescription, fileCategory, fileProject;
$('.table-edit-button').click(function() {
fileID = $(this).parent().attr('id');
});
$('#edit-toggle').click(function() {
$.ajax({
url: 'ajax-edit.php',
type: 'post',
data: { fileID : fileID },
dataType: 'json',
success: function(data) {
fileName = data.filename;
fileDescription = data.filedescription;
fileCategory = data.categoryname;
fileProject = data.projectname;
$('#edit-fileid').val(fileID);
$('#edit-filename').val(fileName);
$('#edit-description').val(fileDescription);
$('#edit-projectname').val(fileProject);
$('#edit-categoryname').val(fileCategory);
}
});
});
});
ajax-edit.php:
<?php
if (isset($_POST['fileID'])) $fileID = $_POST['fileID'];
include_once('connect.php');
$result = $connect->query("SELECT file.name AS 'filename', file.description AS 'filedescription', project.name AS 'projectname', category.name AS 'categoryname'
FROM file, project, category, file_has_project, file_has_category
WHERE file.idFile = file_has_project.file_idFile AND file_has_project.project_idProject = project.idProject AND file.idFile = file_has_category.file_idFile AND file_has_category.category_idCategory = category.idCategory AND file.idFile = '".$fileID."'");
$result = $result->fetch_assoc();
echo json_encode($result);
?>
edit.php:
<div class="edit-content">
<h2 class="edit-content-header">Bearbeiten<img src="images/cross.gif" /></h2>
<div>
<form action="edit.php" method="post">
<input type="hidden" id="edit-fileid" name="edit-fileid"/>
<input type="text" id="edit-filename" name="edit-filename" placeholder="Dateiname"/>
<input type="text" id="edit-username" name="edit-username" placeholder="Benutzer"/>
<textarea id="edit-description" name="edit-description" placeholder="Erste Zeile" rows="7em" cols="100"></textarea>
<select id="edit-categoryname" name="edit-categoryname">
<option disabled selected value="category-first">Kategorie</option>
<?php
include_once('connect.php');
$result = $connect->query("SELECT category.name FROM category,user,user_has_category WHERE user.idUser = user_has_category.user_idUser AND user_has_category.category_idCategory = category.idCategory AND user.idUser = '".$_SESSION['userid']."'");
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option value='".$row['name']."'>".$row['name']."</option>";
}
}
?>
</select>
<select id="edit-projectname" name="edit-projectname">
<option disabled selected value="project-first">Projekt</option>
<?php
$result = $connect->query("SELECT project.name FROM project,user,user_has_project WHERE user.idUser = user_has_project.user_idUser AND user_has_project.project_idProject = project.idProject AND user.idUser = '".$_SESSION['userid']."'");
if($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
echo "<option value='".$row['name']."'>".$row['name']."</option>";
}
}
?>
</select>
<input type="image" name="submit-button" id="savebtn" src="images/save.gif" />
</form>
</div>
</div>
I think there were many misunderstanding in what I was trying to achieve and how I was not able to understand how AJAX works exactly. edit.php is only a small part of HTML that gets included in index.php and the AJAX call I'm making gets made in the same file, so I was not able to use the variable I sent via AJAX in my edit.php file because at the point where I wanted to use it it wasn't even sent and thus the $_POST['fileID'] was undefined.
My solution to this was that I created a seperate php file (ajax-edit.php) where I retrieve the information I need from the database and return it as a JSON object. With this I am able to use the information from the JSON object to change the value of the input fields.
Thank you for the help everybody and I am sorry that I was so stubborn ^^.
So i am haveing this page where it is displaying articles andunderneet each article it will have a textarea asking allowing the user to insert a comment.I did the AJAX and it works fine.Some of the validation works fine aswell(Meaning that if the textarea is left empty it will not submit the comment and display an error).The way i am doing this validation is with the ID.So i have multi forms with the same ID.For the commets to be submited it works fine but the validtion doesnt work when i go on a second form for exmaple it only works for the first form
AJAX code
$(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().length > 1)
{
$.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);
}
});
}
else
{
alert("Hello");
}
});
});
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>
<?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" >
<label>New Comment</label>
<textarea id="comment" 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") ?>
Again the problem being is the first form works fine but the second one and onwaord dont work properly
try this:
var comment = $('.comment',form);
instead of
var comment = $('#comment');
That way you're targeting the textarea belonging to the form you're validating
ps.
remove the id's from the elements or make them unique with php, all element id's should be unique