Copy Form Input Data to Another Input Field with jQuery
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>
Very nice information. Check out my blog, I just posted my review of the Awesome free Internet Marketing and SEO tools.
Its a followup to my original post:
http://blogging-to-make-money.com/search-engine-optimization-awesome-new-tools/
Anyways here are the actual reviews and links to the free online tools
Thanks and hopefully this will help you along your travels:
http://blogging-to-make-money.com/free-google-internet-marketing-and-search-engine-optimization-tools
Works great but how do you get it to copy a dropdown….say for the country?
You can use this:
$(“select#category”).change(function(){
var post_string = $(this).val();
});
For an example check out the <select> post:
http://websitebuildersresource.com/2009/02/07/jquery-select-manipulation-multiple-selects-json-default/
This tip page has been great, and I’m about to donate. On the comment/reply having to do with select and pull down menus, you suggested the other page. I went there and couldn’t quite see which of those other examples fit the case. It’s probably right in front of my nose, or shows how my JS is pretty limited. If we use the code you have above the id=”category belongs to the first entry? Where the user makes a choice? Then how/where do I point to the second pull down on the same page? Thanks.
On the following example:
http://websitebuildersresource.com/demos/jquery-select-html-manipulation/multiple-post.php
Within the getSubs() JS function you can change the following line to point to any <select>
// Set the selected value
$(“select#second_select_id_goes_here”).val(selected);
Thanks for the sample.
thanks got a question.
I tried to copy radio checked fields but this is partly working since it deselcts the current selected radio field.
var value;
value = $(“input#c_aanhef1:checked”).val();
if (value == ‘Dhr.’)
{
$(“input#c_aanhefdhr3″).attr(“checked”, true)
}
else
{
$(“input#c_aanhefmevr3″).attr(“checked”, true)
}
sorry here’s the whole snippet
$(“input#vertfin”).click(function(){
if ($(“input#vertfin”).is(‘:checked’))
{
// Checked, copy values
var value;
value = $(“input#c_aanhef1:checked”).val();
if (value == ‘Dhr.’)
{
$(“input#c_aanhefdhr3″).attr(“checked”, true)
}
else
{
$(“input#c_aanhefmevr3″).attr(“checked”, true)
}
$(“input#c_naam3″).val($(“input#c_naam1″).val());
$(“input#c_achternaam3″).val($(“input#c_achternaam1″).val());
$(“input#c_email3″).val($(“input#c_email1″).val());
$(“input#c_adres3″).val($(“input#c_adres1″).val());
$(“input#c_postcode3″).val($(“input#c_postcode1″).val());
$(“input#c_plaats3″).val($(“input#c_plaats1″).val());
$(“input#c_telefoon1_3″).val($(“input#c_telefoon1_1″).val());
$(“input#c_telefoon2_3″).val($(“input#c_telefoon2_1″).val());
$(“input#c_relatie3″).val($(“input#c_relatie1″).val());
}
else
{
// Clear on uncheck
$(“input#c_naam3″).val(“”);
$(“input#c_achternaam3″).val(“”);
$(“input#c_email3″).val(“”);
$(“input#c_adres3″).val(“”);
$(“input#c_postcode3″).val(“”);
$(“input#c_plaats3″).val(“”);
$(“input#c_telefoon1_3″).val(“”);
$(“input#c_telefoon2_3″).val(“”);
$(“input#c_relatie3″).val(“”);
}
});
I liked your page please check mine too, about cool pages …http://oncowepa.blogspot.com/