Javascript default shipping address equal to billing address on page load, works in jsfiddle, but not in browser?

Question

I recognize that similar questions have been asked before, but none of them seem to fix my problem. I'm trying to get the default setting be where the shipping address is equal to the billing address with a check box pre-checked. Upon clicking the checkbox a section of the form appears and the previously hidden form values/input text is cleared so that the user can enter in separate billing information. I've got it all working in jsfiddle, but can't for the life of me get it working in the browser. Any help would be appreciated.

ps. sorry for the wonky formatting, I can't figure out how to elegantly paste code while following the formatting guidelines.

   <form name="checkout" method="post" id="payment-form" action="/templates/dropindemo.php">
<section id="shipping">
<h2>Shipping</h2>

<label for="first">First name</label>
<input type="text" autocomplete="given-name" placeholder="Hermionie" name="fname" id="first">

<label for="last">Last name</label>
<input type="text" autocomplete="family-name" placeholder="Granger" name="lname" id="last">
<br>

<label for="address">Address</label>
<input type="text" autocomplete="street-address" placeholder="12 Grimmauld Place" name="address" id="address">

<label for="city">City</label>
<input type="text" autocomplete="address-level2" placeholder="London" name="city" id="city">
<br>

<label for="state">State</label>
<input type="text" autocomplete="address-level1" placeholder="Greater London" name="state" id="state">

<label for="zip">Postal Code</label>
<input type="number" pattern="\d*" autocomplete="postal-code" placeholder="WC1N1 9LX" name="zip" id="zip">

<label for="country">Country</label>
<select name="country" id="country">
  <option selected hidden disabled value="">United Kingdom</option>
  <option value="USA">United States</option>
</select>
<br>
<label for="last">E-mail</label>
<input type="email" autocomplete="email" placeholder="hermionie@spew.org" name="email" id="email">
<br>
<input type="checkbox" onclick="onPageLoad()" id="shiptobill" />
<label for="shiptobill">My shipping and billing info are the same</label>
</section>
<section id="billing">
    <h2>Billing</h2>
  <label for="first">First name</label>
 <input type="text" autocomplete="given-name" placeholder="Harry" name="bfname" id="bfirst">

<label for="last">Last name</label>
<input type="text" autocomplete="family-name" placeholder="Potter" name="blname" id="last">
<br>

<label for="address">Address</label>
<input type="text" autocomplete="street-address" placeholder="4 Private Drive" name="baddress" id="address">

<label for="city">City</label>
<input type="text" autocomplete="address-level2" placeholder="Little Winging" name="bcity" id="city">
<br>

<label for="state">State</label>
<input type="text" autocomplete="address-level1" placeholder="Surrey" name="bstate" id="state">

<label for="zip">Postal Code</label>
<input type="number" pattern="\d*" autocomplete="postal-code" placeholder="RG12 9FG" name="bzip" id="zip">

<label for="country">Country</label>
<select name="bcountry" id="country">
  <option selected hidden disabled value="">United Kingdom</option>
  <option name="USA" value="USA">United States</option>
</select>
<br>
</section>
   </form>

And the javascript...

    window.onload = toggle(), onPageLoad();

    function toggle() {
  if (document.getElementById("shiptobill").checked == true) {
 document.getElementById("shiptobill").checked = false;
  } else {
 document.getElementById("shiptobill").checked = true;
  }
};

  function onPageLoad() {
  var inputs = 
  document.getElementById("shipping").getElementsByTagName("input");
 var mirror = 
  document.getElementById("billing").getElementsByTagName("input");
 for (var i = 0; i < inputs.length; i++) {
   if (document.getElementById("shiptobill").checked === true) {
  var att = inputs[i].getAttribute("name");
  inputs[i].setAttribute('onkeyup', 'document.checkout.b' + att + '.value=this.value');
  document.getElementById('billing').style.display = ""; //would normally be set to "none" in production
    } else {
  document.getElementById('billing').style.display = "block";
  inputs[i].setAttribute('onkeyup', "");
  mirror[i].value = "";
 }
  }
 };

What issues are you facing in the browser? Any errors in the console? — yuriy636, Jan 05 '18 at 09:12
I keep getting a "cannot set property 'value' of undefined. @yuriy636 — Carolyn, Jan 06 '18 at 01:10

score 0 · Answer 1 · answered Jan 05 '18 at 09:13

window.onload = toggle(), onPageLoad();

means…

Immediately execute toggle
Assign the return value of toggle to onload
- toggle has no return statement so it returns undefined
- onload expects to be assigned a function, not undefined
Immediately execte onPageLoad

You are almost certainly running into getElementById failing because the element doesn't exist yet. If you looked at the Console of the Developer Tools in your browser, this would probably be obvious. It is really important to look at the error messages your browser gives you.

If you want to call toggle and onPageLoad when the load event fires by assigning something to onload, then you need to assign a function.

function run_on_load() {
    toggle();
    onPageLoad();
}
window.onload = run_on_load; // No ()! They would *call* the function.

Modern JS uses addEventListener, so you could instead:

addEventListener("load", toggle);
addEventListener("load", onPageLoad);

Javascript default shipping address equal to billing address on page load, works in jsfiddle, but not in browser?

1 Answers1