Search code examples
jquerywordpressformscontact-form-7

JQuery Text Field Calculator

I am trying to use JQuery to update the deposit field each time a number is inputted in the total text field. I think maybe I need to parse the data? Any help would be appreciated

Contact-Form-7 

<label> Name </label>
    [text your-name] 

<label> Total </label>
    [number total min:1 class:total-amt] 

<label> Deposit </label>
    [number deposit id:deposit-amt] 

[submit "Send"]

JQuery

<script>
jQuery(document).ready(function($) {
    var $total_field = $('.total-amt'),
        $total_deposit = $('#deposit-amt');
$total_field.on('input', function(e) {
        $total_deposit.val(($total_field * 0.4));
    })
});
</script>
Solution

  • You're trying to multiply your text field ($total_field) by 0.4. What you want to do is get its value ($total_field.val()) and multiply it by 0.4.

    Meaning, this line:

    $total_deposit.val(($total_field * 0.4));

    has to change to:

    $total_deposit.val($total_field.val() * 0.4);