...

View Full Version : Dynamically adding second address?



mrwest
09-27-2005, 12:39 AM
Hi, is it possible to dynamically add a second address to a form if the customer clicks on a check box stating he would like his order sent to a different address? I would like this to be added dynamically, only when he clicks.

What would I need to type, or where would I need to search?
Thanks for any info.

best wishes,
AlldaRon

Mongus
09-27-2005, 12:49 AM
It's much easier to already have the second address in the form but hidden with a CSS style of "display: none" then change that to "display: block" when they click on the checkbox.


<html>
<body>
<div>
(Shipping Address Goes Here)
<br />
<input type="checkbox" onclick="document.getElementById('shipping_address').style.display = this.checked ? 'block' : 'none';" /> Ship To A Different Address
</div>
<div id="shipping_address" style="display:none">
(Shipping Address Goes Here)
</div>
</body>
</html>

mrwest
09-27-2005, 01:49 AM
Thanks, that worked like a charm!

One more question, how would I make it that the price at the end changes dynamically due to the person selecting an item from multiple pull down menus?

One menu has 4 options, each the same price, but different color.
Now if someone pulls down on the first menu and selects a color, the price at the bottom changes to $50 price. Then they also click the "order another one" check box (from earlier question) which "unhides" another pull down menu and they select another color, which changes the price at the bottom to $100.

Thanks in advance.

AlldaRon

Mongus
09-27-2005, 04:39 AM
<html>
<head>
<script type="text/javascript">
function checkColors()
{
var price = 0.0;

if (document.getElementById('color.1').selectedIndex > 0)
{
price += 50.0;

if (document.getElementById('color.2').selectedIndex > 0)
price += 50.0;
}
else
{
document.getElementById('secondColorCheckbox').checked = false;
document.getElementById('secondColor').style.display = 'none';
}

var element = document.getElementById('price');

element.replaceChild(document.createTextNode('$' + price.toFixed(2)), element.firstChild);
}
</script>
</head>
<body>
<div>
<label for="color.1">Select A Color:
<select id="color.1" onchange="checkColors();">
<option value=""></option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<br />
<input id="secondColorCheckbox" type="checkbox" onclick="document.getElementById('secondColor').style.display = this.checked ? 'block' : 'none';" /> <label for="secondColorCheckbox">Order Another One</label>
</div>
<div id="secondColor" style="display:none">
<label for="color.2">Select Another Color:
<select id="color.2" onchange="checkColors();">
<option value=""></option>
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
</div>
Price: <span id="price">$0.00</span>
</body>
</html>

mrwest
09-27-2005, 03:00 PM
Wow, that's awesome. Thanks again. Have a great week.

AlldaRon



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum