Selecting default value in html dropdown list

Question

I am currently looking to have a drop down list in my form. I have this drop down which selects the default value:

<p>Price Band:<select id='priceBand' style = 'width:150px' value = 'band1'>
<option value="band7">Reduce by 30c</option>
<option value="band6">Reduce by 25c</option>
<option value="band5">Reduce by 20c</option>
<option value="band4">Reduce by 15c</option>
<option value="band3">Reduce by 10c</option>
<option value="band2">Reduce by 5c</option>
<option value="band1" selected="selected">default</option>
</select></p>

Which works fine and selects the default as the default value. But what I also need to be able to do - after the form is submitted I want it to keep the last selected value as the default one. It is a form used to add sales with different price bands. The sales are entered by the price bands so the defaults are entered first, the band2, band3 and so on.. What is the best way of doing it? I am currently using javascript and php on the page if that makes it any easier?

Ajax code. I didn't include getting the value of the dropdown as this is only a new thing that I am implementing. I just want to know if it is possible to have a default value selected when the form is loaded first and then when a different value is selected, to keep that value as the new default:

 $('#divItemisedSaleAdd').dialog({'autoOpen': false, 'modal' : true, 'buttons' : 
 [ { text: "Ok", click: function() {
 var url = '<?php echo Navigation::gUrl('/users/admin/stocktake_details_sales.php', array('stocktake_id' => $stocktake_id, 'action' => 'add_itemised_sale'));?>';
 var productCode = $('#ProductCode').val();
 var qty = $('#Quantity').val();
 var dialog = this;
 $.ajax({
 url: url,
 dataType: 'json',
 data: {'productCode' : productCode, 'qty' : qty},
 type: 'post',
 timeout: 5000,
 success: function(json) { 
 if (json.status == 'S'){
 alert('Sale added'); 
 }
 else if (json.status == 'E')
 alert('No product with given PLU was found! Please check!');
 // loadDepartments();
 $( dialog ).dialog( "close" );
 },
 error: function() {}
 }); 
 } } ] });

• user4796879: Does the form submit to a process page with php or ajax?
• ArtleMaks: it submits with ajax
• user4796879: stackoverflow.com/questions/18633427/…
• divy3993: You can use cookies or if your form is for registered users(members that have account) you can add one more column to your users(or whatever table you have) table and while ajax request on submit also run a insert query which inserts selected value in users table which can be used next time as default.
• fquffio: Does it need to be the default value only for the next page view (hence, select a default value according to the $_POST data) or to be persisted across user session (thus, using $_SESSION or $_COOKIE)?

Answer 1

You can use localStorage for that purpose:

$('#divItemisedSaleAdd').dialog({'autoOpen': false, 'modal' : true, 'buttons' : 
 [ { text: "Ok", click: function() {
 var url = '<?php echo Navigation::gUrl('/users/admin/stocktake_details_sales.php', array('stocktake_id' => $stocktake_id, 'action' => 'add_itemised_sale'));?>';
 var productCode = $('#ProductCode').val(),
 qty = $('#Quantity').val(),
 dialog = this;
 // save current selected value in storage
 localStorage.setItem("default_option", productCode);
 $.ajax({
 url: url,
 dataType: 'json',
 data: {'productCode' : productCode, 'qty' : qty},
 type: 'post',
 timeout: 5000,
 success: function(json) { 
 if (json.status == 'S'){
 alert('Sale added'); 
 }
 else if (json.status == 'E')
 alert('No product with given PLU was found! Please check!');
 // loadDepartments();
 $( dialog ).dialog( "close" );
 },
 error: function() {}
 }); 
 } } ] });
// after page reload
if (localStorage.getItem("default_option")) {
 $('#ProductCode').val(localStorage.getItem("default_option")); 
}

• ArtleMaks: Can you explain the localStorage for me please? I don't know if this way would work though. Your comment says 'after page reload' but the page doesn't really reload. I think I have answered my question though. Since the page doesn't reload, the last selected value stays selected anyway, until I refresh the page.. Stupid me!

Answer 2

This might do it - either selected = "selected" or just selected depending on whether you will use XHTML or not. It requires making the value a simple integer, but that simplifies cleaning it up by allowing you just to use its intval() which you would use in your query as well as to control the selected option. This version assumed page submission which apparently is not the case here now as it is all done by Ajax but hope it will be useful to someone.

 if(!isset($priceBand_value)) $priceBand_value = array();
 $priceBand_value = ''; // reset it if already used
 // set default 'selected = "selected"'; or just 'selected'; 
 <?php if(!isset($_POST['priceBand']) $priceBand_value[1] = 'selected = "selected"'; ?>
 <?php $priceBand_value[intval($_POST['priceBand'])] = 'selected = "selected"'; ?>
 <p>Price Band:<select id='priceBand' style = 'width:150px'>
 <option value="7" <?php echo $priceBand_value[7] ?>>Reduce by 30c</option>
 <option value="6" <?php echo $priceBand_value[6] ?>>Reduce by 25c</option>
 <option value="5" <?php echo $priceBand_value[5] ?>>Reduce by 20c</option>
 <option value="4" <?php echo $priceBand_value[4] ?>>Reduce by 15c</option>
 <option value="3" <?php echo $priceBand_value[3] ?>>Reduce by 10c</option>
 <option value="2" <?php echo $priceBand_value[2] ?>>Reduce by 5c</option>
 <option value="1" <?php echo $priceBand_value[1] ?>>default</option>
 </select></p>

You could start from 0 rather than 1 for most cases but this was intended primarily to fit the code framework given. This would avoid the need to set the default as intval($_POST['priceBand']) would be 0 when the page is first rendered but in this case it could be harder to keep track of the "bands".