Copying one form's values to another form using JQuery
- by rsturim
I have a "shipping" form that I want to offer users the ability to copy their input values over to their "billing" form by simply checking a checkbox.
I've coded up a solution that works -- but, I'm sort of new to jQuery and wanted some criticism on how I went about achieving this. Is this well done -- any refactorings you'd recommend?
Any advice would be much appreciated!
The Script
<script type="text/javascript">
$(function() {
$("#copy").click(function() {
if($(this).is(":checked")){
var $allShippingInputs = $(":input:not(input[type=submit])", "form#shipping");
$allShippingInputs.each(function() {
var billingInput = "#" + this.name.replace("ship", "bill");
$(billingInput).val($(this).val());
})
//console.log("checked");
} else {
$(':input','#billing')
.not(':button, :submit, :reset, :hidden')
.val('')
.removeAttr('checked')
.removeAttr('selected');
//console.log("not checked")
}
});
});
</script>
The Form
<div>
<form action="" method="get" name="shipping" id="shipping">
<fieldset>
<legend>Shipping</legend>
<ul>
<li>
<label for="ship_first_name">First Name:</label>
<input type="text" name="ship_first_name" id="ship_first_name" value="John" size="" />
</li>
<li>
<label for="ship_last_name">Last Name:</label>
<input type="text" name="ship_last_name" id="ship_last_name" value="Smith" size="" />
</li>
<li>
<label for="ship_state">State:</label>
<select name="ship_state" id="ship_state">
<option value="RI">Rhode Island</option>
<option value="VT" selected="selected">Vermont</option>
<option value="CT">Connecticut</option>
</select>
</li>
<li>
<label for="ship_zip_code">Zip Code</label>
<input type="text" name="ship_zip_code" id="ship_zip_code" value="05401" size="8" />
</li>
<li>
<input type="submit" name="" />
</li>
</ul>
</fieldset>
</form>
</div>
<div>
<form action="" method="get" name="billing" id="billing">
<fieldset>
<legend>Billing</legend>
<ul>
<li>
<input type="checkbox" name="copy" id="copy" />
<label for="copy">Same of my shipping</label>
</li>
<li>
<label for="bill_first_name">First Name:</label>
<input type="text" name="bill_first_name" id="bill_first_name" value="" size="" />
</li>
<li>
<label for="bill_last_name">Last Name:</label>
<input type="text" name="bill_last_name" id="bill_last_name" value="" size="" />
</li>
<li>
<label for="bill_state">State:</label>
<select name="bill_state" id="bill_state">
<option>-- Choose State --</option>
<option value="RI">Rhode Island</option>
<option value="VT">Vermont</option>
<option value="CT">Connecticut</option>
</select>
</li>
<li>
<label for="bill_zip_code">Zip Code</label>
<input type="text" name="bill_zip_code" id="bill_zip_code" value="" size="8" />
</li>
<li>
<input type="submit" name="" />
</li>
</ul>
</fieldset>
</form>
</div>
