im having a problem with this code , the select statement returns value only when the parameter is integer ... look at the code ..my problem is when the value of the dropdown ( select ) is an integer , the select statement works fine , otherwise it returns nothing .
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
<body>
<form>
<select name="users" onchange="showUser(users.value)">
<option value="">choose a subject</option>
<option value="223">English</option>
<option value="2">ar</option>
<option value="161">علوم عامة</option>
<option value="ar">عربي</option>
</select>
<br>
<div id="txtHint"><b>Course info will be listed here.</b></div>
</p>
<p> </p>
<div class="clear"></div></div></div>
<div class="clear"></div>
</div>
</div>
</form>
</body>
//---------------and the getuser.php is
<?php
require_once("_gradeviewr.php");
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','root','','evang_www');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"evang_www");
$sql="SELECT * FROM uploaded WHERE subject = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table border='1'>
<tr>
<th>subject</th>
<th>Date from</th>
<th>Date To</th>
<th>filename</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['subject'] . "</td>";
echo "<td>" . $row['datefrom'] . "</td>";
echo "<td>" . $row['dateto'] . "</td>";
echo "<td>" . $row['filename'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
Try this
HTML
<select name="users" id="urselectboxId">
Script
$('#urselectboxId').on('change',function(){
var str=$(this).val();
if (str=="")
{
$("txtHint").text("");
return;
}
else
{
$.ajax({
url:"getuser.php",
type:"get",
dataType:'json',
data: {q:str},
success:function(data){
// codes....
}
});
}
});
Related
I want to use the select option to update the table. these are the code and when I try it, no data have been display to table..im using js but still nothing happens..it only display the fields but no data in it. help me pls.
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">150-2012-00007</option>
<option value="2">120-2013-001</option>
<option value="3">130-2012-0022</option>
<option value="4">130-2012-0554</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
this is the code for the getuser.php
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_GET['q']);
$db_host = 'localhost'; // Server Name
$db_user = 'root'; // Username
$db_pass = ''; // Password
$db_name = 'ofes'; // Database Name
$conn = mysqli_connect($db_host, $db_user, $db_pass, $db_name);
if (!$conn)
{
die ('Failed to connect to MySQL: ' . mysqli_connect_error());
}else{
echo "";
}
$sql="SELECT * FROM tbl_student WHERE Id_number = '".$q."'";
$result = mysqli_query($conn,$sql);
echo "<table>
<tr>
<th>Name</th>
<th>Id number</th>
<th>Passwordr</th>
<th>Course</th>
<th>School Year</th>
<th>Semester</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['name'] . "</td>";
echo "<td>" . $row['Id_number'] . "</td>";
echo "<td>" . $row['password'] . "</td>";
echo "<td>" . $row['course'] . "</td>";
echo "<td>" . $row['school_year'] . "</td>";
echo "<td>" . $row['semester'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($conn);
?>
</body>
</html>
basically when I choose from the select option the table will be updated automatically.
Based on this example http://www.w3schools.com/php/php_ajax_database.asp
i have made some search and found this sample which looks what i need
The HTML
<html>
<head>
<script>
var xmlhttp;
function showUser(str,age)
{
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Browser does not support HTTP Request");
return;
}
var url="getuser.php";
url=url+"?q="+str+"&a="+age+"&c="+c;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
</script>
</head>
<body>
<form>
Select a User:
<select name="users" id="users">
<option value="1">Marko</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
Select an age:
<select name="age" id="age">
<option value="1">1</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
</select>
<input type="text" name="c" id="c" value="2016-06-01">
<input type='button' value='Refresh Data' onclick="showUser(document.getElementById('users').value,document.getElementById('age').value,document.getElementById('c'))">
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
and PHP
<?php
$q=$_GET["q"];
$a=$_GET["a"];
$c=$_GET["c"];
$con = mysql_connect('localhost', 'username', 'password');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("databasename", $con);
$sql="SELECT * FROM data WHERE id = '".$q."' and website = '".$a."' and date = '".$c."'";
$result = mysql_query($sql);
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['date'] . "</td>";
echo "<td>" . $row['imp'] . "</td>";
echo "<td>" . $row['rev'] . "</td>";
echo "<td>" . $row['cpm'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysql_close($con);
?>
How can i add the date picker to the search, for the moment it works only with two <select> but i want to be able to add a Start date & End date
I tried adding <input type="text" name="c" id="c" value="2016-06-01"> but could not figured out where the mistake is
you need to add the c variable as a parameter of your showuser function.
function showUser(str,age, c)
I have a functioning script that takes an option value, stores it in a variable q and sends an xmlhttp get call to a php script that queries a database a returns an html table with results. What I'm trying to do is update this to jQuery.ajax() with get method format ... any help is appreciated.
example_ajax_html_js.php:
<html>
<head>
<script src="//code.jquery.com/jquery-2.2.1.min.js"></script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","/getuser.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="Sophia">Sophia</option>
<option value="Daniel">Daniel</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
which calls getuser.php:
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = $_GET['q'];
// connect to db
$sql="SELECT * FROM table WHERE first = '".$q."'";
$result = mysqli_query($web_dbi, $sql) or die("Error " . mysqli_error($web_dbi));
echo "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>extrainfo1</th>
<th>extrainfo2</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['first'] . "</td>";
echo "<td>" . $row['last'] . "</td>";
echo "<td>" . $row['extrainfo1'] . "</td>";
echo "<td>" . $row['extrainfo2'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($web_dbi);
?>
</body>
</html>
Even easier than using jQuery's ajax method, I'd use the load method. Makes your job a piece of cake:
function showUser(str) {
if (str == "") {
$("#txtHint").html("");
return;
}
$("#txtHint").load("/getuser.php?q="+str);
}
That's it!
http://api.jquery.com/load/
I am trying to pass the value of a dynamically created JavaScript form (or pretty much just one select/option field of it) to another php file.
Here's the whole code of my request.php (which happens to use php, JavaScript and HTML):
<?php
include ("DbVerbindung.php");
?>
<!-- Verbindung zur Datenbank aufbauen -->
<?php
include "header.php";
?>
<!-- Kopfteil des Webfrontends holen -->
<!-- Hauptinhaltbereich -->
<div class="float">
<script>
<!-- dynamische Abfrage für Optionsfeld -->
function showUser(str) {
if (str=="") {
document.getElementById("gang").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("gang").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getStudiengang.php?q="+str,true);
xmlhttp.send();
}
</script>
<h2>Daten des Wählers auswählen</h2>
<table id="auswahl">
<!-- Optionen zur Abfrage der Wählerdaten -->
<form action="speichern.php" method="POST">
<tr>
<td>Fachbereich:</td>
<td id="fachbereich">
<select size="1" maxlength="20" name="fachbereich" onChange="showUser(this.value)">
<option>Fachbereich auswählen</option>
<?php $sql = "SELECT * FROM bereich";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}
?>
</select>
</tr>
<tr>
<td>Studiengang:</td>
<td id="gang"></td>
</tr>
<tr>
<td>Geschlecht:</td>
<td id="geschlecht">
<select size="1" maxlength="20" name="geschlecht">
<?php $sql = "SELECT * FROM geschlecht";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}
?>
</select></td>
</tr>
<tr>
<td>Name:</td>
<td id="name"><select size="1" maxlength="30" name="name" onClick="getName.p"</td>
</tr>
<tr>
<td>Wahllokal:</td>
<td id="lokal">
<select size="1" maxlength="50" name="lokal">
<?php $sql = "SELECT * FROM lokal";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}
?>
</select></td>
</tr>
<tr>
<td id="submit">
<input type="submit" name="waehlt" value="Wähler wählt..!">
</td>
</tr>
</form>
</table>
</div>
<?php
include "footer.php";
?>
The JS script uses yet another php file -> getStudiengang.php. Here's its code:
<?php
$q = intval($_GET['q']);
include ("DbVerbindung.php");
$sql = "SELECT * FROM studiengang WHERE fs_b = '" . $q . "'";
$result = mysql_query($sql);
echo "<select size='1' name='studiengang'>";
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}
echo "</select">;
?>
And last but not least, the php the values should get passed to (speichern.php):
if ($_POST[waehlt]) {
$uhrzeit = date('G:i:s');
echo "Wähler tritt seine Wahl an. Uhrzeit: $uhrzeit<br>";
echo "Übergebene Daten:<br>";
echo "Fachbereich: ";
$sql = "SELECT * FROM bereich where b_id = '" . $_POST[fachbereich] . "'";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "$row[1]<br>";
}
echo "Studiengang: ";
echo $_POST['studiengang'];
/*$sql = "SELECT * FROM studiengang where s_id = '" . $_POST[studiengang] . "'";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "$row[1]<br>";
}
*/
echo "Geschlecht: ";
$sql = "SELECT * FROM geschlecht where g_id = '" . $_POST[geschlecht] . "'";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "$row[1]<br>";
}
echo "Wahllokal: ";
$sql = "SELECT * FROM lokal where l_id = '" . $_POST[lokal] . "'";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo "$row[1]<br>";
}
}
Note that all variables except the 'studiengang' variable (which happens to be dynamically generated) gets passed and displayed just fine.
Any help will be appreciated!
You will need to use .appendChild so the browser understands that the item is added to the form. To make the fewest modifications to your code that should still work,
replace document.getElementById("gang").innerHTML=xmlhttp.responseText; with:
var gang = document.getElementById("gang");
while (gang.firstChild) {
gang.removeChild(gang.firstChild); //clear all elements
}
var div = document.createElement('div');
/*make a div to attach the response text to
if you didn't send the select in the responseText, you could createElement('select')*/
div.innerHTML = xmlhttp.responseText;
gang.appendChild(div); //attach the select
We finally resolved the issue.
For whatever reason it was necessary to 'hardcode' the select-box in HTML already and have it not created dynamically by Javascript.
Javascript now does only dynamically generate the option-fields within the section, this does in fact solve the issue.
Latest version with changes already applied:
JavaScript in request.php:
<script>
function showUser(str) {
if (str=="") {
document.getElementById("gang").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("gang").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getStudiengang.php?q="+str,true);
xmlhttp.send();
}
</script>
Request.php (important piece of code):
<form action="save.php" method="POST">
<tr>
<td>Studiengang:</td>
<td>
<select id="gang" size="1" name="studiengang"></select>
</td>
</tr>
</form>
getStudiengang.php:
<?php
$q = intval($_GET['q']);
include ("DbVerbindung.php");
$sql = "SELECT * FROM studiengang WHERE fs_b = '" . $q . "'";
$result = mysql_query($sql);
while ($row = mysql_fetch_array($result)) {
echo '<option value="' . $row[0] . '">' . $row[1] . '</option>';
}
?>
Thanks for all the help. The answer given by serakfalcon has a good point and may be useful later on. It's not an requirement though.
This is the main page: Named 'index.php'
<html>
<head>
<script src='jquery.min.js' ></script>
<script>
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="No match found";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
function adduser()
{
var fname=document.getElementsByName("fname")[0].value;
var lname=document.getElementsByName("lname")[0].value;
var age=document.getElementsByName("age")[0].value;
var ht=document.getElementsByName("ht")[0].value;
var job=document.getElementsByName("job")[0].value;
var xmlhttp;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","adduser.php
q="+fname+"&w="+lname+"&e="+age+"&r="+ht+"&t="+job,true);
xmlhttp.send();
}
$(document).ready(function(){
$("#hidelist").click(function(){
$("#list").hide("fast");
return false;
});
});
</script>
</head>
<body>
<button type='button' onclick='showUser(this.value)' id='getdata' value='1' >get data</button>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
This is the page when the button with id='getdata' is clicked. Named 'getuser.php'
<?php
error_reporting(0);
$q = intval($_GET['q']);
$con = mysqli_connect('localhost','root','rathena','ajax_demo');
if (!$con)
{
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user";
$result = mysqli_query($con,$sql);
echo "<div id='list' ><table border='1' style='margin-top: 0px;' >
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result))
{
echo "<tr>";
echo "<td>" . $row['FirstName'] . "</td>";
echo "<td>" . $row['LastName'] . "</td>";
echo "<td>" . $row['Age'] . "</td>";
echo "<td>" . $row['Hometown'] . "</td>";
echo "<td>" . $row['Job'] . "</td>";
echo "</tr>";
}
echo "</table></div>";
echo "<input type='text' name='fname' value='Firstname' /><br />";
echo "<input type='text' name='lname' value='Lastname' /><br />";
echo "<input type='text' name='age' value='Age' /><br />";
echo "<input type='text' name='ht' value='Hometown' /><br />";
echo "<input type='text' name='job' value='Job' /><br />";
echo "<button style='display: non;' type='button' onclick='adduser()' >add user data</button>";
echo "<button style='display: non;' type='button' id='hidelist' >hide list</button>";
mysqli_close($con);
?>
But, what I want to achieve is, to hide the div with id='list' whenever I click the button with id='hidelist'. But the jQuery code dont catch the id of buttons with the page I retrieved. In this line:
$(document).ready(function(){
$("#hidelist").click(function(){
$("#list").hide("fast");
return false;
});
});
I appreciate for any ideas regarding this problem. Thanks :)
You'll have to delegate the event to the closest non-dynamic parent element, as the #hidelist element doesn't exist when you attach the event handler :
$(document).ready(function(){
$('#txtHint').on('click', '#hidelist', function(){
$("#list").hide("fast");
});
});