Filter Records based on combobox value php ajax
Question
I want to display records based on the value of the combobox (dropdown list) using ajax. Display list of examinees based on the examdate. Help. I am a newbie in PHP and AJAX.
I want to display records based on the value of the combobox (dropdown list) using ajax. Display list of examinees based on the examdate. Help. I am a newbie in PHP and AJAX. I want to display records based on the value of the combobox (dropdown list) using ajax. Display list of examinees based on the examdate. Help. I am a newbie in PHP and AJAX.
<?php
include 'configuration.php';
$queryselect = mysql_query("SELECT examdateno, examdate from tbl_examdate ORDER BY examdate DESC");
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="onclick edit jquery php, grid in php, onclick change text box in jquery, onclick edit table row, insert update delete using jquery ajax, simple php data grid" />
<meta name="description" content="This article is about simple grid system using PHP, jQuery. Insert a new record to the table using by normal Ajax PHP. It will show the editable textbox when user clicks on the label." />
<link rel="stylesheet" type="text/css" href="css/grid.css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
// Function for load the grid
function LoadGrid(dte) {
var gridder = $('#as_gridder');
var UrlToPass = 'action=load';
var value = $('#examdate').val();
gridder.html('loading..');
$.ajax({
url: 'ajax.php',
type: 'POST',
data: UrlToPass,
success: function (responseText) {
gridder.html(responseText);
}
});
}
// Seperate Function for datepiker() to save the value
function ForDatePiker(ThisElement) {
ThisElement.prev('span').html(ThisElement.val()).prop('title', ThisElement.val());
var UrlToPass = 'action=update&value=' + ThisElement.val() + '&crypto=' + ThisElement.prop('name');
$.ajax({
url: 'ajax.php',
type: 'POST',
data: UrlToPass
});
}
LoadGrid(); // Load the grid on page loads
// Execute datepiker() for date fields
$("body").delegate("input[type=text].datepicker", "focusin", function () {
var ThisElement = $(this);
$(this).datepicker({
dateFormat: 'yy/mm/dd',
onSelect: function () {
setTimeout(ForDatePiker(ThisElement), 500);
}
});
});
// Show the text box on click
$('body').delegate('.editable', 'click', function () {
var ThisElement = $(this);
ThisElement.find('span').hide();
ThisElement.find('.gridder_input').show().focus();
});
// Pass and save the textbox values on blur function
$('body').delegate('.gridder_input', 'blur', function () {
var ThisElement = $(this);
ThisElement.hide();
ThisElement.prev('span').show().html($(this).val()).prop('title', $(this).val());
var UrlToPass = 'action=update&value=' + ThisElement.val() + '&crypto=' + ThisElement.prop('name');
if (ThisElement.hasClass('datepicker')) {
return false;
}
$.ajax({
url: 'ajax.php',
type: 'POST',
data: UrlToPass
});
});
// Same as the above blur() when user hits the 'Enter' key
$('body').delegate('.gridder_input', 'keypress', function (e) {
if (e.keyCode == '13') {
var ThisElement = $(this);
ThisElement.hide();
ThisElement.prev('span').show().html($(this).val()).prop('title', $(this).val());
var UrlToPass = 'action=update&value=' + ThisElement.val() + '&crypto=' + ThisElement.prop('name');
if (ThisElement.hasClass('datepicker')) {
return false;
}
$.ajax({
url: 'ajax.php',
type: 'POST',
data: UrlToPass
});
}
});
// Function for delete the record
$('body').delegate('.gridder_delete', 'click', function () {
var conf = confirm('Are you sure want to delete this record?');
if (!conf) {
return false;
}
var ThisElement = $(this);
var UrlToPass = 'action=delete&value=' + ThisElement.attr('href');
$.ajax({
url: 'ajax.php',
type: 'POST',
data: UrlToPass,
success: function () {
LoadGrid();
}
});
return false;
});
// Add new record
// Add new record when the table is empty
$('body').delegate('.gridder_insert', 'click', function () {
$('#norecords').hide();
$('#addnew').slideDown();
return false;
});
// Add new record when the table in non-empty
$('body').delegate('.gridder_addnew', 'click', function () {
$('html, body').animate({scrollTop: $('.as_gridder').offset().top}, 250); // Scroll to top gridder table
$('#addnew').slideDown();
return false;
});
// Cancel the insertion
$('body').delegate('.gridder_cancel', 'click', function () {
LoadGrid()
return false;
});
// For datepiker
$("body").delegate(".gridder_add.datepiker", "focusin", function () {
var ThisElement = $(this);
$(this).datepicker({
dateFormat: 'yy/mm/dd'
});
});
// Pass the values to ajax page to add the values
$('body').delegate('#gridder_addrecord', 'click', function () {
// Do insert vaidation here
if ($('#fname').val() == '') {
$('#fname').focus();
alert('Enter the First Name');
return false;
}
if ($('#lname').val() == '') {
$('#lname').focus();
alert('Enter the Last Name');
return false;
}
if ($('#age').val() == '') {
$('#age').focus();
alert('Enter the Age');
return false;
}
if ($('#profession').val() == '') {
$('#profession').focus();
alert('Select the Profession');
return false;
}
if ($('#date').val() == '') {
$('#date').focus();
alert('Select the Date');
return false;
}
// Pass the form data to the ajax page
var data = $('#gridder_addform').serialize();
$.ajax({
url: 'ajax.php',
type: 'POST',
data: data,
success: function () {
LoadGrid();
}
});
return false;
});
});
</script>
</head>
<body>
<header>
<img src="images/qes_logob.png" alt="logo">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="menu">
<ul>
<a href="encodeinterview.php">
<li>Encode Grades</li>
</a>
<a href="viewinterview.php">
<li>View Grades</li>
</a>
<a href="../index.php">
<li>Logout</li>
</a>
</ul>
</div>
<script>
$(function () {
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function () {
$(".menu").slideToggle("slow", function () {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function () {
$(".menu").slideToggle("slow", function () {
$(".cross").hide();
$(".hamburger").show();
});
});
});
</script>
<form>
<h1>Exam Dates</>
<select name="examdate" id="examDate" onchange="LoadGrid(this.value)">
<option>Select Exam Date</option>
<?php
while ($row = mysql_fetch_array($queryselect)) {
echo "<option value={$row['examdateno']}>{$row['examdate']}</option>\n";
}
?>
</select>
</form>
<div class="as_wrapper">
<div class="as_grid_container">
<div class="as_gridder" id="as_gridder"></div> <!-- GRID LOADER -->
</div>
</div>
</body>
</html>
AJAX
<?php
include 'configuration.php';
include 'functions/functions.php';
$action = $_REQUEST['action'];
$q = intval($_POST['q']);
switch($action) {
case "load":
$query = mysql_query("select s.sno, s.fname, s.lname, s.examdate, s.interviewgrade, s.gwa from student s inner join tbl_examdate e on s.examdate=e.examdate where e.examdateno=$q");
$count = mysql_num_rows($query);
if($count > 0) {
while($fetch = mysql_fetch_array($query)) {
$record[] = $fetch;
}
}
$department = array('Software Architect', 'Inventor', 'Programmer', 'Entrepreneur');
?>
<table class="as_gridder_table">
<tr class="grid_header">
<td><div class="grid_heading">Sno</div></td>
<td><div class="grid_heading">First Name</div></td>
<td><div class="grid_heading">Last Name</div></td>
<td><div class="grid_heading">Age</div></td>
<td><div class="grid_heading">Profession</div></td>
<td><div class="grid_heading">Date</div></td>
<td><div class="grid_heading">Actions</div></td>
</tr>
<tr id="addnew">
<td> </td>
<td colspan="6">
<form id="gridder_addform" method="post">
<input type="hidden" name="action" value="addnew" />
<table width="100%">
<tr>
<td><input type="text" name="fname" id="fname" class="gridder_add" /></td>
<td><input type="text" name="lname" id="lname" class="gridder_add" /></td>
<td><input type="text" name="age" id="age" class="gridder_add" /></td>
<td><select name="profession" id="profession" class="gridder_add select">
<option value="">SELECT</option>
<?php foreach($department as $departments) { ?>
<option value="<?php echo $departments; ?>"><?php echo $departments; ?></option>
<?php } ?>
</select></td>
<td><input type="text" name="date" id="date" class="gridder_add datepiker" /></td>
<td>
<input type="submit" id="gridder_addrecord" value="" class="gridder_addrecord_button" title="Add" />
<a href="cancel" id="gridder_cancel" class="gridder_cancel"><img src="images/delete.png" alt="Cancel" title="Cancel" /></a></td>
</tr>
</table>
</form>
</tr>
<?php
if($count <= 0) {
?>
<tr id="norecords">
<td colspan="7" align="center">No records found <a href="addnew" id="gridder_insert" class="gridder_insert"><img src="images/insert.png" alt="Add New" title="Add New" /></a></td>
</tr>
<?php } else {
$i = 0;
foreach($record as $records) {
$i = $i + 1;
?>
<tr class="<?php if($i%2 == 0) { echo 'even'; } else { echo 'odd'; } ?>">
<td><div class="grid_content sno"><span><?php echo $i; ?></span></div></td>
<td><div class="grid_content editable"><span><?php echo $records['fname']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("fname|".$records['id']); ?>" value="<?php echo $records['fname']; ?>" /></div></td>
<td><div class="grid_content editable"><span><?php echo $records['lname']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("lname|".$records['id']); ?>" value="<?php echo $records['lname']; ?>" /></div></td>
<td><div class="grid_content editable"><span><?php echo $records['age']; ?></span><input type="text" class="gridder_input" name="<?php echo encrypt("age|".$records['id']); ?>" value="<?php echo $records['age']; ?>" /></div></td>
<td><div class="grid_content editable"><span><?php echo $records['profession']; ?></span>
<select class="gridder_input select" name="<?php echo encrypt("profession|".$records['id']); ?>">
<?php foreach($department as $departments) { ?>
<option value="<?php echo $departments; ?>" <?php if($departments == $records['profession']) { echo 'selected="selected"'; } ?>><?php echo $departments; ?></option>
<?php } ?>
</select>
</div></td>
<td><div class="grid_content editable"><span><?php echo date("Y/m/d", strtotime($records['posted_date'])); ?></span><input type="text" class="gridder_input datepicker" name="<?php echo encrypt("posted_date|".$records['id']); ?>" value="<?php echo date("Y/m/d", strtotime($records['posted_date'])); ?>" /></div></td>
<td>
<a href="gridder_addnew" id="gridder_addnew" class="gridder_addnew"><img src="images/insert.png" alt="Add New" title="Add New" /></a>
<a href="<?php echo encrypt($records['id']); ?>" class="gridder_delete"><img src="images/delete.png" alt="Delete" title="Delete" /></a></td>
</tr>
<?php
}
}
?>
</table>
<?php
break;
case "addnew":
$fname = isset($_POST['fname']) ? mysql_real_escape_string($_POST['fname']) : '';
$lname = isset($_POST['lname']) ? mysql_real_escape_string($_POST['lname']) : '';
$age = isset($_POST['age']) ? mysql_real_escape_string($_POST['age']) : '';
$profession = isset($_POST['profession']) ? mysql_real_escape_string($_POST['profession']) : '';
$date = isset($_POST['date']) ? mysql_real_escape_string($_POST['date']) : '';
mysql_query("INSERT INTO `grid` (fname, lname, age, profession, posted_date) VALUES ('$fname', '$lname', '$age', '$profession', '$date')");
break;
case "update":
$value = $_POST['value'];
$crypto = decrypt($_POST['crypto']);
$explode = explode('|', $crypto);
$columnName = $explode[0];
$rowId = $explode[1];
if($columnName == 'posted_date') { // Check the column is 'date', if yes convert it to date format
$datevalue = $value;
$value = date('Y-m-d', strtotime($datevalue));
}
$query = mysql_query("UPDATE `grid` SET `$columnName` = '$value' WHERE id = '$rowId' ");
break;
case "delete":
$value = decrypt($_POST['value']);
$query = mysql_query("DELETE FROM `grid` WHERE id = '$value' ");
break;
}
?>
1 answers
solution1
0 2015-11-02 03:22:22
You are not passing exam date in your ajax, ie q , but you are using that in $_POST , so pass the value from ajax to your file.
function LoadGrid(dte) {
var gridder = $('#as_gridder');
var UrlToPass = 'action=load';
var value = $('#examdate').val();
gridder.html('loading..');
$.ajax({
url: 'ajax.php',
type: 'POST',
data: {action:"load",q:dte}, <----- this line.
success: function (responseText) {
gridder.html(responseText);
}
});
}
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.
Related Question
populate textbox based on combobox value using ajax
Filter records using ajax jquery and php
Scraping AJAX based value php
Set second combobox value based on ajax call after selecting value in first combobox
passing value from combobox with ajax to another php page
Filter records by value - Laravel
JQuery PHP AJAX filter based on multiple checkbox array
Filter Data based on Multiple Select option with ajax jquery php
php loop through MySQL records - make decision based on row value
How can I display value in textbox from database that value based on selected value from combobox in php?
Related Tags