I hava set up AJAX script that when you click the button it calls a PHP document.
The problem I have is now some of the variables of the PHP file are set to constant, and now I want them to be conditional to what gets sent when the button is clicked.
I want there to be a check box, that if clicked, will set a PHP variable to be TRUE, while if not click, is set to be FALSE.
I hope the problem is clear enough.
I will now paste the code below because it may help to clarify the problem.
Sorry I have to paste this "huge" chunk of code but I´m not sure which may be useful and which not.
Here is index.html
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","roulette.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>Welcome to Trufa’s Roulette</h2></div>
<button type="button" onclick="loadXMLDoc()">Spin the Wheel!</button>
</body>
</html>
And here is part of roulette.php
### Comprare pick to result
//The squares
$sqr_00 = -1;
$sqr_0 = 0;
$sqr_1 = 1;
//Placed bets, if true he placed bet
$bet_straight_placed = array(
$sqr_00 => false,
$sqr_0 => true,
$sqr_1 => true
);
What I would need as I told before, is to replace the FALSE in $sqr_00 => false, for a variable that is true when the checkbox is checked!
I hope the question is clear enough to be understood but PLEASE ask for any clarifications needed!
Thanks in advance!
Trufa
EDIT:
Addressing #grossvogel reply I am posting what I understood of his answer becuse it is not working. Sorry and thank you very much!
<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","roulette.php",true);
xmlhttp.send();
}
var isChecked = document.myform.checkbox.checked ? 1 : 0;
xmlhttp.open("GET","roulette.php?boxchecked=" + isChecked,true);
</script>
</head>
<body>
<div id="myDiv"><h2>Welcome to Trufa’s Roulette</h2></div>
<form name="myform">
<input type="checkbox" name="checkbox" value="checkbox" />00<br />
<button type="button" onclick="loadXMLDoc()">Spin the Wheel!</button>
</form>
</body>
</html>
and the php
//The squares
$sqr_00 = -1;
$sqr_0 = 0;
$sqr_1 = 1;
//Placed bets, if true he placed bet
$chb_00 = $_GET['boxchecked'];
$bet_straight_placed = array(
$sqr_00 => (bool) $chb_00,
$sqr_0 => true,
$sqr_1 => true
);
//tell the user what number he piecked
echo "You chose this numbers: " . join(", ", array_keys(array_filter($bet_straight_placed))) . '<br />' . '<br />';
I´m sorry I know this must be totally basic but I cant get my head around this AJAX "thing" yet.
Thank you!!!
in your javascript, you can do something like this
var isChecked = document.myform.checkbox.checked ? 1 : 0;
xmlhttp.open("GET","roulette.php?boxchecked=" + isChecked,true);
Then, in your php, you can read $_GET['boxchecked'], which will be 1 if the box was checked, 0 if it wasn't.
EDIT: Extending the idea to more than one field.
To do this, you'd add as many checkboxes as you want, say they're names are value1, value2, value3, .... Then you can do something like this:
var value1 = document.myform.value1.checked ? 1 : 0;
var value2 = document.myform.value2.checked ? 1 : 0;
var value3 = document.myform.value3.checked ? 1 : 0;
...
and
xmlhttp.open("GET","roulette.php?value1=" + value1 + "&value2=" + value2 + "&value3=" + value3 ...,true);
In php, read $_GET['value1'], $_GET['value2'], $_GET['value3']...
Once you get the concepts, you can write some functions to reduce the duplication, if you want.
Related
I want to fetch data from a PHP File
<script type="text/javascript">
function showUsers(str) {
if (str=="") {
document.getElementById("zzips").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("zzips").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", "getstate.php"+str, true);
xmlhttp.send();
}
<select name="state_hid" required onchange="showUsers(this.value);">
<option>AL</option><option>AK</option>
<option>AZ</option><option>AR</option>
<option>CA</option>
<option>CO</option>
<option>CT</option><option>DE</option><option>FL</option>
<option>GA</option>
</select>
<select id="zzips" name="zzip">
</select>
PHP file
$sql=mysql_query("Select* From zipcod Where abb='".$isd."' ") or die('error');
while($row=mysql_fetch_array($sql, MYSQL_ASSOC))
{
$zip=$row['zip'];
echo '<option>'.$zip.'</option> ';
}
mysql_close( $sql );
?>
This Ajax is Working fine on Localhost but when i upload the same code on live server it is not working . Does anyone have any idea.
Please advice.
1)I think this
xmlhttp.open("GET", "getstate.php"+str, true);
should be
xmlhttp.open("GET", "fullpath/getstate.php?q="+str, true);
2)And there is no value in the option field
3)Try accessing directly in your browser
path_to_file/getstate.php?q='CA'
4) Check the file permission of getstate.php file
Please provide full absolute path from http://domain.com/filepath in your
xmlhttp.open("GET", "getstate.php"+str, true);
to
xmlhttp.open("GET", "http://path-to/getstate.php"+str, true);
replace path-to with your full path
Hope this helps..
I had xmlHTTPrequest GET script which was working fine, but because of server issues I had to change it to POST method. I am unable to get the data in $_POST variable. When I checked in CHROME INSPECTOR debug tool, GET Method status is 200 ok. Need help to see if the javascript is correct.
xmlHTTPrequest file:
<script type="text/javascript">
function showprodes(str2)
{
var q2 = encodeURIComponent(str2);
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "http://www.amg.in/amogtst/rateprod.php";
xmlhttp.open("POST", url, true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send(q2);
}
</script>
<?
$result2 = mysql_query("SELECT Prod_desc FROM PRODMAST ORDER BY Prod_desc");
echo "<form name='f1'>";
echo " <span class='style3'>Gas Type </span> <select name='Proddesc' onchange=\"showprodes(this.value);\"><option value=0>Select a Product</option>";
while($nt2=mysql_fetch_assoc($result2))
{
echo "<option value='$nt2[Prod_desc]'>$nt2[Prod_desc]</option>";
}
echo "</select>";// Closing of list box
echo "</form>";
?>
Second script which updates the table as per the user selection from first php: rateprod.php file:
<?php
$q=$_POST['q2'];
$q2=mysql_real_escape_string($q);
include_once 'db.php';
mysql_query("UPDATE RATEMASTER_draft SET Prod_desc='$q2'");
?>
From looking at your AJAX code, you aren't supplying the POST variables correctly. The format for the POST string being given to xmlhttp.send() needs to be in the same format as a GET string. Trying using xmlhttp.send("q2=" + q2).
BTW, for future reference, you can use print_r($_POST) to show the contents of all POST variables. This can be very handy for debugging.
Alright, I have looked around for this problem, but I can only find references to JSON, which I am currently not using. The array value that has a number in it passes, and the DIV updates. However, when ever I try to pass in a string, nothing happens. Here is the code:
<php>
$cont = array();
$cont[] = 'yo';
$cont[] = '2';
foreach($cont as $c){
$statement .= '<button type=\"button\" onclick=\"nFunc('.$c.')\">'.$c.'</button>';
}
</php>
<script>
function nFunc(str)
{
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","test.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("p="+str);
}
</script>
<div id="myDiv">Default</div>
{$statement}
Please note I am doing testing with AJAX via IP.Board/IP.Content, so the tags and variables in {} are parsed by the IP.C engine.
This code outputs two buttons labeled "yo" and "2". When "2" is clicked, the DIV updates correctly. When "yo" is clicked, nothing occurs.
The test.php file is very simple:
<?php
$hello = $_POST['p'];
echo $hello;
?>
Thanks for any help beforehand.
This output HTML from your PHP Statement is invalid:
<button type=\"button\" onclick=\"nFunc(yo)\">yo</button><button type=\"button\" onclick=\"nFunc(2)\">2</button>
Notice onclick=\"nFunc(yo)\">
See your string parameter is not enclosed in quotes and also those backslashes are not needed there. That is why you see that error, which of course doesn't happen in case of a number.
$statement .= '<button type=\"button\" onclick=\"nFunc('.$c.')\">'.$c.'</button>';
should be
$statement .= '<button type="button" onclick="nFunc(\''.$c.'\')">'.$c.'</button>';
It works like a charm after that fix, I just tested.
I want to display a tree with information about the Catalogue of Life which includes the Kingdom, phylum, order, etc information. I'm using ajax/php to interact with a mySQL database, while using javascript to display and output the information. I have finally completed the things I wanted it to do: expand and collapse on clicking, load only once, etc. But everytime something is clicked below the scroll limit, it bounces back to the top of the page. I researched this and saw something about including 'return false' in the function or the tag, but this did not solve the problem. Am I just putting it in the wrong place? Thanks for your help...
Here is the code: in its php/javascript goodness...
<?php
include ('includes/functions.php');
$connection=connectdb();
$result=runquery('
SELECT scientific_name_element.name_element as shortname ,taxon_name_element.taxon_id as taxonid
FROM taxon_name_element
LEFT JOIN scientific_name_element ON taxon_name_element.scientific_name_element_id = scientific_name_element.id
LEFT JOIN taxon ON taxon_name_element.taxon_id = taxon.id
LEFT JOIN taxonomic_rank ON taxonomic_rank.id = taxon.taxonomic_rank_id
LEFT JOIN taxon_name_element AS tne ON taxon_name_element.parent_id = tne.taxon_id
LEFT JOIN scientific_name_element AS sne ON sne.id = tne.scientific_name_element_id
LEFT JOIN taxon AS tax ON tax.id = tne.taxon_id
LEFT JOIN taxonomic_rank AS tr ON tr.id = tax.taxonomic_rank_id
WHERE taxon_name_element.parent_id is NULL');
set_time_limit(0);
ini_set('max_execution_time',0);
?>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.js"></script>
<script type="text/javascript">
function load_children(id){
if(document.getElementById(id).active != 'true'){
if(document.getElementById(id).loaded != 'true'){
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()
{//actual stuff
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{//change the text
this.active='true'
//document.getElementById(id).innerHTML = xmlhttp.responseText;
var oNewNode = document.createElement("ul");
document.getElementById(id).appendChild(oNewNode);
document.getElementById(id).active = 'true';
document.getElementById(id).loaded = 'true';
oNewNode.innerHTML="<i>"+xmlhttp.responseText+document.getElementById(id).active+"</i>";
}
}
xmlhttp.open("GET","new.php?id="+id,true);
xmlhttp.send(false);
}else{
$("#"+id).children().children().show(); document.getElementById(id).active = 'true'}}else{ $("#"+id).children().children().hide();
document.getElementById(id).active = 'false';
}return false;}
</script>
</head>
<body>
<?php
echo "<ul>";
while($taxon_name_element = mysql_fetch_array($result)){
echo "
<li id=\"{$taxon_name_element['taxonid']}\" style=\"display:block;\">{$taxon_name_element['shortname']}</li>
";}
echo "</ul></body></html>";
?>
You were missing a closing parenthesis - if popped it in with a comment where I think you were wanting it. If JS has an error it generally won't execute, and instead it'll fall back to the non JS (ie, the return false wont fire because of the error). Were you getting an actual error when running this? The console is a good friend when you're debugging JS.
Formatting your code like I have below will also help to identify any missing elements more easily.
function load_children(id)
{
if(document.getElementById(id).active != 'true')
{
if(document.getElementById(id).loaded != 'true')
{
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()
{
//actual stuff
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//change the text
this.active='true'
//document.getElementById(id).innerHTML = xmlhttp.responseText;
var oNewNode = document.createElement("ul");
document.getElementById(id).appendChild(oNewNode);
document.getElementById(id).active = 'true';
document.getElementById(id).loaded = 'true';
oNewNode.innerHTML="<i>"+xmlhttp.responseText+document.getElementById(id).active+"</i>";
}
}
xmlhttp.open("GET","new.php?id="+id,true);
xmlhttp.send(false);
} // This was missing - were you getting an error?
}
else
{
$("#"+id).children().children().show(); document.getElementById(id).active = 'true'}
}
else
{
$("#"+id).children().children().hide();
document.getElementById(id).active = 'false';
}
return false;
}
When you're done checking and if everything is ok, take a look at: http://api.jquery.com/jQuery.get/ - the example's are at the bottom.
I am working on a simple AJAX page. when the page loads, it should take the result from the PHP page and display it in the text box. If the result is "1" (which it should be), then it should pop up an alert saying "Ready."
Main page's code (t1_wait.php):
<html><head><title>Waiting...</title></head><body>
<script type="text/javascript">
function update(id)
{
var xmlhttp;
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else if (window.ActiveXObject){
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}else{
alert("Your browser does not support XMLHTTP!");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.responseText=="1")
alert("Ready!");
}
document.myForm.status.value=xmlhttp.responseText;
}
}
var requesturl = "t1_checkMatch.php?id="+id;
xmlhttp.open("GET",requesturl,true);
xmlhttp.send(null);
// delay for 1 sec
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < 1000);
}
<?php
echo "update(".$_GET['id'].");";
?>
</script>
<form name="myForm">
Status: <input type="text" name="status" />
</form>
</body></html>
The PHP page being called out to (t1_checkMatch.php) (all db info replaced with *****):
<?php
$db_user = "*****";
$db_pass = "*****";
$db_name = "*****";
mysql_connect(localhost,$db_user,$db_pass);
#mysql_select_db($db_name) or die("Unable to select database");
$match_id = $_GET['id'];
$match_info = mysql_query("SELECT * FROM ***** WHERE id=".$match_id);
if(mysql_result($match_info,0,"usr2")==-1){
echo "1";
}else{
echo "0";
}
?>
When I go to the t1_wait.php?id=16 (the main page passing id=16 via GET), it should send a request to t1_checkMatch.php?id=16, which returns (yes, I checked) 1. This should trigger an alert saying "Ready" and cause 1 to appear in the text box, but neither of these things happen. The text box is blank.
What's wrong? Thanks!
I believe the problem you are running into is due to a typo
xmlhttp.responceText
Really should be
xmlhttp.responseText
-- Update
It also appears that you are missing a {:
if(xmlhttp.responseText=="1")
alert("Ready!");
}
Should be
if(xmlhttp.responseText=="1"){
alert("Ready!");
}
You have a spelling mistake:
if(xmlhttp.responceText=="1")
should be:
if(xmlhttp.responseText=="1")
(you spelled response incorrectly)
Ok. I figured it out, but I don't know what I did. I did have a typo, but that isn't the problem. The PHP code is the same, here is the main page code:
<html>
<body>
<script language="javascript" type="text/javascript">
<!--
//Browser Support Code
function update(id){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
if(ajaxRequest.responseText.indexOf("1")!=-1){
document.myForm.status.value = "Ready!";
window.location = "t1_game.php?id="+id;
}else{
document.myForm.status.value = "Waiting..."
update(id);
}
}
}
ajaxRequest.open("GET", "t1_checkMatch.php?id="+id, true);
ajaxRequest.send(null);
}
<?php
echo "update(".$_GET["id"].");"
?>
//-->
</script>
<form name='myForm'>
Status: <input type='text' name='status' />
</form>
</body>
</html>