Javascript click event from validation-CodePudding

Beginner JS learner here, I am creating a mock voter registration application.

I was wondering how to implement a click event to the "Use same as Mailing Address" checkbox so that when the user checks it, the address, city, state, and ZIP from the mailing address are copied to the corresponding address, city, state, and ZIP in the residence address.

HTML

<form name="voterapp" method="post">
<strong>Section I. </strong>Failure to complete certain items will prevent acceptance of this application.<br>
1. State ID Number: <input type="text" name="idNum" id="idNum"> <br>
2. Date of Birth (mm/dd/yyyy): <input type="date" name="dob" id="dob"> <br>
3. Last Name: <input type="text" name="lastname" id="lastname"> First Name: <input type="text" name="firstname" id="firstname"> Middle, Suffix: <input type="text" name="initial" id="initial"> <br>
4. Mailing Address: <br>
Address Line 1: <input type="text" id="address1" name="address1"> <br>
Address Line 2: <input type="text" id="address2" name="address2"> <br>
City: <input type="text" id="city" name="city"> State: <input type="text" id="state" name="state"> ZIP Code: <input type="text" id="zip" name="zip"><br>
5. Hawaii Principal Residence Address <br>
Use same as Mailing Address: <input type="checkbox" name="useMailAddress" id="useMailAddress"> <br>
Address Line 1: <input type="text" id="resAddress1" name="resAddress1"> <br>
Address Line 2: <input type="text" id="resAddress2" name="resAddress2"> <br>
City: <input type="text" id="resCity" name="resCity"> State: <input type="text" id="resState" name="resState"> ZIP Code: <input type="text" id="resZip" name="resZip"><br>
6. Contact Phone: <input type="text" id="phone" name="phone"> <br>

<br>

<strong>Section II.</strong> Qualifications <br>
If you answer "No" to any of the questions below, DO NOT complete this form. <br>
Are you a citizen of the United States of America? <input type="radio" name="amCitizen" id="amCitizenYes" value="yes"> Yes <input type="radio" name="amCitizen" id="amCitizenNo" value="no"> No <br>
Are you at least 16 years of age? (Must be 18 to vote) <input type="radio" name="ageToVote" id="ageToVoteYes" value="yes"> Yes <input type="radio" name="ageToVote" id="ageToVoteNo" value="no"> No <br>
Are you a resident of the State of Hawaii? <input type="radio" name="amResident" id="amResidentYes" value="yes"> Yes <input type="radio" name="amResident" id="amResidentNo" value="no"> No <br>

<br>

<strong>Section III.</strong> I hereby affirm that: 1) I am the person named above; and 2) all information furnished on this application is true and correct.
<input type="checkbox" id="affirm" name="affirm" value="affirmation"> <br>
<br>
<div class="center"><input type="submit" id="submit" name="submit" value="Submit"></div>

Javascript

document.voterapp.addEventListener("submit", function(eventParam) {
  let inputStateId = document.voterapp.idNum.value;
  let idRegex = /^S[A-Z\d]{8}/;
  if (!idRegex.test(inputStateId)) {
    alert("ID Number Error: Must start with an S followed by 8 uppercase letters or digits.");
    eventParam.preventDefault();
    return;
  }

  let inputDob = document.voterapp.dob.value;
  if (inputDob.length == 0) {
    alert("Error: Please enter your date of birth.");
    eventParam.preventDefault();
    return;
  }

  let inputLastName = document.voterapp.lastname.value;
  if (inputLastName.length == 0) {
    alert("Error: Last name cannot be blank.")
    eventParam.preventDefault();
    return;
  }

  let inputFirstName = document.voterapp.firstname.value;
  if (inputFirstName.length == 0) {
    alert("Error: First name cannot be blank.");
    eventParam.preventDefault();
    return;
  }

  let inputAddress = document.voterapp.address1.value;
  if (inputAddress.length == 0) {
    alert("Error: Address Line 1 cannot be blank.");
    eventParam.preventDefault();
    return;
  }

  let inputCity = document.voterapp.city.value;
  if (inputCity.length == 0) {
    alert("Error: City cannot be blank.");
    eventParam.preventDefault();
    return;
  }

  let inputState = document.voterapp.state.value;
  if (inputState.length == 0) {
    alert("Error: State cannot be blank.");
    eventParam.preventDefault();
    return;
  }

  let inputZip = document.voterapp.zip.value;
  let zipRegex = /^96[78]\d\d$/;
  if (!zipRegex.test(inputZip)) {
    alert("Error: ZIP code is not a Hawaii ZIP code.");
    eventParam.preventDefault();
    return;
  }

  let inputPhone = document.voterapp.phone.value;
  let phoneRegex = /^\b\d{3}[-]?\d{3}[-]?\d{4}\b$/;
  if (!phoneRegex.test(inputPhone)) {
    alert("Error: Please enter a phone number in the form 000-000-0000 or 0000000000.");
    eventParam.preventDefault();
    return;
  }

  let inputCitizen = document.voterapp.amCitizen.value;
  let checkedNo = document.getElementById("amCitizenNo");
  if (inputCitizen.length == 0) {
    alert("Error: Please answer if you are a citizen of the United States of America.")
    eventParam.preventDefault();
    return;
  }
  else if (checkedNo.checked) {
    alert("Error: You do not qualify to register to vote.");
    eventParam.preventDefault();
    return;
  }

  let inputAge = document.voterapp.ageToVote.value;
  let ageNo = document.getElementById("ageToVoteNo");
  if (inputAge.length == 0) {
    alert("Error: Please answer if you are at least 16 years of age.");
    eventParam.preventDefault();
    return;
  }
  else if (ageNo.checked) {
    alert("Error: You do not qualify to register to vote.");
    eventParam.preventDefault();
    return;
  }

  let inputResident = document.voterapp.amResident.value;
  let residentNo = document.getElementById("amResidentNo");
  if (inputResident.length == 0) {
    alert("Error: Please answer if you are a resident of the State of Hawaii.")
    eventParam.preventDefault();
    return;
  }
  else if (residentNo.checked) {
    alert("Error: You do not qualify to register to vote.");
    eventParam.preventDefault();
    return;
  }

  if (document.getElementById("affirm").checked === false) {
    alert("Please check the affirmation in Section IV to submit your application.");
    eventParam.preventDefault();
    return;
  }

  alert("Thank You! Your application will be submitted.")
});

My code so far.

CodePudding user response：

you can use the onchange event on checkbox to fired a callback when the input is clicked

var checkbox = document.getElementById('useMailAddress');
checkbox.addEventListener('change', function() {
  //your code here
});

CodePudding user response：

<input type="checkbox" onclick="onCheckboxChecked()"  />

then implement onCheckboxChecked function in js file.

I read in below link: that there is an issue with the onchange event and that is, it is not called, until the checked state has been updated and since Internet Explorer does not fire the onChange event till the checkbox loses focus, so it will create different results than in Google chrome and other browsers, so to avoid all this I recommend you stick to the onclick event.

https://html.form.guide/html-form/html-checkbox-events/

CodePudding user response：

Before I jump to the answer, one thin I'd like you to practice is to use online code sandboxes, and share your code from there, it helps people understand quicker.

Answer:

You just need to make use of onchange event listener to do your job, you can check the code on here

Note: I have only written the onchange function, you will have to write the code to copy and reset the values as per your need.