Correct method to store option values in a select box

Question

Sorry to post a question which has already been posted, however I am really struggling to get this functionality to work. When I change a select box option value I want it to remain the same on page refresh or logout. Must I use AJAX/PHP to get this to work? I have tried to do this to no avail. Possible to run DB update function when dropdown is selected .

My code looks like:

echo '<tr>';
    echo '<td><input type="text" name="order_no[]" value="' . $row['Orderno'] . '"/></td>';
    echo '<td><input type="text" name="order_date[]" value="' . $row['Orderdate'] . '"/></td>';
    echo '<td><input type="text" name="order_ordered_by[]" value="' . $row['Orderedby'] . '"/></td>';
    echo '<td><input type="text" name="order_supplier[]" value="' . $row['Supplier'] . '"/></td>';
    echo '<td><input type="text" name="order_total_price[]" value="' . $row['totalprice'] . '"/></td>';
    echo '<td><input type="text" name="order_requested_by[]" value="' . $row['requestedby'] . '"/></td>';
    echo '<td>';
    echo '<select id ="id" name="id">';
    echo '<option value = "1" class = "pending">Pending</option>';
    echo '<option value = "2" class = "approved">Approved</option>';
    echo '<option value = "3" class ="disapproved">Disapproved</option>';
    echo '</select>';
    echo '</td>';
    echo '</tr>';

Answer 1

You can store selected value in cookie, have a look at jquery cookie plugin.

Or if you are able to identify the user somehow, you can store the value on the server and render it right away. But when you state, that selected value should be persisted even after logout, you will need cookie anyway to store some identification token.

Answer 2

Sounds like the selected status should be an attribute of the order. So you should make an ajax call to PHP (or whatever your server-side language is) to update the status when the selectbox changes. And the selectbox itself should look something like:

echo '<select id ="id" name="id">';
echo '<option value = "1" class = "pending"' . ($row['status'] == 'Pending' ? ' selected=selected' : '') . '>Pending</option>';
echo '<option value = "2" class = "approved"' . ($row['status'] == 'Approved' ? ' selected=selected' : '') . '>Approved</option>';
echo '<option value = "3" class ="disapproved"' . ($row['status'] == 'Disapproved' ? ' selected=selected' : '') . '>Disapproved</option>';
echo '</select>';

I don't think cookies should be necessary

Answer 3

Just do the the following jquery and ajax code to do this

$('#id').change(function(){
   var val = $('#id').val();
   $.ajax({
        type: 'POST',
        url: '',//url of the file
        data: val,
        success: function(msg){
      }
    });
});

Answer 4

There is a nice example on JQuery UI that uses a autocomplete box. IMHO much nicer than the select dropdown. It has all the AJAX functionality that with few lines of you get a working example:

<script>
    $(function() {
        $( "#birds" ).autocomplete({
            source: "search.php",
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.value + " aka " + ui.item.id :
                    "Nothing selected, input was " + this.value );
            }
        });
    });
    </script>