初學者 JS 學習者在這里，我正在創建一個模擬選民登記應用程式。
我想知道如何對“使用與郵寄地址相同”復選框實作點擊事件，以便當用戶選中它時，郵寄地址中的地址、城市、州和 ZIP 被復制到相應的地址、城市、州, 以及居住地址中的 ZIP。
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.")
});
到目前為止我的代碼。
uj5u.com熱心網友回復：
您可以使用onchange復選框上的事件在單擊輸入時觸發回呼
var checkbox = document.getElementById('useMailAddress');
checkbox.addEventListener('change', function() {
//your code here
});
uj5u.com熱心網友回復：
<input type="checkbox" onclick="onCheckboxChecked()" />
然后在js檔案中實作onCheckboxChecked函式。
我在下面的鏈接中讀到： onchange 事件存在問題，也就是說，它不會被呼叫，直到選中狀態更新并且 Internet Explorer 不會觸發 onChange 事件，直到復選框失去焦點，所以它會創建與谷歌瀏覽器和其他瀏覽器不同的結果，所以為了避免這一切，我建議你堅持 onclick 事件。
https://html.form.guide/html-form/html-checkbox-events/
uj5u.com熱心網友回復：
在我跳到答案之前，我希望您練習的一個方法是使用在線代碼沙箱，并從那里共享您的代碼，它可以幫助人們更快地理解。
回答：
您只需要使用onchange事件偵聽器來完成您的作業，您可以在此處查看代碼
注意：我只撰寫了 onchange 函式，您必須根據需要撰寫代碼來復制和重置值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/346277.html
標籤：javascript html