Question

Hi I am trying to make a basic form that adds a value of £1.50 on to total price if check box is checked. So i have a user input a price (value for a voucher) they can either pick up or get it delivered – delivery is £1.50.

I have a basic knowledge of javascript and found the following code that allows me to add two form fields together –

<script type="text/javascript"><!--
function updatesum() {
document.form.sum.value = (document.form.sum1.value -0) + (document.form.sum2.value -0);
}
//--></script>

html

<form name="form" >
Enter a number:
<input name="sum1" onChange="updatesum()" />
and another number:
<input type="checkbox" name="sum2" onChange="updatesum()" value="1.50" checked> 
Their sum is:
<input name="sum" readonly style="border:0px;">
</form>

obviously this works but again obviously the value stays at 1.50 whether the box is checked or not – so i need help with an “if” statement. have searched around but really am quite stuck.

Answer 1

You need to only add the value if the checkbox is checked.

<script type="text/javascript">
function updatesum() {
     var deliveryFee = document.form.sum2.checked ? Number(document.form.sum2.value) : 0;
     document.form.sum.value = (document.form.sum1.value -0) + deliveryFee;
}
</script>

You might want to consider using a framework like jQuery to help with this. It will make it easier to write your code and help you keep your code separate from your HTML, improving it’s readability and your ability to debug it.

<form name="form" >
    Enter a number:
    <input id="voucher" name="cost" />
    and another number:
    <input type="checkbox" id="deliveryFee" name="fee" value="1.50" checked="checked" > 
    Their sum is:
    <input id="total" name="sum" readonly style="border:0px;">
</form>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.js"></script>
<script type="text/javascript">
    $(document).ready( function() {
        $('#voucher,#deliveryFee').change( function() {
             var fee = Number( $('#deliveryFee:checked').val() || 0 );
             var cost = Number( $('#voucher').val() );
             $('#total').val( cost + fee );
        });
     });
</script>