I need somebody's help”

[steve.dimo]

 add the JavaScript code needed to enable auto-complete on this form.. whenever the checkbox is checked, the code should automatically copy the values from Shipping Name and Shipping Zip into the Billing Name and Billing Zip. if the checkbox is unchecked the billing name and the billing zip should go blank.

 

<p> Shipping Information </p>

<label for = "shippingName" > Name </label>

<input type= "text" name = "shipName"id = "shippingName" required > <br/>

< label for = "shippingZip" > Zip code: </label >

<input type="text" name= "shipZip" id = "shippingZip" pattern = " [0-9]{5}" required > </br>

<input type = "checkbox" id= "same" onchange = "billingFunction()" />

<label for= "same" > Is the billing information the same? </ label>

<br/> <br/>

<p> Shipping Information </p>

<label for= "billingName" > Name: </label>

input type= "text" name= "billName" id ="billingName" required> <br/>

<label for= "billingZip"> Zip code: </label>

<input type= "text" name= "billZip" id ="billingZip" pattern = "[0-9]{5} " required > <br/>

<input type= "submit" value= "verify"/>

[Ingolme]

Have you started writing the Javascript yet? Show me what you've tried and I can help fix any mistakes.

If you haven't started writing the Javascript, here are a few tutorial pages explaining some of the steps you need to take:

• Finding the HTML elements
• Reading and writing to text fields
• Adding an event listener (to detect the checkbox changing)

[steve.dimo]

Here's what I wrote 👇👇

Function billingFunction() {

If ( document.getElementById ('same'). checked) {

document.getElementById ('billName'). innerHTML = 'shippingName';

document.getElementById ('billZip'). innerHTML = 'shippingZip';

}

}

[Ingolme]

For the most basic functionality, all that's missing is to get the values of the shipping fields like this:

function billingFunction() {
  if (document.getElementById ('same'). checked) {
    document.getElementById ('billName'). innerHTML = document.getElementById('shippingName').value;
    document.getElementById ('billZip'). innerHTML = document.getElementById('shippingZip').value;
  }
} 

 

However, I noticed that this doesn't account for the person changing the shipping or billing address fields after the checkbox has been clicked.

A complete implementation needs to prevent the user from editing the billing fields and update the billing fields whenever the user changes the shipping fields. It would take too much time to try to teach the whole process of doing this in a forum post, so I'll write the resulting code for it.

 <p> Shipping Information </p>
<label for="shippingName"> Name </label>
<input type="text" name="shipName" id="shippingName" required> <br/>
<label for="shippingZip"> Zip code: </label>
<input type="text" name="shipZip" id = "shippingZip" pattern=" [0-9]{5}" required> </br>
<input type="checkbox" id="same"/>
<label for="same"> Is the billing information the same? </label>
<br/> <br/>

<p> Shipping Information </p>
<label for="billingName"> Name: </label>
<input type="text" name="billName" id="billingName" required> <br/>
<label for= "billingZip"> Zip code: </label>
<input type="text" name="billZip" id="billingZip" pattern="[0-9]{5} " required> <br/>
<input type="submit" value="verify"/> 

<script>
(function(){

var checkbox = document.getElementById("same");
var shippingName = document.getElementById("shippingName");
var shippingZip = document.getElementById("shippingZip");
var billingName = document.getElementById("billingName");
var billingZip = document.getElementById("billingZip");

checkbox.addEventListener("change", linkShippingAndBilling);

function linkShippingAndBilling() {
  if(checkbox.checked) {
    // Listen for changes in the shipping fields
    shippingName.addEventListener("input", updateBillingName);
    shippingZip.addEventListener("input", updateBillingZip);
    
    // Update the billing fields
    billingName.value = shippingName.value;
    billingZip.value = shippingZip.value;
    
    // Make billing fields read-only
    billingName.readOnly = true;
    billingZip.readOnly = true;
  } else {
  
    // Stop listening for changes in shipping fields
    shippingName.removeEventListener("input", updateBillingName);
    shippingZip.removeEventListener("input", updateBillingZip);
    
    // Clear billing fields
    billingName.value = "";
    billingZip.value = "";
    
    // Remove read-only from billing fields
    billingName.readOnly = false;
    billingZip.readOnly = false;
  }
}

function updateBillingName() {
  billingName.value = shippingName.value;
}

function updateBillingZip() {
  billingZip.value = shippingZip.value;
}

})();
</script>