Question

I am using CodeCanyon’s Price Calculator, and am having some Javascript trouble.

The first field calculates the tuition amount based on the number of credit hours.

The second field (where I’m having trouble) is supposed to take the number of credit hours selected from the first field, divide it by 3 to get the number of classes, and then multiply by 100 to arrive at the amount of money needed for textbooks.

I have tried achieving this equation with Javascript and some ASP, but haven’t been successful. I’m no Javascript expert, but here is the code as it presently stands. Any help is much appreciated!

HTML markup

The “f_4” and “f_7-textbooks” are variables named in the script below.
f_4 is the number of credit hours selected.
In f_7-textbook, I’ve attempted to call the value of f_4, divide it by 3 and multiply it by the value sent from the database (hence, <%=budgetRS(“budget_BooksandSupplies_sem1”)%>), which is set to “100”.

<fieldset>
<p>1 class = 3 credit hours.</p>
<p>
    <label>Number of Credit Hours: <input class="spinner" type="text" id="f_4" name="f_4" data-spinner='{"min": 0, "max": 42, "step": 3}' data-default="0" value="3" data-cost="<%=FormatNumber(budgetRS("budget_Tuition_sem1"), 2)%>"/></label> 
    <span class="staticPrice">
    </span>
</p>
<p>
    Textbook Estimate ($<%=budgetRS("budget_BooksandSupplies_sem1")%>/3 credit hours): 
    <input type="hidden" name="f_7-textbooks" value="{f_4}/3*<%=budgetRS("budget_BooksandSupplies_sem1")%>" />
</p>
</fieldset>

Javascript

<script type="text/javascript">
$(function(){
    var form = $('#jquery-order-form');

    //form.find('span.staticPrice').remove();
    form.find('option').each(function(i){
        var opt = $(this)
        opt.text(opt.val());
    });

    var items = [];
    items['f_4'] = 'Credit Hours ($<%=budgetRS("budget_Tuition_sem1")%>/credit hour)';
    items['f_7-textbooks'] = 'Textbook Estimate ($<%=budgetRS("budget_BooksAndSupplies_sem1")%>/credit hour)';

    });

});
</script>

The full code for this calculator is available at http://media.briercrest.ca/calculators/collegecalculator.asp

Answer 1

You are trying to use client side values in your serverside code which has no access to this data and is resulting in being output.

<input type="hidden" name="f_7-textbooks" value="{f_4}/3*100">

You should use only client side values in your client side code and vice versa for your server side.

The code below should get the value you require.

$('.ui-spinner-button').click(function() { $(this).siblings('input').change(); });

$('#f_4').spinner().change(function() {
   var f4Val = $('#f_4').val();
   var calcValue = (f4Val/3)*100;
   $('input[name="f_7-textbooks"]').val(calcValue);
});

See this fiddle