Copy Form Input Data to Another Input Field with jQuery Sample

Demo

Billing

Email:
Name:
Phone:

Shipping

Same?:
Email:
Name:
Phone:

jQuery

$(document).ready(function(){
	$("input#same").click(function(){
		if ($("input#same").is(':checked'))
		{
			// Checked, copy values
			$("input#shipping-email").val($("input#email").val());
			$("input#shipping-name").val($("input#name").val());
			$("input#shipping-phone").val($("input#phone").val());
		}
		else
		{
			// Clear on uncheck
			$("input#shipping-email").val("");
			$("input#shipping-name").val("");
			$("input#shipping-phone").val("");
		}
	});
});

HTML

<form>
Billing
Email:<input id="email" name="email" type="text" value="test@example.com" />
Name:<input id="name" name="name" type="text" value="John Smith" />

Phone:<input id="phone" name="phone" type="text" value="(123) 456-7890" />

Shipping
Same?:<input id="same" name="same" type="checkbox" />
Email:<input id="shipping-email" name="email" type="text" />
Name:<input id="shipping-name" name="name" type="text" />
Phone: <input id="shipping-phone" name="phone" type="text" />
</form>

Donate

If you found this article useful and would like to see more like it this please consider making a donation.