jQuery / PHP / MySQL提交隐藏的选择下拉列表

Question

I have the following code I am using to populate a second dropdown box after the first dropdown box is selected (actually they are all already made, it just reveals the correct one based on your first dropdown:

<tr><th>Customer</th><td>
        <select name='customer_id' id='customer_id'>
            <option value=''>-- Select Customer --</option>
            <?php
            $results = Misc::customerDropDown();
            while ($row = mysql_fetch_array($results)) {
                echo "<option value='" . $row['customer_id'] . "'>" . $row['customer_name'] . "</option>";
            }
            ?>
        </select><span class='error'>&nbsp;*&nbsp;<?php echo $errors['customer_id']; ?></span>
    </td></tr>
<?php
$results = Misc::customerDropDown();
$num_customers = mysql_num_rows($results);
$n = 1;
while ($row = mysql_fetch_array($results)) {
    ?>
    <tr class='locations' id='locations<?= $row['customer_id'] ?>'><th>Customer Location</th><td>
            <select name='customer_location<?= $n ?>'>
                <option value=''>-- Customer Locations --</option>
                <?
                $location_results = Misc::locationDropDown($row['customer_id']);
                while ($option = mysql_fetch_array($location_results)) {
                    echo "<option value='" . $option['location_id'] . "'>" . $option['location_name'] . "</option>";
                }
                ?>
            </select><span class='error'>&nbsp;*&nbsp;<?php echo $errors['customer_location']; ?></span></td></tr>                                   
    <? $n++;
} ?> 

The problem that I'm having is that no matter what I've tried the last 'customer_location' dropdown is the one that always gets used because when it submits it's (I believe) overwriting the other two.

I tried making customer_location an array (customer_location[]) but that just makes it think there are (for example) 3 arrays instead of an array with 3 elements. I also tried (as shown) naming the location by tacking on a $n to the end of each one but then when I go to reference the post I don't know how as I can't reference $_POST['customer_location$n']

Ideas?

Answer 1

Whether the dropdowns are visible or not, they are still apart of the form. And their values will get posted back to the server on submit. Since you are using logic on the client side to determine which dropdown will be shown, you are going to have to use the same logic on the server side to determine which dropdown's value to get.

You can reference $_POST['customer_location1'] , or $_POST['customer_location2'] , etc.

I also noted a typo. The last portion should look like this.

<?php
    $results = Misc::customerDropDown();
    $num_customers = mysql_num_rows($results);
    $n=1;
    while($row = mysql_fetch_array($results)){
        ?>
        <tr class='locations' id='locations<?=$row['customer_id']?>'>
                <th>Customer Location</th>
                <td>
                    <select name='customer_location<?=$n?>'>
                        <option value=''>-- Customer Locations --</option>
                        <?
                        $location_results = Misc::locationDropDown($row['customer_id']);
                        while($option = mysql_fetch_array($location_results)){
                            echo "<option value='".$option['location_id']."'>".$option['location_name']."</option>";
                        }
                        ?>
                    </select>
                    <span class='error'>&nbsp;*&nbsp;<?php echo $errors['customer_location'.$n]; ?></span>
                </td>
            </tr>
        <?
        $n++;
    }
?>

The closing td and tr need to be in the loop. And the $errors should probably include $n .

EDIT

For example, dropdown 1 looks like this:

<select id='dd'>
   <option value='1'>1</option>
   <option value='2'>2</option>
   <option value='3'>3</option>
</select>

In your jquery you've got a change handler that shows the right dropdown (this part will really only work in this exact example, but you said you already had this part working, so I'm glossing over it... basically 'do logic to show correct dropdown').

$("#dd").change(function() {
   var dd = $(this).val();
   $("#dd1").hide();
   $("#dd2").hide();
   $("#dd3").hide();
   $("#dd" + val).show();
});

Then you've got your three dropdowns that are hidden:

<select id='dd1' style='display: none;'>
   <option value='1'>1</option>
   <option value='2'>2</option>
   <option value='3'>3</option>
</select>
<select id='dd2' style='display: none;'>
   <option value='1'>1</option>
   <option value='2'>2</option>
   <option value='3'>3</option>
</select>
<select id='dd3' style='display: none;'>
   <option value='1'>1</option>
   <option value='2'>2</option>
   <option value='3'>3</option>
</select>

Then you select option 2 in #dd . #dd2 is shown, then you select option 1, and click submit. Then in your php code (my php may be a bit rusty):

$val = $_POST['dd'];
$ddval = '';

if ($val == '1') {
   $ddval = $_POST['dd1'];
} else if ($val == '2') {
   $ddval = $_POST['dd2'];
} else if ($val == '3') {
   $ddval = $_POST['dd3'];
} 

Answer 2

Based on a tip from @Barmar (see comments) I was able to piece together the solution to find and assign the value of the needed input with the following:

// Figure out which customer_location$n to use
                foreach ($_POST as $key=>$value){ 
                 if (preg_match('/^customer_location/', $key)){ 
                  if($value!=NULL){ $location = $value; }
                 }
                }