To all php/javascript pro's & guru's

phence

Hey Guys,
I'm working on a php script that collects user information with an HTML <form>. I am not too swift with JavaScript(as mentioned in other posts), so if im out of line let me know. There are two places where i need to use JavaScript on this <form>.

1) this piece of code shown below pulls data from a MySQL database and aranges it in category tree structure in a <select> box. The Problem is that the <select> box does not populate unless the page is refreshed. How can I adapt javascript with this php code to get it to load without having to refresh the page? the mysql database structure can be found in this post

<?php
// thanks to 'dustbuster', this works!
function categories($parent,$parentstring){
	$query="SELECT * FROM categories where parent = '$parent'";
	$result=mysql_query($query);
 	if (mysql_num_rows($result)>0){
 		while ($row=mysql_fetch_assoc($result)){
     		$tempparentstring=$parentstring;
     		$tempparentstring=$tempparentstring." >> ".$row['Name'];
     		echo "<option value=\"".$row['ID']."\">";
    	 	echo $tempparentstring;
     		echo "</option>\n";
     		categories($row['ID'],$tempparentstring);
 		}
 	}
}
//------------------
require ("connect.php"); 
echo "<select name=\"Categories\">\n";
$query="SELECT * FROM categories where parent IS NULL";
$result=mysql_query($query);
while ($row=mysql_fetch_assoc($result)){
	echo "<option value=\"".$row['ID']."\">";
	echo $row['Name'];
    echo "</option>\n";
    categories($row['ID'],$row['Name']);
}
echo "</select>\n";
if (!mysql_select_db($databaseName, $connection))
		showerror();

// run it
categories("NULL", ""); 
?>

2) Further down on the <form>, i need to populate another <select> box with a set of prices, that is bassed on the selection of the first <select> box(the above category <select> box).
How can I populate this second <select> box bassed on the selection of the first, without refreashing the page?

I know that the concept of this has proabally been explained and discussed many times on forums and in articles and tutorials found thru google, but.. My problem is I don't know enough javascript yet to manipulate other code to apply it to my script/application. I really would appreicate help from anyone who would help me get this working right. From what i have seen to me this all looks pretty complicated... Thanks alot in advance for any help!

barand

With respect to item 1 of your post

Move the mysql_select_db line to just after your require statement.

Remove the categories(NULL."") line, you shouldnt need as the call to categories in your main loop should suffice.

###

As for item 2, I may not have the most elegant solution but I had a similar thing work in the past by generating a hidden field (name=prices) on my form that contained a delimited string containing code/price pairs.

In a js script I then accessed form.prices.value and search for the code and extracted the price.

hth

phence

Thanks alot! i should have caught that.. Duh!

anyway, could you elaborate on that second idea? it doesn't have to be fancy, it just has to be effecient and work.. it could also casue problems if its not smooth. but if you could i'd be intrested.. as i said before i'm not the best with javascript.

anyone else have another solution to share??
thank-you!

barand

On generating the page, built the value to put in the hidden field from a query. Made each cat/price combo fixed length for ease of extraction.

eg category 001 price 50.00

<html>
<!-- Creation date: 01/04/03 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Author" content="Barry Andrew">
<meta name="Generator" content="AceHTML 4 Pro">

<script language="JavaScript">
<!-- Script Begin
function getprice(form) {
	nums = form.prices.value;
	cat = "#"+form.category.value;
	p = nums.indexOf(cat);
	if (p==-1) {
		form.catprice.value = "0";
	}
	else {
		form.catprice.value =  nums.substring(p+4,p+12);
	}
}
//  Script End -->
</script>
</head>
<body>
<form action="myscript.php" method="post">
<input type="hidden" name="prices" value="#00100050.00#00200060.00#00300075.50">

<select name="category" onclick="getprice(this.form);">
	<option value="001"> cat 1</option>
	<option value="002"> cat 2</option>
	<option value="003"> cat 3</option>
</select>
<input type="text" name="catprice" size="8" maxlength="8">
<input type="submit" value="Submit">

</form>

</body>
</html>

hth

pete_bisby

I came across the same problem a few months back at work and, like you, not the world's greatest at JavaScript. But I did manage to find a solution, so here goes.

The company I work for deals with the maintenance of aircraft, and needed to be able to select an airline from the first drop-down box and then select an aircraft registration from the second drop-down box. e.g.

I populated the first drop-down box with the airline's name and their relevant codes e.g.

Now comes the first JavaScript bit. I had to create and array for the airline codes, and another array for the aircraft relating to the airline.

I then created the second drop-down box for the aircraft registrations and the aircraft types e.g.

<select name="ACReg" size=4><option value="none">Select Airline</option></select>

The second JavaScript defines the aircraft_details() function, which does the donkey work!

<SCRIPT LANGUAGE="JavaScript">
function aircraft_details() {
if (document.frmAircraft.AirlineID.options.selectedIndex == -1) {
} else {
while (document.frmAircraft.ACReg.options.length) {
document.frmAircraft.ACReg.options[0] = null;
}
count = 0;
airlineList = document.frmAircraft.ACReg.options;
for (var n in eval(document.frmAircraft.AirlineID.options[document.frmAircraft.AirlineID.selectedIndex].value)) {
airlineList[count] = new Option(eval(document.frmAircraft.AirlineID.options[document.frmAircraft.AirlineID.selectedIndex].value + '[' + [count] + ']'));
airlineList[count].value = eval(document.frmAircraft.options[document.frmAircraft.AirlineID.selectedIndex].value + '[' + [count] + ']');
airlineList[count].text = eval(document.frmAircraft.options[document.frmAircraft.AirlineID.selectedIndex].value + '2[' + [count] + ']');
count++;
}
}
}
</SCRIPT>

The first part of the if statement checks to see if an airline has actually been selected (-1 means that it hasn't).
The while statement empties the aircraft drop-down box, because if your first selection has more items than your second, then these will still appear at the bottom of your drop-down box.
The for statement builds the new items to 'airlineList', which are the options for the ACReg drop-down box.

And that is it .... I think! If you want to have a look at a working example, visit the easyJet website and have a look when you select an airport - the list of destinations reduces automatically.

Hope this helps to solving your problem!

phence

thanks for the reply
pete_bisby, but when i try running the script a get a javascript error.. on of those popup would you like to continue loading this page..

any one have ideas why this won't work?

pete_bisby

Let me have a look at all the code for your page - it sounds as though it's trying to run something before the whole page has been loaded.

Cheers !

phence

pete_bisby, quick question..
im not sure how to get your code to work with mine...
here is what i have, maybe this will give you a better idea exactly i need to do.

<?php
// this code populates the first <select> box

function categories($parent,$parentstring){
	$query="SELECT * FROM categories where parent = '$parent'";
	$result=mysql_query($query);
 	if (mysql_num_rows($result)>0){
 		while ($row=mysql_fetch_assoc($result)){
     		$tempparentstring=$parentstring;
     		$tempparentstring=$tempparentstring." >> ".$row['Name'];
     		echo "<option value=\"".$row['ID']."\">";
    	 	echo $tempparentstring;
     		echo "</option>\n";
     		categories($row['ID'],$tempparentstring);
 		}
 	}
}
//------------------
require ("connect.php");
if (!mysql_select_db($databaseName, $connection))
		showerror(); 
echo "<select name=\"Categories\">\n";
$query="SELECT * FROM categories where parent IS NULL";
$result=mysql_query($query);
while ($row=mysql_fetch_assoc($result)){
	echo "<option value=\"".$row['ID']."\">";
	echo $row['Name'];
    echo "</option>\n";
    categories($row['ID'],$row['Name']);
}
echo "</select>\n";

?>
<?
/* this code here is what should populate the second <select>box
this is my crappy code that doen't work... and needs to be JavaScripted...  */
?>
<select name="lst_period" size="1" value="<?php echo $_SESSION["lst_period"]; ?>">
          <?php  

	  if ($ID >= 181 && $ID <= 192)
	  {
	    ?>
          <option value="21">21 days - $10.00</option>
          <option value="30">30 days - $12.50</option>
          <option value="45">45 days - $15.00</option>
          <option value="60">60 days - $17.50</option>
          <option value="90">90 days - $25.00</option>
          <option value="120">120 days - $45.00</option>
   <? }
	  else
	  {
	  	// any other listing
		?>
          <option value="7">7 days - $5.00</option>
          <option value="14">14 days - $7.50</option>
          <option value="21">21 days - $10.00</option>
          <option value="30">30 days - $12.50</option>
          <option value="45">45 days - $15.00</option>
          <option value="60">60 days - $17.50</option>
          <option value="90">90 days - $25.00</option>
          <option value="120">120 days - $45.00</option>
    <? } ?>
        </select>

The price needs to be bassed on which category is picked... only certian categories have different prices.. this second select is what i am having trouble populating...
Thanks a lot!
- phence

pete_bisby

Try the following code in your page, which I have tested and works OK:

<SCRIPT LANGUAGE="JavaScript">
	function change_select() {
		if (document.frmTest.Category.options.selectedIndex==-1) {
		} else {
			while (document.frmTest.period1.options.length) {
				document.frmTest.period1.options[0] = null;
			}
			periodList = document.frmTest.period1.options;
			if ((document.frmTest.Category.value >= 181) && (document.frmTest.Category.value <= 192)) {
				periodList[0] = new Option();
				periodList[0].value = "21";
				periodList[0].text = "21 days - $10.00";
				periodList[1] = new Option();
				periodList[1].value = "30";
				periodList[1].text = "30 days - $12.50";
			} else {
				periodList[0] = new Option();
				periodList[0].value = "7";
				periodList[0].text = "7 days - $5.00";
				periodList[1] = new Option();
				periodList[1].value = "14";
				periodList[1].text = "14 days - $7.50";
			}
		}
	}
</SCRIPT>

I also noticed that the JavaScript kicked up a fuss with the '1st_period' as a valid name - it may have something to do with the underscore. I have changed it to 'period1' in the code above.

You will need to put:

onChange="change_select()"

within the select of your 'Category' drop-down box to run the JavaScript code.

The JavaScript code I posted earlier creates many arrays for all of the required airlines and their aircraft, and puts them in the drop-down box as and when required by the user. You only have two lists, which possibly made things a little easier. You could place the prices in arrays - try experimenting with the code.

Hope you're OK with this - Cheers!

Pete

phence

Hey!! thanks alot for all your help!!
i can't figure out where in the select statement to put
onChange="change_select()"

i tried a few places.. not working yet.

thanks you so much!

pete_bisby

Place the 'onChange' within the Category select:

<select name="Category" size=1 onChange="change_select()">

So when you change the first drop-down box, the details of the second drop-down will change according to the value of the Category.

Have fun !

phence

hey thanks for helping out!
still trying to get it to work right.

there isn't anything besides "select time period" appearing in the second select box.

here is the code i have to create the second drop down:

    <select name="periodList" size=1 value="<?php echo $_SESSION["lst_period"]; ?>">
		<option value="none">Select Time Period</option></select>
	</select>

heres the code i have you provided.

<head>
<SCRIPT LANGUAGE="JavaScript">
    function change_select() {
        if (document.frmTest.Category.options.selectedIndex==-1) {
        } else {
            while (document.frmTest.period1.options.length) {
                document.frmTest.period1.options[0] = null;
            }
            periodList = document.frmTest.period1.options;
            if ((document.frmTest.Category.value >= 181) && (document.frmTest.Category.value <= 192)) {
                periodList[0] = new Option();
                periodList[0].value = "21";
                periodList[0].text = "21 days - $10.00";
                periodList[1] = new Option();
                periodList[1].value = "30";
                periodList[1].text = "30 days - $12.50";
            } else {
                periodList[0] = new Option();
                periodList[0].value = "7";
                periodList[0].text = "7 days - $5.00";
                periodList[1] = new Option();
                periodList[1].value = "14";
                periodList[1].text = "14 days - $7.50";
            }
        }
    }
</SCRIPT>
</head>

again, i thank you so very much!!!

pete_bisby

You had:

<select name="periodList" size=1 value="<?php echo $_SESSION["lst_period"]; ?>">
<option value="none">Select Time Period</option></select></select>

The name of the first SELECT drop-down box should be "period1" and not "periodList". "periodList" is just a variable within the JavaScript function that allows you to create new list items. Once the function ends, the variable is destroyed - it cannot exist outside the scope of the function.

Change the name to "period1" and the drop-down list should now work.

phence

hey pete_bisby,
first of all i'd like to thank-you for helping all this time. Sorry i haven't had the time to reply since i last posted.
But.. i'm still having a little trouble. I am still not getting any output inside the second <select> box. Below is the code i am using.

first the javascript, you so kindly created for me ! 🙂 !

<head>
<SCRIPT LANGUAGE="JavaScript">
    function change_select() {
        if (document.frmTest.Category.options.selectedIndex==-1) {
        } else {
            while (document.frmTest.period1.options.length) {
                document.frmTest.period1.options[0] = null;
            }
            periodList = document.frmTest.period1.options;
            if ((document.frmTest.Category.value >= 181) && (document.frmTest.Category.value <= 192)) {
                periodList[0] = new Option();
                periodList[0].value = "21";
                periodList[0].text = "21 days - $10.00";
                periodList[1] = new Option();
                periodList[1].value = "30";
                periodList[1].text = "30 days - $12.50";
            } else {
                periodList[0] = new Option();
                periodList[0].value = "7";
                periodList[0].text = "7 days - $5.00";
                periodList[1] = new Option();
                periodList[1].value = "14";
                periodList[1].text = "14 days - $7.50";
            }
        }
    }
</SCRIPT>
</head>
<body>

And second, the 2nd <select> box coding

    <select name="period1" size=1 value="<?php echo $_SESSION["lst_period"]; ?>">
		<option value="none">Select Time Period</option>
	</select>

I really do appreciate your help!
Thank-you,
phence

pete_bisby

OK, first make sure that $_SESSION["1st_period"] contains a value, and also make sure that the value exists within the JavaScript list of values within the change_select() function (i.e. include your values for 45,60,90 and 120 days, and 21,30,45,60,90 and 120 days for your two sets of Category values).

I'm assuming that the second drop-down list doesn't appear when the page is created. You will need to run the change_select() function when the page opens. To do this, have this within the <body> tag of your page:

<body onLoad="change_select()">

This will make sure that your JavaScript function will run with your session variable.

Hope this helps !

phence

well... i think i know what you mean, but i'm not sure how to assign a value to the session inside javascipt...
but heres what i have.. i kinda knew it wasn't going to work but i gave it a shot. thanks for your help.

<SCRIPT LANGUAGE="JavaScript">
    function change_select() {
        if (document.frmTest.Category.options.selectedIndex==-1) {
        } else {
            while (document.frmTest.period1.options.length) {
                document.frmTest.period1.options[0] = null;
            }
            periodList = document.frmTest.period1.options;
            if ((document.frmTest.Category.value >= 181) && (document.frmTest.Category.value <= 192)) {
                periodList[0] = new Option();
                <?php $_SESSION["lst_period"] = 21; ?>
				periodList[0].value = "<?php echo $_SESSION["lst_period"]; ?>";
                periodList[0].text = "21 days - $10.00";
                periodList[1] = new Option();
                <?php $_SESSION["lst_period"] = 30; ?>
				periodList[1].value = "<?php echo $_SESSION["lst_period"]; ?>";
                periodList[1].text = "30 days - $12.50";
            } else {
                periodList[0] = new Option();
				<?php $_SESSION["lst_period"] = 7; ?>
                periodList[0].value = "<?php echo $_SESSION["lst_period"]; ?>";
                periodList[0].text = "7 days - $5.00";
                periodList[1] = new Option();
				<?php $_SESSION["lst_period"] = 14; ?>
                periodList[1].value = "<?php echo $_SESSION["lst_period"]; ?>";
                periodList[1].text = "14 days - $7.50";
            }
        }
    }
</SCRIPT>
</head>
<body onLoad="change_select()">

thanks agian for helping.

pete_bisby

My apologies for not replying sooner, but there has been some family business I had to attend to.

All the javascript code does is it builds up the drop-down box. If you want to assign the value of your session variable to the value of the drop-down box, could it not be done when you submit the form?

It does seem you're trying to do too much on the one screen at the same time. Split the functionality by passing the values of your form to another PHP page, and then set your variables within that page.

WaQuEe

Hi Guys,

The above sample works well, but how do I read records from the database to be inserted into the second dropdown list. I know how to read records, but not sure how to read records in a php block in javascript....If you know what I mean!

pete_bisby

Have a look at my first post on this subject. It basically builds two arrays, one for each drop-down box.

When a selection is made with the first drop-down box, it then selects the correct array for the second drop-down box and re-builds it.

Have a look and see what you think.