CODEWITHSUNDEEP
javascripthtmlformsfunction
Phil Mulkins
Phil Mulkins

Reputation: 186

Need Value from Simple Javascript Addition Multiplication

I'm not sure what I am doing wrong, but I am just trying to get a total price to display after you make a selection. I want to take the value of the selection and multiply it by 100 and then use the updatetotal function to display the total.

// Collect Data & Prices To Update Dynamic Prices
 var pricechecking=document.getElementById('howmanyaccts')value.trim();
 var pricepaypal=document.getElementById('howmanyacctspaypal')value.trim();

 var pricecheck = pricechecking * 100;
 var pricepay = pricepaypal * 100;

 function updateTotal() {

 var ThePrice = pricecheck + pricepay;

 $('#TotalPrice').text('$' + ThePrice + '.00');
 }

 $(function () { $('.DoPricing').click(updateTotal); });

MY HTML IS:

<form action="http://linktomyactionpage" method="post" >
 <p>How many accounts to pay by check?</p>
 <select name="howmanyaccts" id="howmanyaccts" class="DoPricing">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
 </select>

 <p>How many accounts to pay by paypal?</p>
 <select name="howmanyacctspaypal" id="howmanyacctspaypal" class="DoPricing">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
   <option value="4">4</option>
   <option value="5">5</option>
 </select>

 <p>Total: <span id="TotalPrice">$0.00</span></p>

 <input type="submit" name="submit" value="submit">
 </form>

What if I simplified the code? Brought the 00.00 to the text and no multiplication?

 // Collect Data & Prices To Update Dynamic Prices
 var pricechecking=document.getElementById('howmanyaccts').value.trim();
 var pricepaypal=document.getElementById('howmanyacctspaypal').value.trim();

 function updateTotal() {

     var ThePrice = pricechecking + pricepaypal;

     $('#TotalPrice').text('$' + ThePrice + '00.00');
 }

 $(function () { $('.DoPricing').click(updateTotal); });

HERE IS WHAT I GOT TO WORK:

 // Collect Data & Prices To Update Dynamic Prices
 var pricechecking=document.getElementById('howmanyaccts').value.trim();
 var pricepaypal=document.getElementById('howmanyacctspaypal').value.trim();

 function updateTotal() {
 var pricecheck = parseInt($('#howmanyaccts').val(), 10);
 var pricepay = parseInt($('#howmanyacctspaypal').val(), 10);

     var ThePrice = pricecheck + pricepay;

     $('#TotalPrice').text('$' + ThePrice + '00.00');
 }

 $(function () { $('.DoPricing').click(updateTotal); });

Upvotes: 0

Views: 960

Answers (2)

Sudarshan Tanwar
Sudarshan Tanwar

Reputation: 3607

Here is working DEMO

use like this :

$(document).ready(function () {
        var pricechecking = $($("#howmanyaccts")[0].selectedOptions).attr("value");
        var pricepaypal = $($("#howmanyacctspaypal")[0].selectedOptions).attr("value");

        function updateTotal() {
            var pricecheck = parseInt($('#howmanyaccts').val(), 10);
            var pricepay = parseInt($('#howmanyacctspaypal').val(), 10);

            var ThePrice = pricecheck + pricepay;

            $('#TotalPrice').text('$' + ThePrice + '00.00');
        }

        $('.DoPricing').change(updateTotal);
    });

Upvotes: 0

Elyx0
Elyx0

Reputation: 369

I think you want to do something like this : http://jsfiddle.net/F3HbJ/

$(function () {
    $('.DoPricing').change(function () {
        var total = 0;
        $('.DoPricing').each(function () {
            total += parseInt($(this).val()) * 100;
        });
        $('#TotalPrice').html('$' + total);
    });
});

The event handler is .change() for a select. Then you loop through the parseInt values of each select that you multiply by 100.

Upvotes: 1

Related Questions