Passing checkbox/radio button value to hidden input box

[nolimit]

Hi,

I'm currently doing a booking form which uses jquery to calculate the total price instantly without the browser refreshing.

In the booking form the user has the option to add cancellation cover to the order.

Is it possible to use 1 checkbox/radio box with 2 number value (1 and 0), to check or uncheck and their action is immediately calculated instantly and added to the total cost without the browser refreshing?

I have been able to do it with onclick applied to the radio buttons and browser refresh script but it doesn't work in Safari and Opera.


Here is the Jquery, using the jquery.calculation.min.js

<script type="text/javascript">
// Price calculation
    var bIsFirebugReady = (!!window.console && !!window.console.log);

    $(document).ready(
        function (){
            // update the plug-in version
            $("#idPluginVersion").text($.Calculation.version);
            
            // bind the recalc function to the quantity fields
            $("input[@name^=qty_item_]").bind("keyup", recalc);
            // run the calculation function now
            recalc();

            // automatically update the "#totalSum" field every time
            // the values are changes via the keyup event
            $("input[@name^=sum]").sum("keyup", "#totalSum");
           
            // automatically update the "#minNumber" field every time
            // the values are changes via the keyup event
            $("input[@name^=min]").min("keyup", "#numberMin");

            // automatically update the "#minNumber" field every time
            // the values are changes via the keyup event
            $("input[@name^=max]").max("keyup", "#numberMax");

            // this calculates the sum for some text nodes
            $("#idTotalTextSum").click(
                function (){
                    // get the sum of the elements
                    var sum = $(".textSum").sum();

                    // update the total
                    $("#totalTextSum").text("£" + sum.toString());
                }
            );

        }
    );
    
    function recalc(){
        $("[@id^=total_item]").calc(
            // the equation to use for the calculation
            "qty * price",
            // define the variables used in the equation, these can be a jQuery object
            {
                qty: $("input[@name^=qty_item_]"),
                price: $("[@id^=price_item_]")
            },
                        // define the formatting callback, the results of the calculation are passed to this function
            function (s){
                // return the number as a dollar amount
                return "£" + s.toFixed(2);
            },
            // define the finish callback, this runs after the calculation has been complete
            function ($this){
                // sum the total of the $("[@id^=total_item]") selector
                var sum = $this.sum();
                
                $("#grandTotal, #grandTotal2, #grandTotal3").text(
                    // round the results to 2 digits
                    "£" + sum.toFixed(2)
                );
                                            
            }
            
        );
    }
    </script>
 //  radiobox value calculation
<script type="text/javascript">
// Prepopulating the form calculation 
    function plus(object)
    {   
    $('#qty_item_2').show();
    $('#qty_item_2').val(object); 
	}
</script>

The HTML

<ul>
<li><label>Number or adults:</label><input name="qty_item_1" id="qty_item_1" value="1" size="2" type="text"></li>

<li><label>Arrival date:</label><input name="q60515:q2" value="DD/MM/YYYY" size="30" maxlength="300" class="date-pick dp-applied" id="date1" type="text"><a href="#" class="dp-choose-date" title="Choose date">Choose date</a></li>

<li><label>Add cancellation cover?</label>
Yes <input name="cover" value="no" onclick="javascript:plus('1'); window.location.reload()" type="radio">
No <input name="cover" value="yes" onclick="javascript:plus('0'); window.location.reload()" type="radio">

<li><label>Cancellation: <input name="qty_item_2" id="qty_item_2" value="0" size="2" type="text"></label</li>
</ul>
			
<table>
<tbody><tr><th>Deals</th><th>Price</th><th>Total</th></tr>
<tr><td>3 Nights in Edinburgh</td><td id="price_item_1">£20</td><td id="total_item_1">£20.00</td>
</tr><tr><td>Cancel Cover</td><td id="price_item_2">£4.99</td><td id="total_item_2">£0.00</td></tr>

<tr><td class="grandTotal-bold">Grand Total:</td><td></td><td id="grandTotal">£20.00</td>
</tr></tbody></table>

At the moment only way to calculate the full cost without browser refresh and cross browser problem is to manually input the 1 or 0 value into the inside text input box.


Any suggestion or help is appreciated.

Thanks.

 

[probedb]

You should be able to use onclick="yourfunction(this)" , whatever function you call can then get what it needs from the passed in value which is the form element. if that makes any sense.