2
\$\begingroup\$

I used JS to re-populate the shipping address into the billing address when a checkbox is clicked. I'm wondering whether there is a more concise/better way to write the code below:

var checkBox = document.getElementById('order_use_billing');

var shipFirstName = document.getElementById('order_ship_address_attributes_firstname');
var billFirstName = document.getElementById('order_bill_address_attributes_firstname');
var shipLastName = document.getElementById('order_ship_address_attributes_lastname');
var billLastName = document.getElementById('order_bill_address_attributes_lastname');
var shipStreet = document.getElementById('order_ship_address_attributes_address1');
var billStreet = document.getElementById('order_bill_address_attributes_address1');
var shipStreetTwo = document.getElementById('order_ship_address_attributes_address2');
var billStreetTwo = document.getElementById('order_bill_address_attributes_address2');
var shipState = document.getElementById('order_ship_address_attributes_state_id');
var billState = document.getElementById('order_bill_address_attributes_state_id');
var shipCity = document.getElementById('order_ship_address_attributes_city');
var billCity = document.getElementById('order_bill_address_attributes_city');
var shipCountry = document.getElementById('order_ship_address_attributes_country_id');
var billCountry = document.getElementById('order_bill_address_attributes_country_id');
var shipZip = document.getElementById('order_ship_address_attributes_zipcode');
var billZip = document.getElementById('order_bill_address_attributes_zipcode');
var shipPhone = document.getElementById('order_ship_address_attributes_phone');
var billPhone = document.getElementById('order_bill_address_attributes_phone');

$(function(){
   $('input[type=checkbox]').prop("checked", false);
});

function filling(){

  if(checkBox.checked == true) {
    shipFirstName.value       = billFirstName.value;
    shipLastName.value        = billLastName.value
    shipStreet.value          = billStreet.value
    shipStreetTwo.value       = billStreetTwo.value
    shipCity.value            = billCity.value
    shipState.value           = billState.value
    shipCountry.value         = billCountry.value
    shipZip.value             = billZip.value
    shipPhone.value           = billPhone.value

  }
   if(checkBox.checked == false) {
    shipFirstName.value       = "";
    shipLastName.value        = "";
    shipStreet.value          = "";
    shipStreetTwo.value       = "";
    shipCity.value            = "";
    shipState.value           = "";
    shipCountry.value         = "";
    shipZip.value             = "";
    shipPhone.value           = "";

  }
};

$(function() { 
    $('input[type="checkbox"]').on('change', function() {
         filling();
    });
});        
\$\endgroup\$
1
\$\begingroup\$

My approach for something like this would be to have the two (sub-)forms wrapped in a grouping element such as a fieldset and just loop over all fields in one and match them with the other. Quick incomplete, untested example:

<form>
  <fieldset id="shipping-address">
    <input name="shipping-firstname">
    <input name="shipping-lastname">
  </fieldset>
  <fieldset id="billing-address">
    <input name="billing-firstname">
    <input name="billing-lastname">
  </fieldset>
</form>

<script>
  $("shipping-address input").each(function() {
    var shippingInput = $(this);
    var billingInputName = "billing" + shippingInput.attr("name").slice(8);
    $("#billing-address [name=" + billingInputName + "]").val(shippingInput.val());
  });
</script>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.