CODEWITHSUNDEEP
jquery
Mike
Mike

Reputation: 143

Update price in text field from selection

I have a text field in which we manually enter a price.

I then have a select field with packages that can be selected by the user. Depending on what is selected, I want the price of the package to be added to the text field.

My HTML is...

 <label for="_cost">Total Cost:</label><br />
        &pound;<input type="text" name="_cost" id="_cost" value="" placeholder="0.00" />

<label for="_package">Select an Event Package:</label><br />
                <select name="_package" id="_package">
                <option value="" data-price="0.00">No Package</option>

                <option value="test" data-price="100.00">Test</option>
                </select>

What is the best way to do this with jQuery

Upvotes: 0

Views: 93

Answers (2)

Mike
Mike

Reputation: 143

something like this seems to work...

$(document).ready(function () {
                base = 0;
                $("#_cost").on("keyup", function () {
                    base = $('#_cost').val();
                });
                $("#_package").on("change", function(){            
                    var total = (base * 100 + $(this).find(":selected").data("price") * 100 ) / 100;  
                    $("#_cost").val(total.toFixed(2));
                });
            });

Upvotes: 0

Johan Karlsson
Johan Karlsson

Reputation: 6476

Something like this would work:

$(document).ready( function(){
    $("select").on("change", function(){            
        $("#_cost").val( $(this).find(":selected").data("price") );  
    });
});

Upvotes: 2

Related Questions