Forums

I am working on a version of this post, where I am copying a billing address into a shipping address, and it mostly works, copying three of the four fields needed.

I have a billing_address, billing_city, billing_state and billing_zip all as text inputs with corresponding shipping_address, shipping_city, shipping_state and shipping_zip as text inputs as well.

I used the javascript provided in the above linked post, and all the fields copy except billing_address/shipping_address.

Comparing my code to the demo code, it looks mostly identical (minus a few formatting issues), so I am not sure why it's not working.

Here is how my form looks:

<form action="URL" name="test" id="chronoform_test" method="post" class="Chronoform">
	<div id='billing_address'>
		<div class="ccms_form_element cfdiv_text" id="billing_address_container_div" style="">
			<label for="billing_address">Address</label>
				<input id="billing_address" maxlength="150" size="30" class="" title="" type="text" value="" name="billing_address" />
				<div class="clear"></div><div id="error-message-billing_address"></div>
		</div>
		<div class="ccms_form_element cfdiv_text" id="billing_city_container_div" style="">
			<label for="billing_city">City</label>
				<input id="billing_city" maxlength="150" size="30" class="" title="" type="text" value="" name="billing_city" />
					<div class="clear"></div><div id="error-message-billing_city"></div>
		</div>
		<div class="ccms_form_element cfdiv_text" id="billing_state_container_div" style="">
			<label for="billing_state">State</label>
				<input id="billing_state" maxlength="150" size="30" class="" title="" type="text" value="" name="billing_state" />
					<div class="clear"></div><div id="error-message-billing_state"></div>
		</div>
		<div class="ccms_form_element cfdiv_text" id="billing_zip_container_div" style="">
			<label for="billing_zip">Zip Code</label>
				<input id="billing_zip" maxlength="150" size="30" class="" title="" type="text" value="" name="billing_zip" />
					<div class="clear"></div><div id="error-message-billing_zip"></div>
		</div>
	</div>
	
	<div id='shipping_address'>
		<div class="ccms_form_element cfdiv_submit" id="copy_address_container_div" style="text-align:left">
			<input name="copy_address" id="copy_address" class="copy_address" value="Copy Student's Address" type="button" />
				<div class="clear"></div><div id="error-message-copy_address"></div>
		</div>
		<div class="ccms_form_element cfdiv_text" id="shipping_address_container_div" style="">
			<label for="shipping_address">Address</label>
				<input id="shipping_address" maxlength="150" size="30" class="" title="" type="text" value="" name="shipping_address" />
					<div class="clear"></div><div id="error-message-shipping_address"></div>
		</div>
		<div class="ccms_form_element cfdiv_text" id="shipping_city_container_div" style="">
			<label for="shipping_city">Shipping City</label>
				<input id="shipping_city" maxlength="150" size="30" class="" title="" type="text" value="" name="shipping_city" />
					<div class="clear"></div><div id="error-message-shipping_city"></div>
		</div>
		<div class="ccms_form_element cfdiv_text" id="shipping_state_container_div" style="">
			<label for="shipping_state">Shipping State</label>
				<input id="shipping_state" maxlength="150" size="30" class="" title="" type="text" value="" name="shipping_state" />
				<div class="clear"></div><div id="error-message-shipping_state"></div>
		</div>
		<div class="ccms_form_element cfdiv_text" id="shipping_zip_container_div" style="">
			<label for="shipping_zip">Shipping Zip Code</label>
				<input id="shipping_zip" maxlength="150" size="30" class="" title="" type="text" value="" name="shipping_zip" />
					<div class="clear"></div><div id="error-message-shipping_zip"></div>
		</div>
	</div>
	
<div class="ccms_form_element cfdiv_empty" id="empty_container_div" style="">
	<div class="clear"></div><div id="error-message-empty"></div>
</div>
<input type="hidden" name="b0a581ae2fa25dc17866eff16fb6ae74" value="1" />
</form>

and here is the JS:

window.addEvent('domready', function() {
  $('copy_address').addEvent('click', function() {
    $$('div#billing_address input, div#billing_address select').each(function(item) {
      var target_id;
      target_id = item.id.replace('billing_', 'shipping_');
      if(typeof $(target_id) !== undefined) {
        $(target_id).value = item.value;
      }
    });
  });
});

Can someone explain what I am missing?

Thanks,
Melvins138

Found the answer. I changed the ID of the street address from "billing_address" and "shipping_address" to "billing_street" and "shipping_street" and that solved the problem. Must have been a conflict in the naming of the IDs.