CODEWITHSUNDEEP
javascriptphphtml
ArtleMaks
ArtleMaks

Reputation: 171

Selecting default value in html dropdown list

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() {}

         });    


          } } ] });

Upvotes: 2

Views: 2280

Answers (2)

Steve
Steve

Reputation: 818

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".

Upvotes: 0

RomanPerekhrest
RomanPerekhrest

Reputation: 92854

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")); 
}

Upvotes: 1

Related Questions