<?php
//connect to database
$conn = mysqli_connect("localhost", "root", "", "inventory");
if(mysqli_connect_errno($conn)) {
echo "Unable to connect to database server";
}
//query database for items to populate
$sql = "SELECT ITEM_NAME, ITEM_ID FROM item";
$query = mysqli_query($conn, $sql);
echo '<input type="text" id="item1" list="itemname1"/>';
echo '<datalist id="itemname1" name="itemr1" onchange="showitem1(this.value); showecost1(this.value); showuom1(this.value);">'; //change select to datalist
echo '<option value="">Select item</option>';
while($selectedItem = mysqli_fetch_assoc($query)) {
echo "<option value='".$selectedItem['ITEM_NAME']."'>{$selectedItem['ITEM_ID']}</option>";
}
echo '</datalist>'; //change select to datalist
if (isset ($_POST['submit'])) {
$selectedItem = $_POST['desc1'];
}
?>
I have this codes to call the data from the database and display it to the datalist, but the problem is that the onchange event is not working, it supposedly display automatically the other data by choosing a data from the datalist. It is working if I'm just using select tag, but I want to use the datalist, so that the user can input data that is not in the database.
Here is the JS Code:
<script>
function showitem1(str) {
if (str=="") {
document.getElementById("desc1").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("desc1").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php?a="+str,true);
xmlhttp.send();
}
function showecost1(str) {
if (str=="") {
document.getElementById("ecost1").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp1=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp1=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp1.onreadystatechange=function() {
if (xmlhttp1.readyState==4 && xmlhttp1.status==200) {
document.getElementById("ecost1").innerHTML=xmlhttp1.responseText;
}
}
xmlhttp1.open("GET","gethint1.php?b="+str,true);
xmlhttp1.send();
}
function showuom1(str) {
if (str=="") {
document.getElementById("uom1").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp2=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp2=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp2.onreadystatechange=function() {
if (xmlhttp2.readyState==4 && xmlhttp2.status==200) {
document.getElementById("uom1").innerHTML=xmlhttp2.responseText;
}
}
xmlhttp2.open("GET","gethint2.php?c="+str,true);
xmlhttp2.send();
}
</script>
you can use input event
$(document).on('change', 'input', function(){
var options = $('datalist')[0].options;
var val = $(this).val();
for (var i=0;i<options.length;i++){
if (options[i].value === val) {
alert(val);
break;
}
}
});
input event has better support than datalist element, there is indeed no reason to not use it if you are already using datalist element.
Related
I'm working on a simple script where I just want to see request and response that is sent to server and then recieved at client via Ajax. The server is always returning Status 500. What am I doing wrong?
Below is my script.
Javascript:
<script>
function loginJs()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","http://my-website.com/ajax_exp.php",true);
xmlhttp.onreadystatechange=function()
{
alert("State "+xmlhttp.readyState+" Status "+xmlhttp.status);
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
}
xmlhttp.send();
}
</script>
ajax_exp.php
<?php
header('Access-Control-Allow-Origin: http://my-website.com/ajax_exp.php');
add_action('wp_ajax_my_action', 'my_action');
add_action('wp_ajax_nopriv_my_action', 'my_action');
function my_action()
{
$username = 'username';
$password = 'password';
echo $username;
die();
}
?>
1) try removing
header('Access-Control-Allow-Origin: http://my-website.com/ajax_exp.php');
add_action('wp_ajax_my_action', 'my_action');
add_action('wp_ajax_nopriv_my_action', 'my_action');
replacing with
my_action();
You can easily trace the error;
2) Check console log for any javascript errors.
Path is the problem provide your server path ajax/ajax_exp.php
<script>
function loginJs()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","ajax/ajax_exp.php",true);
xmlhttp.onreadystatechange=function()
{
alert("State "+xmlhttp.readyState+" Status "+xmlhttp.status);
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
alert(xmlhttp.responseText);
}
}
xmlhttp.send();
}
</script>
If anyone else is having the same issue, this is what I did and now it works!
Javascript
Replaced xmlhttp.send(); with xmlhttp.send(null);
PHP
<?php
$username = "user";
$password = "password";
print $username;
?>
I have a AJAX script which i was using previously and was able to retrieve data from viewCommentsJson.php as such[{"comments":"Greta"},{"comments":"John"}]. I was wondering if its able to decode the return value such that it display it properly ?
Thanks in advance
Greta John
Main.php
<a onclick="showUser('.$row['ID'].')" method = "POST" action= "viewCommentsJson.php">Show Comments</a>
<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("Post","viewCommentsJson.php?q="+str,true);
xmlhttp.send();
}
</script>
viewCommentsJson.php
$com = $_REQUEST["q"];
include 'connectDatabase.php';
//opening sql table
$selected = mysql_select_db("2000",$dbhandle)
or die("Could not select 2000");
$arr = array();
$data = mysql_query("SELECT comments FROM comment WHERE ID = '$com'");
$rows = array();
while($r = mysql_fetch_assoc($data)) {
$rows[] = $r;
}
print json_encode($rows);
Since you don't mind a jQuery solution, here is how it can be done
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
$.ajax({
type:'post',
url: 'viewCommentsJson.php',
data:{q:str},
success:function(data)
{
data = $.parseJSON(data);
var response;
$.each(data, function(index, value){
response += value+'<br />';
});
$('#txtHint').html(response);
}
});
}
You can refer $.ajax and $.parseJSON for more information.
Note: Your SELECT comments FROM comment WHERE ID = '$com' is prone to SQL injection. At the very least, you should sanitize all incoming data before using it in your query directly.
<a onclick="showUser('1')" href="#?">Show Comments</a>
<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) {
data = eval(xmlhttp.responseText);
for(i=0;i<data.length;i++){
document.getElementById("txtHint").innerHTML = document.getElementById("txtHint").innerHTML + data[i].comments;
}
}
}
xmlhttp.open("Post","viewCommentsJson.php?q="+str,true);
xmlhttp.send();
}
</script>
<div id="txtHint"></div>
First of all remove method and action from A tag and used above code now. Removed some typos
Can someone help me with sending this data to a .php page where I could receive it on my PHP page
javascript:
postToSql(){
var ajax;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
ajax=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
ajax.onreadystatechange=function()
{
if (ajax.readyState==4 && ajax.status==200)
{
alert(ajax.responseText); //receiving response
}
};
var name = $("#entry_1274804157").val();
//alert(name);
var company= $("#entry_1828184698").val();
var phone=$("#entry_2039177352").val();
var email=$("#entry_1545475878").val();
var comments=$("#entry_1846523632").val();
var params = {
"name":name,
"company":company,
"phone":phone,
"email":email,
"comments": comments
};
//var jsonText = JSON.stringify(params);
ajax.open("POST", "view/templates/includes/insertgoogle.php", false);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send("totalJsonStr="+params);
//alert(totalJsonStr);
// alert(params);
return true;
}
</script>
HTML:
<form action="https://docs.google.com/asgsasdfasg/formResponse" method="POST" id="" target="_self" onsubmit="return postToSql();">
EDIT:
This is how I am receiving it:
if(isset($_POST['totalJsonStr']))
{
$jsonVal = json_decode($_POST['totalJsonStr']);
$jsonVal2 = json_decode($jsonVal);
var_dump($_POST['totalJsonStr']);
var_dump($jsonVal);
var_dump($jsonVal2);
$name = $jsonVal2->{'name'};
$company= $jsonVal2->{'name'};
$phone= $jsonVal2->{'name'};
$email= $jsonVal2->{'name'};
$comments= $jsonVal2->{'name'};
mysql_connect("localhost", "root", "") or die(mysql_error());
mysql_select_db("test") or die(mysql_error());
mysql_query("INSERT INTO `testgoogle` ( Name, Company, Phone, Email, Comments )
VALUES ('$name','$company', '$phone', '$email', '$comments')");
Print "Your information has been successfully added to the database.";
return;
}
else
{
die("No Data Found");
}
Where do you create the "ajax" object?
var ajax;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
ajax=new XMLHttpRequest();
}
else
{// code for IE6, IE5
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
from here: http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp
If you want to use $_GET then,
Remove:
ajax.open("POST", "view/templates/includes/insertgoogle.php", true);
Add:
ajax.open("GET", "view/templates/includes/insertgoogle.php", true);
Helpful link: http://www.degraeve.com/reference/simple-ajax-example.php
Using POST Method,
The perfect solution would be, store all values in an array and send the array as a json request using json.stringify().
In php, Use json_decode() to decode your json string.
UPDATE
Add this to your javascript,
<script type="text/javascript">
function postToSql(){
var ajax;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
ajax=new XMLHttpRequest();
}
else
{// code for IE6, IE5
ajax=new ActiveXObject("Microsoft.XMLHTTP");
}
ajax.onreadystatechange=function()
{
if (ajax.readyState==4 && ajax.status==200)
{
alert(ajax.responseText); //receiving response
}
}
var name = "1234";
var company= "1234";
var phone="1234";
var params = {
"name":name,
"company":company,
"phone":phone,
};
var jsonText = JSON.stringify(params);
ajax.open("POST", "view/templates/includes/insertgoogle.php", true);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send("totalJsonStr="+jsonText);
}
</script>
<form action="https://docs.google.com/asgsasdfasg/formResponse" method="POST" id="" target="_self" onsubmit="postToSql();return false;">
Add this to php
<?php
if(isset($_POST["totalJsonStr"]))
{
$jsonVal = json_decode($_POST["totalJsonStr"]);
print $jsonVal->{'name'};
print $jsonVal->{'company'};
print $jsonVal->{'phone'};
}
else
{
die("No Data Found");
}
?>
since nothing was working for me, I finally used jquery ajax which worked.
I have 2 functions that I would like to call from one dropdown menu. It seems I can only get one to work, but not both. Looking for some help sorting this out. Here is the code, thank you.
Function 1
<script type="text/javascript">
function getCredit(str)
{
if (str=="")
{
document.getElementById("credit").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("credit").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getcredit.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();
}
</script>
And here is function 2.
<script type="text/javascript">
function getTerms(str)
{
if (str=="")
{
document.getElementById("terms").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("terms").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","customertermsdropdownquery.php?id="+str,true);
xmlhttp.send();
}
window.onload = function() {
document.getElementsByName('company')[0].onchange();
}
</script>
And here is the form dropdown that calls them.
<td><select name="company" onchange="getTerms(this.value);getCredit(this.value);">
<?php while($row = mysql_fetch_array($result)) {
echo "<option value=\"".$row['company']."\">".$row['company']." (".$row['first']." ".$row['last'].")</option>"; } ?></select></td>
I use div in the form to display php.
<div id="terms"></div>
and
<div id="credit"></div>
I can get either one to work by itself, just not together. Thanks for your help.
Totally understandable that you want to keep them separated. How about create a new function like this.
function getTermsAndCredits(value) {
getTerms(value);
getCredits(value);
}
Then in the onchange event call it like this
<td><select name="company" onchange="getTermsAndCredits(this.value);">
Here is a fiddle which should give you a better idea. I don't believe it's necessary to call the onload functions as you have in your code currently.
<script type="text/javascript">
function centerItem(id,size)
{
var pad = (window.innerWidth - size)/2;
document.getElementById(id).style.marginLeft = pad+"px";
document.getElementById(id).style.marginRight = pad+"px";
}
function login()
{
document.getElementById('box').innerHTML="<img src="img/pleasewait.gif" />";
var xmlhttp;
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('box').innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","http://[lan ip]/Athena/lib/ajax/login.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("email="+email+"&pass="+pass);
}
</script>
That is in my <head> section, and I'm calling it using this.
<script type="text/javascript">centerItem('login',210);</script>
However, I'm getting an error saying "Uncaught ReferenceError: centerItem is not defined
(anonymous function)"
Any thoughts?
document.getElementById('box').innerHTML="<img src="img/pleasewait.gif" />";
Should really be:
document.getElementById('box').innerHTML="<img src=\"img/pleasewait.gif\" />"
you need to escape the double quotes when creating the image tag.
And you should cache your selected elements. The result would be something like:
function centerItem(id, size) {
var pad = (window.innerWidth - size)/2,
elem = document.getElementById(id);
elem.style.marginLeft = pad+"px";
elem.style.marginRight = pad+"px";
}
function login() {
var xmlhttp;
var box = document.getElementById('box');
box.innerHTML="<img src=\"img/pleasewait.gif\" />";
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) {
box.innerHTML=xmlhttp.responseText;
}
};
xmlhttp.open("POST","http://[lan ip]/Athena/lib/ajax/login.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("email="+email+"&pass="+pass);
}