PHP: Refreshing page purchase options after quantity selection

Emerson

I want to have a drop down that will give the option to select how many of an item the person wishes to purchase.
Say they select 2, then the page refreshes and 2 further drop down boxes with weights to select should appear.
I'm using a for loop, but it ain't quite working..

Thanks!
[PHP]
<select name="numberofthings" id="numberofthings">
<option value="0"<?php echo ($numberofthings == 0)? " selected" : "" ?>>0</option>
<option value="1"<?php echo ($numberofthings == 1)? " selected" : "" ?>>1</option>
<option value="2"<?php echo ($numberofthings == 2)? " selected" : "" ?>>2</option>
<option value="3"<?php echo ($numberofthings == 3)? " selected" : "" ?>>3</option>
<option value="4"<?php echo ($numberofthings == 4)? " selected" : "" ?>>4</option>
</select>
Number of things<br />

Weights:
<?php for($i=0; $i<=$numberofthings; $i++)
{
echo "<select name=\"select\" id=\"select\" value=$weight>";
echo "<option>Select...</option>";
echo "<option value=\"10lb\">10lb</option>";
echo "<option value=\"18lb\">18lb</option>";
echo "<option value=\"20lb\">20lb</option>";
echo "<option value=\"22lb\">22lb</option>";
echo "</select>";
}
?>[/PHP]

Serbian

There is an easier way to do that first drop down menu for a start:

[php]<select name="numberofthings" id="numberofthings">
<?php
$iMaxThings = 4;
for ($i=0; $i <= $iMaxThings; $i++) {
$extra = $numberofthings == $i ? ' selected="selected"' : '';
print '<option value="'.$i.'"'.$extra.'>'.$i.'</option>';
}
?>
</select>[/php]

I'm not quite sure what you are trying to do with the second menu. You are saying if someone chooses a value from the first menu, they should then get further menus with other options, is that correct?

is_that_so

If you want to pass variables to the server that you want returned to you then I'd look at session variables. Although as Serbian pointed out it's not clear why you need to go back to the server.
Is this required or can it just be done on the client. Have you considered DOM/Javascript?

Emerson

Serbian wrote:

There is an easier way to do that first drop down menu for a start:

[php]<select name="numberofthings" id="numberofthings">
<?php
$iMaxThings = 4;
for ($i=0; $i <= $iMaxThings; $i++) {
$extra = $numberofthings == $i ? ' selected="selected"' : '';
print '<option value="'.$i.'"'.$extra.'>'.$i.'</option>';
}
?>
</select>[/php]

I'm not quite sure what you are trying to do with the second menu. You are saying if someone chooses a value from the first menu, they should then get further menus with other options, is that correct?

Yep.. If the user wants two items, there will be two weight options. 3 for 3 etc.

I shall look into the javascript/sessions tomorrow is_that_so.. thanks!

Gosh

Another approach that wouldn't require refreshing the whole page would be to use AJAX.

On the first SELECT use the onClick event, the code associated with this issues an HTTP request passing the selected value, another piece of PHP code returns the weights table based on the selected value.

It's really that simple. Here's how this would work:

The JavaScript Code to handle the HTTP request, it will pass the value of the selected item (i.e. whatever you coded in the value=" part of the OPTION>) to the $_REQUEST variable

<script language="javascript" type="text/javascript">

/* The following function creates an XMLHttpRequest object... */

function createRequestObject(){
    var request_o; //declare the variable to hold the object.
    var browser = navigator.appName; //find the browser name
    if(browser == "Microsoft Internet Explorer"){
        /* Create the object using MSIE's method */
        request_o = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        /* Create the object using other browser's method */
        request_o = new XMLHttpRequest();
    }
    return request_o; //return the object
}

var http = createRequestObject();

function getWeights(){
   
    http.open('get', '[COLOR=Red]getweights.php?item=[/COLOR]' + 
             document.[COLOR=Red]formname[/COLOR].numberofthings.options[document.[COLOR=Red]formname[/COLOR].numberofthings.selectedIndex].value);
    
   /* Define a function to call once a response has been received.

    http.onreadystatechange = handleResponse;

    /* Send the data. We use something other than null when we are sending using the POST
        method. */

    http.send(null);
}

function handleResponse(){
    if(http.readyState == 4){ //Finished loading the response
        var response = http.responseText;
        document.getElementById('[COLOR=Red]weights_container[/COLOR]').innerHTML = response;
    }
}
</script>

This is your PHP code to build the SELECT drop down

[php]
<select name="numberofthings" id="numberofthings" onClick="getWeights()" >
<?php
$iMaxThings = 4;
for ($i=0; $i <= $iMaxThings; $i++) {
$extra = $numberofthings == $i ? ' selected="selected"' : '';
print '<option value="'.$i.'"'.$extra.'>'.$i.'</option>';
}
?>
</select>
<div id="weights_container"></div>
[/php]
Note: The last <div> is where the response from getweights.php is returned.

Create a new PHP page called getweights.php

The logic in this page should do the following:

Check that the item passed ($_REQUEST) is there and is valid, if it's not them simply echo/print a suitable error message and exit - this will be returned to where weights_container is on your page.


Once you have the correct SELECT table to return just echo/print this and exit and it'll appear where weights_container is on your page.

Just remember anything you echo/print in getweights.php will appear where weights_container is on your page. Make sure you do not have any other output (i.e. HTML statements).
[php]
for($i=0; $i<=$numberofthings; $i++) {
echo '<select name="select" id="select" >';
echo '<option>Select...</option>';
echo '<option value="10lb">10lb</option>';
echo '<option value="18lb">18lb</option>';
echo '<option value="20lb">20lb</option>';
echo '<option value="22lb">22lb</option>';
echo '</select>';
exit;
}
[/php]

So, when an item is chosen the onClick event goes to getWeights which will send off the request to getweights.php and wait for the response to come back from your server. Whatever response comes back is put into where weights_container is on your page.

Good Luck ....

Emerson

Thank you very much for your assistance!

Really appreciate it..

Gosh wrote:

Another approach that wouldn't require refreshing the whole page would be to use AJAX.

On the first SELECT use the onClick event, the code associated with this issues an HTTP request passing the selected value, another piece of PHP code returns the weights table based on the selected value.

It's really that simple. Here's how this would work:

The JavaScript Code to handle the HTTP request, it will pass the value of the selected item (i.e. whatever you coded in the value=" part of the OPTION>) to the $_REQUEST variable

<script language="javascript" type="text/javascript">

/* The following function creates an XMLHttpRequest object... */

function createRequestObject(){
    var request_o; //declare the variable to hold the object.
    var browser = navigator.appName; //find the browser name
    if(browser == "Microsoft Internet Explorer"){
        /* Create the object using MSIE's method */
        request_o = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        /* Create the object using other browser's method */
        request_o = new XMLHttpRequest();
    }
    return request_o; //return the object
}

var http = createRequestObject();

function getWeights(){
   
    http.open('get', '[COLOR=Red]getweights.php?item=[/COLOR]' + 
             document.[COLOR=Red]formname[/COLOR].numberofthings.options[document.[COLOR=Red]formname[/COLOR].numberofthings.selectedIndex].value);
    
   /* Define a function to call once a response has been received.

    http.onreadystatechange = handleResponse;

    /* Send the data. We use something other than null when we are sending using the POST
        method. */

    http.send(null);
}

function handleResponse(){
    if(http.readyState == 4){ //Finished loading the response
        var response = http.responseText;
        document.getElementById('[COLOR=Red]weights_container[/COLOR]').innerHTML = response;
    }
}
</script>

This is your PHP code to build the SELECT drop down

[php]
<select name="numberofthings" id="numberofthings" onClick="getWeights()" >
<?php
$iMaxThings = 4;
for ($i=0; $i <= $iMaxThings; $i++) {
$extra = $numberofthings == $i ? ' selected="selected"' : '';
print '<option value="'.$i.'"'.$extra.'>'.$i.'</option>';
}
?>
</select>
<div id="weights_container"></div>
[/php]
Note: The last <div> is where the response from getweights.php is returned.

Create a new PHP page called getweights.php

The logic in this page should do the following:

Check that the item passed ($_REQUEST) is there and is valid, if it's not them simply echo/print a suitable error message and exit - this will be returned to where weights_container is on your page.


Once you have the correct SELECT table to return just echo/print this and exit and it'll appear where weights_container is on your page.

Just remember anything you echo/print in getweights.php will appear where weights_container is on your page. Make sure you do not have any other output (i.e. HTML statements).
[php]
for($i=0; $i<=$numberofthings; $i++) {
echo '<select name="select" id="select" >';
echo '<option>Select...</option>';
echo '<option value="10lb">10lb</option>';
echo '<option value="18lb">18lb</option>';
echo '<option value="20lb">20lb</option>';
echo '<option value="22lb">22lb</option>';
echo '</select>';
exit;
}
[/php]

So, when an item is chosen the onClick event goes to getWeights which will send off the request to getweights.php and wait for the response to come back from your server. Whatever response comes back is put into where weights_container is on your page.

Good Luck ....

Adam

I see Gosh is being as helpful as ever! Fair play my good man!