This is a two fold question. How do I update the data (without page reload) on the page when the datepicker is changed?
Also how do i pass the selected date to the dtpickerdate in my sql statement?
Here is my example code
<html>
<head>
<link href="../css/jquery/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="../js/jquery-1.9.1.js"></script>
<script src="../js/jquery-ui.js"></script>
</head>
<body>
<?php include("../navbar.php"); ?>
<p>Date: <input type="text" id="datepicker" value="<?php echo date("m/d/Y"); ?>" /></p>
<script type="text/javascript">
$(function() {
$("#datepicker").datepicker();
});
</script>
<table>
<?php
$sqltext = "SELECT * FROM data where startdate=dtpickerdate";
$result = $mysqli->query($sqltext);
while($row = $result->fetch_assoc()) {
echo "<tr><td>".$key."</td>";
echo "<td>".$row['sun']."</td><td>".$row['mon']."</td><td>".$row['tues']."</td><td>".$row['wed']."</td><td>".
$row['thurs']."</td><td>".$row['fri']."</td><td> ".$row['sat']."</td>";
}}
?>
</table>
</body>
</html>
You need AJAX, first thing create a new php file with your query function that will receive a $_POST parameter with the value of the datepicker:
getData.php
<?php
$dtpickerdate = isset($_POST['dtpickerdate']) ? $_POST['dtpickerdate'] : NULL
$sqltext = "SELECT * FROM data where startdate = $dtpickerdate";
$result = $mysqli->query($sqltext);
while($row = $result->fetch_assoc()) {
echo "<tr><td>".$key."</td>";
echo "<td>".$row['sun']."</td><td>".$row['mon']."</td><td>".$row['tues']."</td> <td>".$row['wed']."</td><td>".$row['thurs']."</td><td>".$row['fri']."</td><td> ".$row['sat']."</td>";
}
?>
Now you listen to the change event on your input and use AJAX to call your PHP, when the call completes you update your table:
$('#datepicker').change(function(){
$.post('getData.php',{dtpickerdate : $(this).val()}, function(response){
$('table').html(response);
});
});
Related
can anyone tell me how to retrieve data from database and display it in text box in html by using php ajax and jquery? it will just only display if the button is click. Thanks for helping!
register.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>registion</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function () {
$('#btn').click(function () {
$.post(
'checkUserName.php',{
username:$('#username').val()
},function(data,textStatus){
$('#result').html(data);
});
});
});
</script>
</head>
<body>
<h1>registion</h1>
<form action="" method="post">
userNameļ¼<input type="text" name="username" id="username">
<input type="button" value="Verify userName" id="btn">
<br>
<span id="result"></span>
</form>
</body>
</html>
checkUserName.php
<?php
$uname = $_POST['username'];
$conn = mysqli_connect('localhost','root','root','db_user');
$query = "SELECT * from tb_user where name = '$uname' ";
$result = mysqli_query($conn,$query);
$nums = mysqli_num_rows($result);
//echo $query;
//echo $nums;
if($nums > 0){
echo "Username already exist";
}else{
echo "Username OK";
}
mysqli_close($conn);
Next time please post together what have you done so far. From there only the community will be able to help you.
HTML Code :
<input type="text" id="input-box">
<button type="button" id="btn_get">Click</button>
Ajax Code :
$('#btn_get').on('click', function(){
$.ajax({
type : "get",
url : '/path/to/php/file',
success : function(data)
{
$('#input-box').val(data);
}
});
});
PHP Code :
//get data from db here
$data = 'foo';
echo $data;
I'm having trouble with completing an autocomplete function in Jquery with data from database. Whenever I type something I always get 'no results found' message. I want it to display a country name as the user is typing.
jquery.php
<?php
require "database/database.php";
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="CSS/style.css">
<script type="text/javascript" src="jquery/jquery-1.11.3.min.js"></script>
<script src="jquery/jquery-ui.min.js"></script>
</head>
<body>
<form action="" method="post">
<p><label>Country:</label><input type='text' name='country' value='' class='auto'></p>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('.auto').autocomplete({
source:"suggested.php",
MinLength: 2
});
});
</script>
</body>
</html>
This is my suggested.php page:
<?php
require "database/database.php";
$term = trim(strip_tags($_GET['term']));
$data = mysql_query("SELECT * FROM countries WHERE countryname LIKE '%".$term."%'");
while($row = mysql_fetch_assoc($data)) {
$data[] = array(
'label' = $row['countryname'],
'value' = $row['countryname']
);
}
echo json_encode($data);
flush();
}
?>
In the database I have a table named countries and within it countryid, countryname and countryflag. I need to extract only the countryname column.
I've tried using $_GET['term'] and $_REQUEST['term'].
I've tried different tutorials but none of them seems to work.
If you have any suggestions please tell me.
Thank you
It will be delay your execution if you run query in every time when you type,because you can input value as a query condition value!
I can give you some I tested logic is run your query first when document is loaded and store as a json data type,then you can set source data in autocomplete
This can reduce your page delay respond time by sql query running
<form action="" method="post">
<p><label>Country:</label><input type='text' name='country' value='' class='auto'></p>
</form>
<script type="text/javascript">
$(document).ready(function () {
var source = [];
$.ajax({
url : "suggested.php",
data : "GET",
dataType : "json",
success : function(data){
for(var i in data){
source.push(data[i]);
}
}
});
$('.auto').autocomplete({
source: source,
MinLength: 2
});
});
</script>
suggested.php
<?php
require "database/database.php";
$data = mysql_query("SELECT * FROM countries");
$result = array();
while($row = mysql_fetch_assoc($data)) {
$result[] = array(
'label' = $row['countryname'],
'value' = $row['countryname']
);
}
echo json_encode($result);
flush();
}
?>
My process is like this: I have a dropdown menu and text box. When I select an id (unique id) from dropdown and then click submit button want to display corresponding name to text box.
My database fields :
id (Auto increment)
AgencyName_id (unique id)
Name
dispay.html
<select name="agencyID_dwn" class="idLookup_dwn" id="agencyID_dwn" >
<option selected>...Select...</option>
<?php
while($row = mysqli_fetch_array($result)){
?>
<option value="<?php echo $row['AgencyName_id'];?>">
<?php echo $row['AgencyName_id'];?></option>
<?php
}
?>
</select>
// for input text
<input type="text" id="testid">
// submit button
<input type="submit" name="lookupSubmit">
dataGet.php
<?php
if (isset($_POST["lookupSubmit"])) {
$user_id=$_POST['agencyID_dwn'];
$query = "select * from AgencyHome where AgencyName_id = '$user_id'" ;
$result=mysqli_query($db, $query);
$data = mysqli_fetch_assoc($result);
echo json_encode($data);
exit();
}
?>
myjson.js
<script src="//code.jquery.com/jquery-1.11.2.min.js"> </script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('#agencyID_dwn').change(function(){
var reg_number = $(this).val();
var data_String;
data_String = 'reg_number='+reg_number;
$.post('dataGet.php',data_String,function(data){
var data= jQuery.parseJSON(data);
$('#testid').val(data.Name);
});
});
});
</script>
When i click submit button
I got the database results as array in "dataGet.php".But in textbox did not display the result.Any mistake in my code?
try like this in dataGet.php,
while ($row = mysqli_fetch_assoc($result)) {
echo $row["Name"];
}
here is your answer
your index.php
<?php
$conn = mysqli_connect("localhost","root","","test_db");
?>
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="//code.jquery.com/jquery-1.11.2.min.js"> </script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"> </script>
<script type="text/javascript">
$(document).ready(function(){
$('#agencyID_dwn').change(function(){
var reg_number = $(this).val();
var data_String;
data_String = 'reg_number='+reg_number;
$.post('dataGet.php',data_String,function(data){
console.log(data);
var data= jQuery.parseJSON(data);
$('#testid').val(data.Name);
});
});
});
</script>
<body>
<form>
<select name="agencyID_dwn" class="idLookup_dwn" id="agencyID_dwn" >
<option selected>...Select...</option>
<?php
$query = "select AgencyName_id from AgencyName";
$result = mysqli_query($conn,$query);
while($row = mysqli_fetch_array($result)){
?>
<option value="<?php echo $row['AgencyName_id'];?>">
<?php echo $row['AgencyName_id'];?></option>
<?php
}
?>
</select>
// for input text
<input type="text" id="testid">
// submit button
<input type="submit" name="lookupSubmit">
</form>
</body>
</html>
and your dataGet.php file as bellow
<?php
$conn = mysqli_connect("localhost","root","","test_db");
$reg_number=$_POST['reg_number'];
$query = "select * from AgencyName where AgencyName_id = '$reg_number'" ;
$result=mysqli_query($conn, $query);
$data = mysqli_fetch_assoc($result);
// print_r($data);
echo json_encode($data);
exit();
?>
just ccheck your table name and all will work
I'm trying to display data from mysql on the same page that i've got my form with checkboxes. The question is how to write js script that gonna display it.
The code is:
<form id="myForm" action="pdoakcja.php" method="post">
<!--Instruktor: <input type="text" name="name" /> -->
Permissions:<input type="checkbox" name="M1" value="M1" />M1
<input type="checkbox" name="M2" value="M2" />M2
<input type="submit" value="Szukaj" />
</form>
<div id='name-data'>Instruktorzy o podanych uprawnieniach:</div>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script>
............??????
</script>
You could solve your problem by using jquery form plugin, which will help you to submit the form without having to reload the page and show you the return from your target page in the same page. Just follow the instructions:
Download this jquery form plugin first and save it.
Then
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- This jquery.form.js is for Submitting form data using jquery and Ajax -->
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
success: showResponse
};
// bind form using 'ajaxForm'
$('#myForm').ajaxForm(options);
});
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
if(responseText==1){
$("#error").html('No Result Found');
} else{
$("#result").html(responseText);
}
}
</script>
<form id="myForm" enctype="multipart/form-data" action="pdoakcja.php"
method="post" name="myForm">
<!--Instruktor: <input type="text" name="name" /> -->
Permissions:<input type="checkbox" name="M1" value="M1" />M1
<input type="checkbox" name="M2" value="M2" />M2
<input type="submit" value="Szukaj" />
</form>
<span id="error"></span>
<span id="result"></span>
YOUR pdoakcja.php file: (I have got the following code from your another post here, haven't checked it though)
<?php
$query = mysql_query("SELECT * FROM permissions WHERE m LIKE '".$_POST['M1']."' OR m LIKE '".$_POST['M2']."' OR mn LIKE '".$_POST['MN1']."' ");
if($query) {
while($permissions = mysql_fetch_assoc($query)){
$query2 = mysql_query("SELECT name_surname FROM instruktorzy WHERE instruktor_id='".$permissions['instruktor_id']."'");
while($Mdwa = mysql_fetch_assoc($query2)){
echo "<p style=\"font-size: 14px; font-family: Helvetica; background-color: #FFFFFF\"> ".$Mdwa['name_surname']."<br />" ; "</p>" ;
}
}
} else {echo "1";}
?>
I hope this will work for you. For detail information you could study the jquery form plugin's website.
Heres a pseudo example showing how you can do it with jQuery, this will also update as you click the check box so you could remove the submit altogether;
You say you already have a database doing the job so I wont include that. Just copy and paste.
<?php
//Some pseudo data kinda as your receive it from a query
$datafromSql = array(
array('id'=>1,'permission'=>'M1','theData'=>'User has M1 permission'),
array('id'=>2,'permission'=>'M2','theData'=>'User has M2 permission'),
array('id'=>3,'permission'=>'M1','theData'=>'User has M1 permission'),
array('id'=>4,'permission'=>'M1','theData'=>'User has M1 permission'),
);
//Access the data
if($_SERVER['REQUEST_METHOD']=='POST'){
$is_ajax = false;
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) === 'xmlhttprequest'){
$is_ajax = true;
}
//pseudo code, really you would put your query here
// SELECT theData FROM your_table WHERE permission=POST_VALUE ... ...
//And then format your output
$result=array();
foreach($datafromSql as $row){
if($is_ajax == true){
foreach($_POST as $key=>$value){
if($_POST[$key] == 'true' && $row['permission']==$key){
$result[]=$row['theData'].'<br />';
}
}
}else{
foreach($_POST as $key=>$value){
if($_POST[$key] == $row['permission']){
$result[]=$row['theData'].'<br />';
}
}
}
}
$result = implode('<hr />',$result);
//AJAX Response, echo and then die.
if($is_ajax === true){
header('Content-Type: text/html');
//example output sent back to the jQuery callback
echo $result;
//echo '<pre>'.print_r($_POST,true).'</pre>';
die;
}
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" charset="utf-8"></script>
<script type="text/javascript">
function update(){
$.post('./<?php echo basename(__FILE__)?>',
{
M1: $("#M1").is(':checked'),
M2: $("#M2").is(':checked')
},
function(data) {
$('#result').replaceWith('<div id="result"><h1>The Result:</h1>'+ data +'</div>');
});
}
</script>
</head>
<body>
<form method="POST" action="<?php echo basename(__FILE__)?>">
Permissions:
<input type="checkbox" id="M1" name="M1" value="M1" onChange="update()"/>M1
<input type="checkbox" id="M2" name="M2" value="M2" onChange="update()"/>M2
<input type="submit" value="Szukaj" />
</form>
<p id='result'><?php echo isset($result)?$result:null;?></p>
</body>
</html>
You should use the PHP MySQL functions to retrieve the data you want from your database and then display them via PHP, not javascript.
Especially have a look at this: mysql_fetch_assoc - there is a fully working example.
while entering the data in the textfield on the browser, it should fetch the data from the database and display accordingly. (ex: like google).
Here is my php code:
<?php
mysql_connect("localhost","root","MobixMySQL") or die(mysql_error());
mysql_select_db("filter") or die(mysql_error());
$partialStates = $_POST['partialStates'];
$states = mysql_query("SELECT name FROM list1 WHERE name LIKE "%$partialStates%"");
while($state = mysql_fetch_assoc($states)) {
echo "<div>".$state['name']."</div>";
}
?>
And below is my html code:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function getStates(value){
$.post("getStates.php",{partialStates:value},function(data){
$("#results").html(data);
});
}
</script>
</head>
<body>
<input type="text" onKeyUp="getStates(this.value)" >
<div id="results"></div>
</body>
</html>
Pls suggest me where am wrong....!!!
Error with your quotes in the SQL...along with injection. Check out PDO for future development
$partialStates = mysql_real_escape_string($_POST['partialStates']);
$states = mysql_query("SELECT `name` FROM list1 WHERE `name` LIKE '%$partialStates%'");
EDIT
Since you're using jQuery trying changing your onkeyup event. If you are still getting errors use something like FireBug or your browsers javascript debugger to check for further errors. Try the following (untested):
<script type="text/javascript">
$(document).ready(function() {
$('input#myFilter').keyup(function(event) {
$.post("getStates.php",{partialStates:$(this).val()},function(data){
$("#results").html(data);
});
}).keydown(function(event) {
if (event.which == 13) {
event.preventDefault();
}
});
});
</script>
</head>
<body>
<input type="text" id="myFilter">
<div id="results"></div>
Try this
$states = mysql_query("SELECT name FROM list1 WHERE name LIKE '%".mysql_real_escape_strings($partialStates)."%'");
Instead of this
$states = mysql_query("SELECT name FROM list1 WHERE name LIKE "%$partialStates%"");