Question

I’d like to output a live calculation in a form using jQuery, but I’m not sure where to start due to my lack of JS knowledge. I wonder if anyone can help me with this please?

Here are my field values:

<input type="hidden" name="total_days" value="{total_days}" />
<input type="text" name="cost_per_day" value="" />
<p>Total Cost: $<span class="total_cost"></span></p>

The total_days will be pre-filled with a value when the page loads. The cost_per_day will be entered by the user. I’d like the total_cost span to populate as the user types into the form, and the calculation is this:

total_days * cost_per_day = total_cost

Answer 1

I have added an id to your hidden text field and the user text field to retrieve their values It looks something like this .

<input type="hidden" name="total_days" id = "totaldays" value="10" />
<input type="text" name="cost_per_day" id = "mytextfield" value="" />
<p>Total Cost: $<span class="total_cost"></span></p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

The javascript goes as follows:

$("#mytextfield").on('keyup',function(){
        var totalcost= $("#totaldays").val() * $(this).val() 
        $(".total_cost").html(totalcost);
})

Hope this helps..