asked on

Javascript or Jquery

Have 3 radio buttons with prices and display then in a div as sub total. Every product has different shipping options. Would like that price to be also added to hidden text box input

Looking for something like this http://www.wnews9.com/evin-sandbox/melatrol.com/order-page/order-page.php

ninjadude12

ASKER

thanks

ASKER CERTIFIED SOLUTION

Gurvinder Pal Singh

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ninjadude12

ASKER

this does not do anything...

would like 3 options in radio and for each option chosen separate shipping options.

Gurvinder Pal Singh

try this then

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
	<script src="jquery-1.4.2.min.js"></script>
	<script>
		$(document).ready(function(){
			$("input[name='radioPrice']").bind("click", function(){
				$("#options").show();
				$("#subtotal").html("Subtotal is " + $(this).val());

				switch( $(this).index() )
				{
					case 0:
						$("#options").html("<option value='31.88'>Rush Delivery 31.88</option><option value='12.88'>Standard Delivery 12.88</option>");
					break;

					case 1:
						$("#options").html("<option value='51.88'>Rush Delivery 51.88</option><option value='32.88'>Standard Delivery 32.88</option>");
					break;

					case 2:
						$("#options").html("<option value='71.88'>Rush Delivery 71.88</option><option value='52.88'>Standard Delivery 52.88</option>");
					break;
				}
			});
		});

	</script>
</HEAD>

<BODY>
	Option1 <input type="radio" id="radio1" value="$149.95" name="radioPrice"/>149.95 <br/>
	Option2 <input type="radio" id="radio2" value="$49.95" name="radioPrice"/>49.95<br/>
	Option3 <input type="radio" id="radio3" value="$99.95" name="radioPrice"/>99.95<br/><br/>

	<span id="subtotal"></span><br/><br/>

	Choose a Shipping option: <select id="options"><option value=""><----Select an option above----></option></select>
</BODY>
</HTML>

Open in new window

ninjadude12

ASKER

gurvinder372 this is very close I have it here http://www.evinw.com/jquery-order-page/index.html

but when you hit option 3 the shipping does not work. Also on that page the total is not coming out on the input box as well. Need one like its there and one in a input to put in form.

Gurvinder Pal Singh

sorry for the delayed reply,

Replace the line 6-26 by

$(document).ready(function(){
                  $("input[name='radioPrice']").bind("click", function(){
                        $("#options").show();
                        $("#subtotal").html("Subtotal is " + $(this).val());

var value = $('input:radio[name='radioPrice']:checked').val();

                        switch( value )
                        {
                              case "$149.95":
                                    $("#options").html("<option value='31.88'>Rush Delivery 31.88</option><option value='12.88'>Standard Delivery 12.88</option>");
                              break;

                              case "$49.95":
                                    $("#options").html("<option value='51.88'>Rush Delivery 51.88</option><option value='32.88'>Standard Delivery 32.88</option>");
                              break;

                              case "$99.95":
                                    $("#options").html("<option value='71.88'>Rush Delivery 71.88</option><option value='52.88'>Standard Delivery 52.88</option>");
                              break;
                        }
                  });
            });