Calculate values based on Select menu value inside form

Question

I have following form:

<select name="Country" id="select2-basic" tabindex="1" class="span7">
<option value="All Countries">All Countries</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Aland Islands">Aland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="UK">United Kingdom</option>
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Uganda">Uganda</option>
<option value="Ukraine">Ukraine</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="United Kingdom">United Kingdom</option>
<option value="United States">United States</option>
<option value="United States Minor Outlying Islands">United States Minor Outlying Islands</option>
</select>


<select name="Quantity" id="select3-basic" tabindex="1" class="span1">
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
</select>


<input class="span1" readonly type="text" name="Visitors" value="">


<input class="span1" readonly type="text" name="Price" value="">

Now I am not jquery expert at all so I need help making this to work. I have following prices for countries:

US: $15 UK: $30 All other country: $15

What I want to do is:

When user select a value from Quantity select box, to show that number multiplied by thousand inside Visitors input field.
When user select e.g. country United States and Quantity = 5, to show value inside Price field which will be $75 OR if user choose UK to show $150

I will be expending new prices for new countries too so I need something that will be easily changeed/added inside JS or JQuery later.

Thanks a lot guys!

tymeJV · Accepted Answer · 2013-09-19 15:29:24Z

2

Pretty simple using the .change() event. You should also use the value attribute to assign the number per country (ex: US value would be 15)

//Quantity
$("#select3-basic").change(function() {
    var value = parseInt(this.value);
    value = value * 1000;

    $('input[name="Visitors"]').val(value);
});

//Country (change values to be the number to multiply!
$("#select2-basic").change(function() {
    var countryVal = parseInt($(this).data("quantity"));
        quantityVal = parseInt($("#select3-basic").val()),
        value = countryVal * quantityVal;

    $("input[name=Price]").val(value);
});

edited Sep 19, 2013 at 15:29

answered Sep 19, 2013 at 15:06

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Boris Zegarac Over a year ago

for country field you specified that it should use Value but I need to keep Value to be country name so I can submit it inside database, anyway to get that value for <option></option> something like data attribut?

tymeJV Over a year ago

Sure, you can use a custom data attribute such as data-quantity then retrieve that with $(this).data("quantity") @BorisZegarac

Boris Zegarac Over a year ago

can you please make that change inside your above code? Also, do I need to apply JQuery source inside the page since it does not work when I try it? Thanks

tymeJV Over a year ago

Yes, you'll have to wrap this in a document.ready(function() {}); call.

The Alpha · Accepted Answer · 2013-09-19 16:21:34Z

1

You may try this

$(function(){
    var prices = { 'United States':15, 'United Kingdom':30 };
    $('#select2-basic, #select3-basic').on('change', function(){
        if(this.name == 'Quantity'){
            $('input[name="Visitors"]').val(+this.value*1000);
            $('input[name="Price"]')
            .val(prices[$('#select2-basic').val()] ? (prices[$('#select2-basic').val()]*this.value) :  (15*this.value));
        }
        else if(this.name == 'Country'){
            $('input[name="Price"]')
            .val(prices[this.value] ? (prices[this.value]*$('#select3-basic').val()) :  (15*$('#select3-basic').val()));
        }
    });
}).trigger('change'); // updated on request

DEMOS : jdFiddle or jsBin, updated demo.

edited Sep 19, 2013 at 16:21

answered Sep 19, 2013 at 15:29

The Alpha

147k30 gold badges294 silver badges313 bronze badges

2 Comments

Boris Zegarac Over a year ago

lovely, its working. Since the minimum and default quantity is 3 and default country is Afghanistan, is it possible to make Price and Visitors field show 45 and 3000 since those two fields are already selected and then when user change them to sync those two fields as your script doing it now? Thanks for help!

Boris Zegarac Over a year ago

yes it is working as I need it, just a small thing is that when I open jsbin.com/oVUmeR/1 both fields are empty and I need them show fields populated with those default selected values. Hope you understand what I am saying.

Vandesh · Accepted Answer · 2013-09-19 15:27:19Z

This should work for you :

   var quantity;
   $("select[name='Quantity']").on('change',function(){
     quantity = parseInt(this.value);
     $("input[name='Visitos']").val(quantity*1000);
   });

  $("select[name='Country']").on('change',function(){
     if(typeof quantity!="undefined" && quantity!=null){
       var priceVal = this.value=="United Kingdom"?30*quantity : 15*quantity;
       $("input[name='Visitos']").val(priceVal);
    }
   });

The if(typeof quantity!="undefined" && quantity!=null) condition will check if quantity has been selected or not.

Here's some Info on .val() & .on() methods used above from Jquery docs.

EDIT : You can change
$("input[name='Visitos']").val(priceVal);
to
$("input[name='Visitos']").val("$"+priceVal);
incase you want to prepend the value with a $ sign

Collectives™ on Stack Overflow

Calculate values based on Select menu value inside form

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related