We Keep Coding

HTML forms - need a js/php combo capability

I have two dropdown lists. Both are to be filled by PHP via a mysql query. My problem is I want the form to be responsive if these list selections change. For instance, I need to populate the second list via another query based upon the selection of the first list.
Problem is: I need "on_change" to POST the form data AND to trigger PHP instead of Javascript.
Is there a way to collect that selection in Javascript and then send it to PHP and then refill the form? Hope I'm making myself clear.
Thanks,
Dana

Use Javascript to detect a change of the list. When a change occurs, you can make an AJAX request using a PHP script to return a new list. Javascript can manipulate the new data set and replace the DOM with the new appropriate list.

<script type=\"text/javascript\">
function changeCountry(){
var e = document.getElementById(\"country_id\");
var country_id = e.options[e.selectedIndex].value;
if(country_id == 1){
// Display states
document.getElementById('display_province').style.display = \"none\";
document.getElementById('display_state').style.display = \"\";
document.getElementById('display_state').style.visibility = \"visible\";
}
else{
// Display Province
document.getElementById('display_state').style.display = \"none\";
document.getElementById('display_province').style.display = \"\";
document.getElementById('display_province').style.visibility = \"visible\";
// Remove current selection list
var select = document.getElementById('province_id');
for (var option in select){
select.remove(option);
}
// Get Provinces for country_id
var xmlhttp = new XMLHttpRequest();
// Include fix for IE6 and IE5
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) {
var xmlDoc = xmlhttp.responseXML;
// get each property
var x=xmlDoc.getElementsByTagName('province');
for (i=0;i<x.length;i++)
{
var e = document.getElementById('province_id');
var opt = document.createElement('option');
opt.value = x[i].getElementsByTagName('zoneid')[0].textContent;
opt.innerHTML = x[i].getElementsByTagName('zone')[0].textContent;
e.appendChild(opt);
}
}
}
var url = 'get_provinces.php?country_id='+country_id;
// var url = 'provinces.xml';
xmlhttp.open('GET',url,false);
xmlhttp.setRequestHeader(\"Content-type\", \"text/xml\");
xmlhttp.send();
}
}
function changeShippingCountry(){
var e = document.getElementById(\"shipto_country_id\");
var shipto_country_id = e.options[e.selectedIndex].value;
if(shipto_country_id == 1){
// Display states
document.getElementById('shipto_display_province').style.display = \"none\";
document.getElementById('shipto_display_state').style.display = \"\";
document.getElementById('shipto_display_state').style.visibility = \"visible\";
}
else{
// Display Province
document.getElementById('shipto_display_state').style.display = \"none\";
document.getElementById('shipto_display_province').style.display = \"\";
document.getElementById('shipto_display_province').style.visibility = \"visible\";
// Remove current selection list
var select = document.getElementById('shipto_province_id');
for (var option in select){
select.remove(option);
}
// Get Provinces for country_id
var xmlhttp = new XMLHttpRequest();
// Include fix for IE6 and IE5
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) {
var xmlDoc = xmlhttp.responseXML;
// get each property
var x=xmlDoc.getElementsByTagName('province');
for (i=0;i<x.length;i++)
{
var e = document.getElementById('shipto_province_id');
var opt = document.createElement('option');
opt.value = x[i].getElementsByTagName('zoneid')[0].textContent;
opt.innerHTML = x[i].getElementsByTagName('zone')[0].textContent;
e.appendChild(opt);
}
}
}
var url = 'get_provinces.php?country_id='+shipto_country_id;
// var url = 'provinces.xml';
xmlhttp.open('GET',url,false);
xmlhttp.setRequestHeader(\"Content-type\", \"text/xml\");
xmlhttp.send();
}
}
function addProvince(){
// Get input
var np = document.getElementById('new_province').value;
// Get country_id
var e = document.getElementById(\"country_id\");
var country_id = e.options[e.selectedIndex].value;
// Erase input
document.getElementById('new_province').value = \"\";
// Add to database
var xmlhttp = new XMLHttpRequest();
// Include fix for IE6 and IE5
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) {
var xmlDoc = xmlhttp.responseXML;
}
}
var url = 'add_provinces.php?province='+np+'&country_id='+country_id;
xmlhttp.open('GET',url,false);
xmlhttp.setRequestHeader(\"Content-type\", \"text/xml\");
xmlhttp.send();
changeCountry();
changeShippingCountry();
}
function addShippingProvince(){
// Get input
var np = document.getElementById('shipto_new_province').value;
// Get country_id
var e = document.getElementById(\"shipto_country_id\");
var country_id = e.options[e.selectedIndex].value;
// Erase input
document.getElementById('shipto_new_province').value = \"\";
// Add to database
var xmlhttp = new XMLHttpRequest();
// Include fix for IE6 and IE5
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) {
var xmlDoc = xmlhttp.responseXML;
}
}
var url = 'add_provinces.php?province='+np+'&country_id='+country_id;
xmlhttp.open('GET',url,false);
xmlhttp.setRequestHeader(\"Content-type\", \"text/xml\");
xmlhttp.send();
changeShippingCountry();
changeCountry();
}
function hideShipping(){
document.getElementById('shipping').style.display = \"none\";
document.getElementById('shipping').style.visibility = \"hidden\";
}
function displayShipping(){
document.getElementById('shipping').style.display = \"\";
document.getElementById('shipping').style.visibility = \"visible\";
}

You can make an ajax call to an endpoint you set up that runs some php code and returns some JSON that your javascript can then use to populate the second list. Your javascript would look something like:
$.ajax( "your-endpoint.php" )
.done(function(data) {
// use javascript to dynamically populate your list
var json = data;
//assuming data is a list you could iterate over it
$.each(data, function (k, v) {
//use this to populate your list
}
})
.fail(function() {
// show an error message on your form
});
Your PHP endpoint would have to return a JSON object so that your javascript can more easily use it.

Communcation betwen php and javascript is typically done by Ajax, which is very simple to use in jQuery. The basic syntax is something like this:
$.ajax({
type: "POST",
url: "yourFile.php",
data: "{data: " + yourData + "}", //yourData is javascript variable
success: function(result){
//do something with result from php file
}
});
Where variable yourData is what you want to send to php script and it would be accessible throught $_POST['data'].

Everyone answered that Ajax is the solution, and I agree, Ajax is more elegant, but Ajax is not the only solution. I post this answer only to show another way to do it : without Ajax.
The first code (combos.php) is the page with a combo that, when selected, calls PHP. The second code (combos_action.php) is the PHP that returns the values according to the option selected. To make this codes to work, create two text files with the given names, copy-paste the codes and run it from your browser with http://localhost/combos.php. If you change the filenames, change them in the code, also.
Here is how it works : the page shows a simple combo filled with the days of the week. When a day is selected the JavaScript's onchange event fires and the form is autosubmitted, PHP gets the selected day and stores some values in session, returns to the page that refreshes and fills the second combo with those values. Comments will help you to understand:
combos.php
<?php
session_start(); // NECESSARY TO RETRIEVE THE VALUE RETURNED FROM PHP.
?>
<html>
<head>
<title>By José Manuel Abarca Rodríguez</title>
<script type="text/javascript">
// AUTOSUBMIT FORM #1 WHEN ANY OPTION IN COMBO #1 IS SELECTED.
function combo1_selected () {
document.getElementById( "form1" ).submit();
}
</script>
</head>
<body>
<!-- THIS IS COMBO #1. -->
<form id="form1" method="post" action="combos_action.php">
Select a day
<br/>
<select name="combo1" onchange="combo1_selected()"> <!-- NOTICE THE EVENT! -->
<option>Monday</option>
<option>Tuesday</option>
<option>Wednesday</option>
</select>
</form>
<?php
// DISPLAY COMBO #2 ONLY IF COMBO #1 WAS SELECTED.
if ( isset( $_SESSION[ "combo2" ] ) )
{ echo "<br/>" .
"<br/>" .
"Options for <b>" . $_SESSION[ "combo1" ] . "</b>" .
"<br/>" .
"<select name='combo2'>";
// SEPARATE THE OPTIONS RETURNED FROM PHP.
$options = explode( ",",$_SESSION[ "combo2" ] );
// DISPLAY THE OPTIONS FOR THE COMBO.
for ( $i = 0; $i < count( $options ); $i++ )
echo "<option>" . $options[ $i ] . "</option>";
echo "</select>";
}
?>
</body>
</html>
combos_action.php
<?php
session_start();
$_SESSION[ "combo1" ] = $_POST[ "combo1" ]; // SELECTED OPTION.
if ( $_SESSION[ "combo1" ] == "Monday" )
$_SESSION[ "combo2" ] = "mon 1,mon 2,mon 3"; // RETURN THESE VALUES.
if ( $_SESSION[ "combo1" ] == "Tuesday" )
$_SESSION[ "combo2" ] = "tue 1,tue 2,tue 3"; // RETURN THESE VALUES.
if ( $_SESSION[ "combo1" ] == "Wednesday" )
$_SESSION[ "combo2" ] = "wed 1,wed 2,wed 3"; // RETURN THESE VALUES.
header( "Location: combos.php" ); // RETURN TO PAGE.
?>

Detect arrays with ajax

I have a document on PHP retrieving the postal codes via form and it gives back an array. If the postal code is used on more than one citie, it creates a multidimensional array, otherwise it stores everything just in one.
I have three scenarios:
If the postal code doesn't exist it gives an array with 2 values "Doesn't exist" and output it on the form.
If the postal code exists it gives you an array with the city and the state and output them on the form.
If the postal code exists and is used on more than one citie it stores every result on an array and all of them into a another array (Array => Array [0] => Array([city]=>city1 [state]=>state1) Array [1] => Array([city]=>city2 [state]=>state2)... and then outputs a popup.
I managed to do everything but I still have some problems. Here's my code:
Script PHP
include_once('../../../connect.html');
//perform lookup
$title = ($_GET['postal_code']);
$statement = $connection->prepare ("SELECT city, state FROM cities, states WHERE cities.state_id = states.state_id AND cities.postal_code = ?");
$statement->execute(array($title));
$statement->setFetchMode(PDO::FETCH_ASSOC);
$items = array();
while ($r = $statement->fetch()) {
//$arrayName = array($r = $statement->fetch());
$items[] = $r;
}
if (count($items) == '1'){
$newArray = $items[0];
echo $newArray['city'].",".$newArray['state'];
}elseif (count($items) == '0'){
echo "Doesn't exist".","."Doesn't exist";
}else{
$varios = array($items);
print_r($varios);
}
AJAX code
var ajax = getHTTPObject();
function getHTTPObject()
{
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!");
}
return xmlhttp;
}
function updateCityState()
{
if (ajax)
{
var zipValue = document.getElementById("postal_code").value;
if(zipValue)
{
var url = "get_cities.php";
var param = "?postal_code=" + escape(zipValue);
ajax.open("GET", url + param, true);
ajax.onreadystatechange = handleAjax;
ajax.send(null);
}
}
}
function handleAjax()
{
if (ajax.readyState == 4)
{
if( ajax.responseText.length ) {
if (ajax.responseText[2]) {
centerPopup();
loadPopup();
}
citystatearr = ajax.responseText.split(",");
city.value = citystatearr[0];
state.value = citystatearr[1];
}else{
}
}
}
Problems are:
It calls the function centerPopup and loadPopup everytime, regardless the result (it should be called only when the PHP script gives back a multidimensional array.
I don't know how to detect via AJAX when the script is sending the normal array or the multidimensional array.
It's basically those two problems but solving one, the other one is solved.
Any help is appreciated!!

ajax.responseText is a string, in JavaScript string[n] return the nth letter of the string.
You must encode your data in PHP then decode it in JavaScript, the best way to do it is with JSON. Both PHP and JavaScript provide support for JSON (json_encode/json_decode and JSON.stringify/JSON.parse) so it's easier!
So this is the code in JS:
var ajax = getHTTPObject();
function getHTTPObject()
{
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!");
}
return xmlhttp;
}
function updateCityState()
{
if (ajax)
{
var zipValue = document.getElementById("postal_code").value;
if(zipValue)
{
var url = "get_cities.php";
var param = "?postal_code=" + escape(zipValue);
ajax.open("GET", url + param, true);
ajax.onreadystatechange = handleAjax;
ajax.send(null);
}
}
}
function handleAjax()
{
if (ajax.readyState == 4)
{
if( ajax.responseText.length ) {
try {
var data = JSON.parse(ajax.responseText); // = $items
}
catch(e) {
//json parse error
}
if (data[2]) {
centerPopup();
loadPopup();
}
citystatearr = ajax.responseText.split(",");
// ^^^^^^ I think you'll need to change this
city.value = citystatearr[0];
state.value = citystatearr[1];
}else{
}
}
}
And PHP :
include_once('../../../connect.html');
//perform lookup
$title = ($_GET['postal_code']);
$statement = $connection->prepare ("SELECT city, state FROM cities, states WHERE cities.state_id = states.state_id AND cities.postal_code = ?");
$statement->execute(array($title));
$statement->setFetchMode(PDO::FETCH_ASSOC);
$items = array();
while ($r = $statement->fetch()) {
//$arrayName = array($r = $statement->fetch());
$items[] = $r;
}
if (count($items) == '1'){
$newArray = $items[0];
echo $newArray['city'].",".$newArray['state'];
}elseif (count($items) == '0'){
echo "Doesn't exist".","."Doesn't exist";
}else{
$varios = array($items);
die(json_encode($varios));
}

Send Flag from PHP to JavaScript

I want to initialize a flag in a condition in PHP and send it to be read by JavaScript.
At the moment, I have this code :
PHP
if ($totalResults > MAX_RESULT_ALL_PAGES) {
$queryUrl = AMAZON_SEARCH_URL .
$searchMonthUrlParam .
$searchYearUrlParam .
$searchTypeUrlParam .
urlencode( $keyword ) .
'&page=' . $pageNum;
} else {
$queryUrl = AMAZON_TOTAL_BOOKS_COUNT .
$searchMonthUrlParam .
$searchYearUrlParam .
$searchTypeUrlParam .
urlencode($keyword) .
"&page=" . $pageNum;
$flagQuery = TRUE;
echo $flagQuery;
}
JavaScript
<script>
function getFlagValue() {
var xmlHttp;
if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
} else {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState==4 && xmlHttp.status==200) {
alert(xmlHttp.responseText);
}
};
xmlHttp.open("GET","getAmazonResult.php",true);
xmlHttp.send();
}
var flagQuery = new Boolean();
flagQuery = getFlagValue();
alert(flagQuery);
</script>
I can't seem to retrieve the Flag in JavaScript.

I found out why my Flag displays Undefined.
It is simply that to make a alert (flagQuery) a boolean does not function.
I combine my code with that of Jan Turon, and this is achieved
function getFlagValue() {
var xmlHttp = new HmlHttpRequest();
xmlHttp.onload = function() {
if (xmlHttp.status==200) yourCustomHandler(xmlHttp.responseText);
};
xmlHttp.open("GET","getAmazonResult.php",true);
xmlHttp.send();
}
function yourCustomHandler(response) {
flagQuery = response;
alert(flagQuery);
}
flagQuery = getFlagValue();
if (flagQuery = true) {
alert ("Flag = TRUE");
}
else {
alert ("Flag = FALSE");
}
And now I see if the flag is true or false

Just uncomment the echo $flagQuery from your PHP code and change it to
echo $flagQuery ? 1 : 0;
since false echoes nothing.
A stands for asynchronous in AJAX. Therefore in your javascript you need to set the flag var in onreadystatechange event:
function getFlagValue() {
var xmlHttp = new HmlHttpRequest();
xmlHttp.onload = function() {
if (xmlHttp.status==200) yourCustomHandler(xmlHttp.responseText);
};
xmlHttp.open("GET","getAmazonResult.php",true);
xmlHttp.send();
}
function yourCustomHandler(response) {
flagQuery = response;
alert(flagQuery);
}
Your code will also work if you make it synchronous by setting false as the third parameter in:
xmlHttp.open("GET","getAmazonResult.php",false)
and if you actualy return the responseText from the getValue() function, but I don't recommend it since the net communication may fail and you javascript then freezes.
BTW: you don't need to bother with ActiveXObject legacy code, see here. Also have a look at XHR2: I updated your JS code for XHR2 standard in my answer), as you see, it is much shorter.
Oh, and there is a minor mistake in your PHP, you need to echo the flagQuery everytime:
if ($totalResults > MAX_RESULT_ALL_PAGES) {
$queryUrl = ...
$flagQuery = FALSE;
} else {
$queryUrl = ...
$flagQuery = TRUE;
}
echo $flagQuery ? 1 : 0; // outside of the if-else block

Ajax div can't access address bar variable

Can someone please advise me on how my Ajax div can get an address bar variable. The usual way just doesn't work.
My address bar currently looks like this:
http://localhost/social3/browse/?locationName=Cambridge
Obviously, the word I'm trying to access here is 'Cambridge'. Usually, I would use a little php and do this:
$searchResult = $_POST['locationName'];
echo $searchResult;
But because I'm in an Ajax div, I can't seem to get to the variable.
Do I need to add some JavaScript wizardry to my Ajax coding? (I have little knowledge of this)
My Ajax:
<script>
window.onload = function () {
var everyone = document.getElementById('everyone'),
searching = document.getElementById('searching'),
searchingSubmit = document.getElementById('searchingSubmit');
everyone.onclick = function() {
loadXMLDoc('indexEveryone');
everyone.className = 'filterOptionActive';
searching.className = 'filterOption';
}
searching.onclick = function() {
loadXMLDoc('indexSearching');
searching.className = 'filterOptionActive';
everyone.className = 'filterOption';
}
searchingSubmit.onclick = function() {
loadXMLDoc('indexSearchingSubmit');
}
function loadXMLDoc(pageName)
{
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("leftCont").innerHTML=xmlhttp.responseText;
}
}
function get_query(){
var url = location.href;
var qs = url.substring(url.indexOf('?') + 1).split('&');
for(var i = 0, result = {}; i < qs.length; i++){
qs[i] = qs[i].split('=');
result[qs[i][0]] = decodeURIComponent(qs[i][1]);
}
return result;
}
xmlhttp.open("GET","../browse/" + pageName + ".php?user=" + get_query()['user'],true);
xmlhttp.send();
}
}
</script>
<!-- ends ajax script -->

If your url contains the variable, you should use $_GET["key"] instead of $_POST
alternatively, you can use $_REQUEST["key"] to handle both cases.

window.location not firing after ajax event

I'm not sure if this is related to an ajax call or not. I'm very new to Ajax, and so I suspect it is the cause.
I run the following javascript:
function GetXmlHttpObject() {
"use strict";
var objXMLHttp = null;
if (window.XMLHttpRequest) {
objXMLHttp = new XMLHttpRequest();
} else if (window.ActiveXObject) {
objXMLHttp = new window.ActiveXObject("Microsoft.XMLHTTP");
}
return objXMLHttp;
}
function delete_director(i) {
"use strict";
var r, url;
r = window.confirm("Are you sure you want to disable this director");
url = "ajax.php?task=director&event=delete&UserId=" + i;
if (r === true) {
mdata = new GetXmlHttpObject();
if (mdata === null) {
alert("Browser does not support HTTP Request");
return;
}
mdata.open("GET", url, true);
mdata.send(null);
}
}
And that calls into the following php function:
function deletedirector()
{
$UserId=mysql_real_escape_string($_GET['UserId']);
$query = "update tbl_users set IsDisabled='1' where UserId=".$UserId;
$result = mysql_query($query) OR die('Cannot perform query!');
if ($result) {
error_log("a");
?><script type="text/javascript">window.location='index.php?task=director&success=Director Successfully Deleted.'</script><?
} else {
error_log("b");
?><script type="text/javascript">window.location='index.php?task=director&error=Director Deletion Failed.'</script><?
}
}
The db shows that the director was deleted, and "a" prints in the error log, but the window.location never fires.
The user experience is that the browser prompts for confirmation, and after that - nothing. A javascript console shows now error.
Any ideas?

You already return new object (of XMLHttpRequest API) with function, so you don't need new here
...
if (r === true) {
mdata = GetXmlHttpObject();
...
and try to use onreadystatechange like this
mdata.onreadystatechange = function(){
if (mdata.readyState === 4) {
alert("some text");
} else {
alert(mdata.status);
}
};