How do you store the selected option from a dynamic drop down list

Question

EDIT:

So, I have the color transferring to my cart page, but It is selecting the last option in my drop down when I try to add it to cart. I've been looking at ways to implement selected='selected', but it's a pain in this while loop.

My current products page:

        <?php
include("include/db.php");
include("include/productfunctions.php");

 if($_REQUEST['command'] == 'add' && $_REQUEST['productid'] > 0 &&   $_REQUEST['Color'] != ' ')
 {
    $product_id = $_REQUEST['productid'];
    $color = $_REQUEST['Color'];
    add_to_cart($product_id, 1, $color);
    header("Location:cart.php");
    exit();
 }
?>

<script type="text/javascript">
//This js is necessary to determine which button on the 
// form the user clicked.

function addtocart(prod_id, color_ID)
{
document.productform.productid.value = prod_id;
document.productform.Color.value = color_ID;
document.productform.command.value = 'add';
document.productform.submit();
}
</script>

<form name="productform" action="">
<input type="hidden" name="Color" />
<input type="hidden" name="productid" />
<input type="hidden" name="command" />
</form>

<table id="product_table">
<?php

$query = "SELECT * FROM product";
$result = mysqli_query($dbc, $query) or die("Error querying database");
while($row = mysqli_fetch_array($result))
{
    $p_ID = $row['Prod_ID'];

    echo '
    <div class="img">
    <strong>'.$row['name'].'</strong>

    <br><img src="' . $row['image'] . '" /></br>

    <div class="desc"> 
    Description: ' . $row['description'] . '<br>        
    <br>Price: $ ' . $row['price'] . '</br>
    <br>
    </div>';
    $query1 = "SELECT * FROM color c JOIN inventory i ON ( c.Color_ID =  i.Color_ID ) JOIN product p ON ( p.Prod_ID = i.Prod_ID ) WHERE p.Prod_ID = $p_ID"; 
    $result1 = mysqli_query($dbc, $query1) or die("Error querying database");

    Print "<p>Decorative Color:\n";
    Print "<select name=\"Color_ID\">\n";

    while($row = mysqli_fetch_array($result1))
    {
        $color_ID = $row['Color_ID'];

        Print "<option value=".$row['Color_ID']."> " . $row['Color'] . "\n     </option>";

    }

    Print "</select>\n";
    Print "</p>\n";

    echo '<div class="checkout">
    <input type="button" value="Add to Cart" onclick="addtocart('. $p_ID .    ','. $color_ID . ')" /></br>
    </div>
    </div>';

} 

?>

</table>

function to add to cart:

    function add_to_cart($product_id, $quantity, $color)
{
if($product_id < 1 || $quantity < 1)
{
    return;
}

if(is_array($_SESSION['cart']))
{
    $exists_results = product_exists($product_id);
    $exists = $exists_results[0];
    $position = $exists_results[1];

    if($exists)
    {
        $new_quantity = intval($_SESSION['cart'][$position]['quantity']);
        $new_quantity++;
        $_SESSION['cart'][$position]['quantity'] = $new_quantity;
    }
    else
    {
        $max = count($_SESSION['cart']);
        $_SESSION['cart'][$max]['productid'] = $product_id;
        $_SESSION['cart'][$max]['quantity'] = $quantity;
        $_SESSION['cart'][$max]['Color'] = $color;
    }

}

else
{
    $_SESSION['cart'] = array();
    $_SESSION['cart'][0]['productid'] = $product_id;
    $_SESSION['cart'][0]['quantity'] = $quantity;
    $_SESSION['cart'][0]['Color'] = $color;
}
}



 function product_exists($product_id)
{
$product_id = intval($product_id);
$max = count($_SESSION['cart']);
$flag = 0;

for($i=0; $i < $max; $i++)
{
        if($product_id == $_SESSION['cart'][$i]['productid'])
        {
            $flag = 1;
            break;
        }
}
return array ($flag, $i);
}

?>

The cart:

<?php
if(count($_SESSION['cart']))
{
    echo '<tr>
    <th>Name</th>
    <th>Price</th>
    <th>Decorative Color</th>
    <th>Qty</th>
    <th>Amount</th>
    <th>Options</th>
    </tr>';

    $max = count($_SESSION['cart']);
    for($i = 0; $i < $max; $i++)
    {
        $product_id = $_SESSION['cart'][$i]['productid'];
        $quantity = $_SESSION['cart'][$i]['quantity'];
        $color = $_SESSION['cart'][$i]['Color'];
        $product_name = get_product_name($dbc, $product_id);
        $product_price = get_price($dbc, $product_id);
        $product_color = get_color($dbc, $color);

        if($quantity == 0)
        {
            continue;
        }

        echo '<tr>
        <td>' . $product_name . '</td>
        <td>&#36; ' . $product_price . '</td>
        <td>' . $product_color . '</td>
        <td><input type="text" name="product' . $product_id . '" value="' .
                        $quantity . '" maxlength="4"   size="2" /></td>
        <td>&#36; ' . $product_price*$quantity . '</td>
        <td><a href="javascript:del(' . $product_id . ')">Remove Item</a>   </td>
        </tr>';         
    }

    echo '<tr>
    <td colspan="2"><strong>Order Total: &#36;' . get_order_total($dbc) .   '</strong></td>
    <td></td>
    <td colspan="3" id="cart_buttons">
    <input type="submit" value="Clear Cart" onclick="clear_cart()">
    <input type="submit" value="Update Cart" onclick="update_cart()">
    <input type="submit" value="Complete Order" onclick="complete_order()">
    </td>
    </tr>';
}
else
{
    echo '<tr><td>There are no items in your shopping cart.</td></tr>';
}
?>

EDIT 2:

function addtocart(prod_id)
{
document.productform.productid.value = prod_id;
document.productform.Color.value = $("select[name='color_' + prod_id] option:selected").val();
document.productform.command.value = 'add';
document.productform.submit();
}

Other Edit:

Print "<select name=\"Color_" . $p_ID . "\">";

Answer 1

Not sure if my observations will help, just some things I noticed or wondered about. In the first code block, it seems that you didn't provide closing option tags.

And in the second code block, I see that you try to GET the color, but then it doesn't look like you do anything with it. Also, you are doing a GET on "color" but the name of the select for Decorative Colors is "Color_ID". Finally, you seem to have put a blank cell where the item's "Decorative Color" is presumably supposed to appear. Can you confirm whether those details were intentional or not?

Edit: Add the following line to your <head>, before all other JS, to import jQuery.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

In your addtocart function, remove the color as the argument. Instead, change the document.productform.Color.value line to the following.

document.productform.Color.value = $("select[name='Color_ID']").val();

Something like that should work, but you'll have to try it. So let's dissect the $("select[name='Color_ID']").val() part of the line. In jQuery, you can select certain elements or groups of elements from the DOM; $("p") would select all paragraph elements, $("a") would select all anchor elements, and these are called selectors.

And you can specify further by saying you want elements with certain attributes; in this case, you are getting any selects with the name attribute "Color_ID" with the "[name='Color_ID']" part appended to the "select" element. After grabbing that particular element, the val() function on any selector is going to grab the selected element's value. See if that works.

Edit 2:

document.productform.Color.value = $("select[name='Color_ID'] option:selected").val();

Edit 3:

document.productform.Color.value = $("select[name='color_' + prod_id +] option:selected").val();

In this case, for each select, you'll have to give it the name "color_" . $p_ID. It just depends on however you want to name it.