CODEWITHSUNDEEP
jquery
Kegan Quimby
Kegan Quimby

Reputation: 546

How to multiply a drop down form field with a text field using jquery

I have a form with a dropdown that has different dollar amount... $50, $100, etc. The problem is jQuery doesn't recognize $50 as 50, and I can't figure out how to use a regex or some other method to filter out the dollar sign in front of the $50 so I can multiply two values (that value * an input field).

After the two values are multiplied, I'm trying to append the total to the span with the id of total.

EDIT: I can't edit the HTML.

HTML:

<span class="Amount">
    <select name="Amount" class="wpcf7-form-control  wpcf7-select">
        <option value="$50">$50</option>
        <option value="$75">$75</option>
        <option value="$100">$100</option>
        <option value="$150">$150</option>
        <option value="$300">$300</option>
    </select>
</spa>

<span class="Qty">
    <input type="text" name="Qty" size="2" maxlength="2">
</span>

<span id="total">total: </span>

JS:

$('.Qty input').keyup(function() {
    var quantity = parseFloat($(this).val());

    //this returns NaN
    var dollars = $('span.Amount select').val();

    $('#total').text((quantity * dollars )); 
});​

Upvotes: 1

Views: 1760

Answers (2)

Musa
Musa

Reputation: 97672

You just have to remove the '$'

$('.Qty input').keyup(multiply);
$('span.Amount select').change(multiply);
function multiply() {
    var quantity = parseFloat($('.Qty input').val());

    var dollars = $('span.Amount select').val().substr(1);

    $('#total').text('$'+(quantity * dollars )); 
}​

http://jsfiddle.net/mowglisanu/Y5YnF/1/

Upvotes: 2

Mike Brant
Mike Brant

Reputation: 71384

Just don't have the $ in your field value. That is just a display decoration for your amount and should not be in the value you work with or POST to the web server to work with.

Upvotes: 0

Related Questions