My Working scenario is, i have 4 types of Pen
1-Diamond
2-Gold
3- Bronze
4- Silver
i want when someone select Diamond Pen on the bottom input he will type quantity so if he select 1-Diamond Pen so the amount should be vary with each other, on the same way all 4 types pen rates should be vary.
My Code is
ajax.php
<!DOCTYPE html>
<html>
<head>
<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 (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>
<!-- <input type="text" name="users" onchange="showUser(this.value)"> -->
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Diamond</option>
<option value="2">Gold</option>
<option value="3">Bronze</option>
<option value="4">Silver</option>
</select>
<!-- <input type="submit" name="users"> -->
</form>
<br>
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
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 = intval($_GET['q']);
$con = mysqli_connect('localhost','root','','fm_all');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM all_company WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
echo "<table>
<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['name'] . "</td>";
echo "<td>" . $row['city'] . "</td>";
echo "<td>" . $row['province'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
</body>
</html>
The problem is only Drop Box value is working, i do not know how to attach input quantity box with it. please help.
Note: this code is working according to id when i select drop box value so it show according to id but i did not attach it with quantity.
You can achieve this by following way in case you don't want for perform any operation on form submit
call showUser() on onkeyup for input and provide it some id may be quantity
call showUser() on onchange for select box and also provide it some id can be pen
function showUser(){
quantity = $("#quantity").val();
selected_pen = $("#pen").val();
if (quantity != null && selected_pen != null && typeof(quantity) !='undefined'){
your ajax calling code
}
}
you can call above function onchange for select box and on onkeyup in input textbox. But with above mentioned way it will call ajax every time there is change in your text field or select box.
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)
// A major problem is once a user selects a radiobutton and hits submit the value, it sends an array. I would like to place those individual queries(route_no, to_city, from_city, price) on the nextpage.php page in a table next to their table headers or next to the tags. I cant do this because, confirm value sends all queries as a single string/array. How can I fix this please help me.enter image description here
here is my html page
<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 (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET","display3.php?q="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<select name="to_city" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="Sydney">Sydney</option>
<option value="Brisbane">Brisbane</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
</body>
</html>
here is my display3.php page
<!DOCTYPE html>
<style>
td{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
</style>
<body>
<?php
$q = strval($_GET['q']);
$con = mysqli_connect('localhost','root','','mydb');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"flights");
$sql="SELECT * FROM flights WHERE to_city = '".$q."'";
$result = mysqli_query($con,$sql);
?>
<form action="nextpage.php" method="get">
<?php
echo "<table>
<tr>
<th>Route_no</th>
<th>to_city</th>
<th>from_city</th>
<th>price</th>
<th>Confirm</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
$all_values = $row['route_no'] .",".$row['to_city'].",".$row['from_city'].",".$row['price'];
echo "<tr>";
echo "<td>" . $row['route_no'] . "</td>";
echo "<td>" . $row['to_city'] . "</td>";
echo "<td>" . $row['from_city'] . "</td>";
echo "<td>" . $row['price'] . "</td>";
echo "<td><input type='radio' name='Confirm' value='".$all_values."'></td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
<input type="submit" value="Submit">
</form>
</body>
</html>
here is my nextpage.php
<!DOCTYPE html>
<head>
<style>
td{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
</style>
<body>
<h1>Booking Details</h1>
<h2>Flight No.</h2>
<h2>to_city</h2>
<h2>from_city</h2>
<h2>Price</h2>
<?php
echo $_GET['Confirm'];
?>
<table >
</body>
</head>
</html>
use explode function to form a array separated by , .
<?php
$str = "4,sydney,canberra,120.00";
print_r (explode(",",$str));
?>
out put
Array
(
[0] => 4
[1] => sydney
[2] => canberra
[3] => 120.00
)
Yes explode can work like so, in nextpage.php
<!DOCTYPE html>
<head>
<style>
td{
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
</style>
<?php
$details = explode(",", $_GET['Confirm']);
?>
</head>
<body>
<h1>Booking Details</h1>
<table>
<tr>
<th>Flight No.</th>
<td><?=$details[0]?></td>
</tr>
<tr>
<th>to_city</th>
<td><?=$details[1]?></td>
</tr>
<tr>
<th>from_city</th>
<td><?=$details[2]?></td>
</tr>
<tr>
<tr>
<th>Price</th>
<td><?=$details[3]?></td>
</tr>
</table>
</body>
</html>
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'm really new to all HTML/JS/PHP but I want to create a simple login page thats connected to a database. User provide username&password, once sumbit button is clicked the webpage will change to user's information page.
So far, I have my data set up and my PHP function is working fine (I tested it with POSTMAN)
, however, I cannot get my HTML/JS working. I've been using the xmlhttp method to talk with PHP but failed
So, here is my html code
`
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>login page</title>
<style type ="text/css">
h3{
text-align:center;
margin-top:20px;
}
p{
text-align:center;
}
div{
text-align:center;
}
</style>
</head>
<body>
<h3>Login Page</h3>
<form name="login">
<p>username: <input id="user" type="text" name="username" /></p>
<p>password: <input id="pass" type="password" name="password" /></p>
<p><input type="button" value ="Submit" onclick="showUser(document.getElementById('user').value, document.getElementById('pass').value)" /></p>
</form>
<br><br>
<div id="Info"><b>Student Infomation Table</b></div>
<script type="text/javascript">
function showUser(user, pass) {
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("Info").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","login.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("username="+user+"&password="+pass);
}
</script>
</body>
</html>
`
Here is the PHP
<?php
/*
* Checks the login
*/
include_once '/include/post_check.php';
// change header
header('Content-Type: application/json');
//check for post
if (checkPOST("username") && checkPOST("password")) {
$user_pass = $_POST['password'];
$user_name = $_POST['username'];
if ($user_pass == "" || $user_name == "") {
$temp = array("result" => "false", "reason" => "empty fields");
echo (json_encode($temp));
die();
}
} else {
$temp = array("result" => "false", "reason" => "not enough fields");
echo (json_encode($temp));
die();
}
// connect to MySQL
$con = mysqli_connect("localhost", "root", "xxx", "xxx");
// Check connection
if (mysqli_connect_errno()) {
// Print out reason
echo "Failed to connect to MySQL: " . mysqli_connect_error();
die();
}
if($user_name == "xxx" && $user_pass =="xxx"){
// write query (teacher's account)
$query = "SELECT *
FROM STUDENT";
}
$result = mysqli_query($con, $query);
echo "<table border='2'>
<tr>
<th>ID</th>
<th>Username</th>
<th>Password</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
echo "<tr>";
echo "<td>" . $row['id'] . "</td>";
echo "<td>" . $row['username'] . "</td>";
echo "<td>" . $row['password'] . "</td>";
echo "</tr>";
}
echo "</table>";
mysqli_close($con);
?>
checkPOST() function
<?php
function checkPOST($field){
return (isset($_POST[$field]));
}
?>
the ERROR is simple one. You missed the method tag and ACTION tag in your form...without method and action tag inside FORM, you cant submit your form data.
so change form tag like this,
< form name="login" method="post" action="enter php you want to submit">
use this in html
Name:
use this in php
$name=$_POST ['name'];
mysql_connect(your server);
mysql_select_db (your database);
mysql_query (insert into your database);