Jump to content

Recommended Posts

 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"/>

Link to comment
Share on other sites

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:

  • Thanks 1
Link to comment
Share on other sites

Here's what I wrote 👇👇

Function billingFunction() {

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

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

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

}

}

Link to comment
Share on other sites

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>

 

  • Thanks 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...