CODEWITHSUNDEEP
htmlquery-optimizationjquerykeyboard-events
rib3ye
rib3ye

Reputation: 2923

"Billing address same as shipping address" jQuery script: is there a better way to do this?

I'm creating a php Contact Form for a friend's bike courier service. Basically, when the "shipping and billing address is the same" box is checked, I want the two sets of fields to be in sync after every keyup event.

The form is pretty straight forward:

<!-- Get the shipping address inputs -->
<input type="text" name="company_address1" value="" id="company_address1">
<input type="text" name="company_city" value="" id="company_city">

<!-- Get the billing address inputs -->
<p>Same as above <input type="checkbox" name="dupe" id="dupe" value=""></p>
<input type="text" name="billing_address1" value="" id="billing_address1">
<input type="text" name="billing_city" value="" id="billing_city">


The jQuery

$("input#dupe").click(function(){ 
if ($("input#dupe").is(':checked')) 
{ 
    // Checked, copy values 
    $("input#billing_address1").val($("input#company_address1").val()); 
    $("input#billing_city").val($("input#company_city").val()); 
} 
else 
{ 
    // Clear on uncheck 
    $("input#billing_address1").val(""); 
    $("input#billing_city").val(""); 
} 
});
$("input#company_address1").keyup(function(event) {
if ($("input#dupe").is(':checked')) {
    var stt=$(this).val();
    $("input#billing_address1").val(stt);
}
});
$("input#company_city").keyup(function(event) {
if ($("input#dupe").is(':checked')) {
    var stt=$(this).val();
    $("input#billing_city").val(stt);                           
}
});
$("input#billing_address1").keyup(function(event) {
if ($("input#dupe").is(':checked')) {
    var stt=$(this).val();
    $("input#company_address1").val(stt);
}
});
    $("input#billing_city").keyup(function(event) {
if ($("input#dupe").is(':checked')) {
    var stt=$(this).val();
    $("input#company_city").val(stt);                           
}
});



Optimization is not one of my strong points, is there a way I can chain the events together?

Upvotes: 1

Views: 5630

Answers (3)

AllStruck
AllStruck

Reputation: 41

I would recommend modifying the server-side code to store the user's "same as other address" option, and just hide the second address field if possible. This way if you display the form again for editing, you can again just hide the form fields rather than duplicating the information...

Here's an example of the form using this method (without the server-side part): http://jsfiddle.net/hzAxU/

Upvotes: 0

Amadan
Amadan

Reputation: 198388

  • Don't copy both ways. If #dupe:checked, disable one of the forms, and copy one direction only.

  • Repetition:

You could try something like this:

function copyCompanyToBilling($companyElement) {
  $companyElement.each(function() {
    var $companyElement = $(this);
    var billingId = $companyElement.attr('id').replace(/company/, 'billing');
    $('#' + billingId).val($companyElement.val());
  }
});
$("#company_address1, #company_city").keyup(function(evt) {
  copyCompanyToBilling($(this));
});
$("input#dupe").click(function(){ 
  if ($("input#dupe").is(':checked')) {
    copyCompanyToBilling($('#company_address1, #company_city'))
  } else {
    $('#biling_address1, #billing_city').val('');
  } 
});

EDIT: Huh, I just said pretty much the same as lxop. Slow :(

Upvotes: 3

lxop
lxop

Reputation: 8595

You could have jQuery simply disable the second set of fields when the checkbox is ticked, and then look at the value of the checkbox on the server end when the form is submitted.

If you want to keep the design you have, probably look at writing a single keyup() function for all fields in the input form; extract the id of the element that triggered the function; edit the id a little (replace 'billing' with 'company', etc), and then do the $("...").val () bit.

Upvotes: 3

Related Questions