Copy Form Input Data to Another Input Field with jQuery

February 5th, 2009
jQuery | 3 Comments

This is a very simple example how to copy form input data to other form fields. This is useful when the same information entered can be used in other fields such as shipping and billing address forms.

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>