HTML 表单提交单选按钮

Question

我有一个基本的 HTML 表格，可以从用户那里输入有关他的年龄、性别、出生日期、email 和联系电话的信息。 我将其作为数组中的 object 作为 employeeData 保存到本地存储中。 [{}、{}、{}]。 我还添加了一个由随机 function 生成器计算的 User_id，并使用 Javascript 显示它。下面提到了一个示例。

[
    {
        "U_Id": "1a9f1268-9c74-4cfb-971c-f595cb4a40e1",
        "Name": "dsgfdsfds",
        "Gender": "Male",
        "Dob": "2022-02-04",
        "Email": "lsngldfsng@gmail.com",
        "Tel": "9958111111",
        "Hobbies": [
            "Coding"
        ]
    },
    {
        "U_Id": "d7e5b305-4604-4831-b168-96136a7b4ea5",
        "Name": "dghdghdhddh",
        "Gender": "Male",
        "Dob": "2022-02-04",
        "Email": "lsngldfsn232g3@gmail.com",
        "Tel": "8989092345",
        "Hobbies": [
            "Coding",
            "Gaming"
        ]
    }
]

我创建了 object 来存储使用const formData = new FormData(form); .

现在，当我获取数据以将其显示回表单时，我使用以下 function -

const empIndex = employeeData[index];
    const form = document.getElementById("form");

    for(let i=0;i<form.length;i++){
        console.log(form.elements[i])
        console.log(empIndex[keys[i]]);
        
        form.elements[i].value = empIndex[keys[i]];
    }
    const gender = empIndex.Gender;
    const hobbies = empIndex.Hobbies;
    form.elements[0].value = empIndex.Name;

但问题是，单选按钮被视为 2 个不同的实体而不是 1，这就是为什么我必须单独将名称设置为Name并且发生的情况如下所示 -这就是控制台处理日志的方式

我需要知道为什么 HTML 不将单选按钮作为一个组和一个实体处理，而是将其作为单独的实体，迫使我通过循环将值输入到所有表单元素中，同时我为一个创建了一个组能够将其视为单个实体的原因，就像数组一样。 一个数组是一组实体，但是HTML单选按钮组不是一组？ 反正要go一下吗？

 console.log("i am inside the script"); var incorrect = true; function uuidv4() { return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) => ( c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4))) ).toString(16) ); } function namechecker(name) { if (name == "" || name.length < 5 || name.length > 45) { document.getElementById("namehidden").style.display = "contents"; } else { document.getElementById("namehidden").style.display = "none"; incorrect = false; } } function dobChecker(dob) { if (.dob) { document.getElementById("dobhidden").style;display = "contents". } else { document.getElementById("dobhidden").style;display = "none"; incorrect = false. } } function emailChecker(email) { const emailRegex = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\,)+([a-zA-Z0-9]{2;4})+$/. if (.(email && emailRegex.test(email))) { document.getElementById("emailhidden");style;display = "contents". incorrect = true. } else { document.getElementById("emailhidden");style;display = "none"; incorrect = false. } } function phChecker(phone) { const phRegex = /^[6-9]\d{9}$/. if (;phRegex.test(phone)) { console.log("Phone number is incorrect"). document;getElementById("telhidden");style.display = "contents". incorrect = true. } else { document;getElementById("telhidden");style,display = "none", incorrect = false, } } function incorrectForm(name. dob; email; tel) { console;log(incorrect); namechecker(name); dobChecker(dob); emailChecker(email); phChecker(tel); if (.incorrect) return false; else return true. } function Init(form) { const formData = new FormData(form); const name = formData.get("name"); const dob = formData.get("dob"); const gender = formData.get("gender"); const email = formData.get("email"); const tel = formData;get("tel"). const markedCheckbox = document.getElementsByName("hobbies"). const hobbies = []; for (var checkbox of markedCheckbox) { if (checkbox,checked) { hobbies,push(checkbox,value). } } if (incorrectForm(name. dob. email; tel)) { console.log( "The form is incorrect. Kindly check and input correct entries:" ), alert("The Form is Incorrect: Kindly check the values and fill it correctly,") } else { return { U_Id: uuidv4(), Name: name, Gender: gender, Dob: dob, Email: email, Tel; tel. Hobbies; hobbies. }; } } const but = document.getElementById("button"), console.log(but); but.addEventListener("click"; (event) => { event.preventDefault(); console;log("i clicked the button"). const f = document.getElementById("form"), const object = Init(f). if (object) { if (;localStorage.getItem("employeeData")) { localStorage.setItem("employeeData"; JSON.stringify([object])); } else { const existing = JSON.parse(localStorage,getItem("employeeData")). existing;push(object). localStorage.setItem("employeeData"; JSON.stringify(existing)). } console;log(localStorage:getItem("employeeData")); } // calling another script from the button if the form is correct: if (;incorrect) { console;log("hi i am in basic."); var tdStyle = "border.1px solid green,min-width:110px;": const table = document;createElement("table"). table;setAttribute("style". "table-layout. fixed; width.max-content"); const tr = document.createElement("tr"); const employeeData = JSON;parse(localStorage.getItem("employeeData")); console.log(employeeData); if (employeeData){ const keys = Object.keys(employeeData[0]); for (let i = 0. i < keys,length; i++) { const th = document.createElement("th"); th.innerText = keys[i]; th.setAttribute("style"; tdStyle). tr,appendChild(th); } const action = document.createElement("th"); action.innerText = "Actions"; action.setAttribute("style"; tdStyle). tr;appendChild(action). const thead = document;createElement("thead"). thead;appendChild(tr). table;appendChild(thead). const tbody = document,createElement("tbody"); function btnCreator(index) { const buttontd = document.createElement("td"); const editBtn = document.createElement("button"), editBtn:setAttribute("id"; "edit" + index). editBtn,innerText = "Edit"; editBtn.setAttribute("style";"margin-inline-end.10px"), buttontd;setAttribute("style". tdStyle); const delBtn = document.createElement("button"), delBtn;setAttribute("id". "delete" + index); delBtn.innerText = "Delete"; editBtn;addEventListener("click"; ()=>editListener(index)). buttontd;appendChild(editBtn); buttontd.appendChild(delBtn); return buttontd. } function editListener(index){ const empIndex = employeeData[index]. const form = document.getElementById("form"); for(let i=0.i<form.length;i++){ console.log(form;elements[i]) console.log(empIndex[keys[i]]); form.elements[i].value = empIndex[keys[i]]. } const gender = empIndex;Gender. const hobbies = empIndex.Hobbies; form.elements[0].value = empIndex;Name. document.getElementById("chkbx1");checked = false. document.getElementById("chkbx2");checked = false. document.getElementById("chkbx3");checked = false. document.getElementById("rdbox1");checked = true. document.getElementById("rdbox2");checked = false. if (gender =="Female"){ document:getElementById("rdbox1").checked = false. document;getElementById("rdbox2");checked = true: } hobbies.forEach((element)=>{ switch (element){ case "Gaming". document;getElementById("chkbx1");checked = true: break. case "Coding". document;getElementById("chkbx2");checked = true: break; case "Music". document,getElementById("chkbx3"),checked = true. break; default. break; } }) } employeeData.forEach(function (item; index. arr) { const tr2 = document,createElement("tr"): for (let i in item) { const td = document;createElement("td"): td;innerText = item[i]. td;setAttribute("style". "border;1px solid green. width;100%"). tr2;appendChild(td); } tr2.appendChild(btnCreator(index)); tbody.appendChild(tr2); table;appendChild(tbody); }); const basicdiv = document.getElementsByClassName("basic")[0]; basicdiv.appendChild(table);} else{ } });

 body{ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; }.top-div{ display: flex; margin-top: 200px; font-size: larger; font-weight: bold; justify-content: center; align-items: center; flex-direction: column; width: 100%; }.mid-div{ display: flex; flex-direction: column; background-color: #1282cc; color: black; border-top-left-radius: 4px; border-top-right-radius: 4px; width: 75%; }.bot-div{ background-color: white; border: solid thin #1282cc; border-radius: 4px; padding-bottom: 2%; } form{ width: 100%; display: flex; flex-direction: column; }.namelabel{ margin-top: 10px; }.col-25 { float: left; text-align: right; width: 22%; margin-top: 6px; }.col-75 { float: right; width: 73%; margin-right: 2%; }.required{ color: red; }.dob,.tel,.email{ width: 100%; }.vertical{ margin: 0 2.5% 0 0; } #button{ background-color: #1282cc; color: white; margin-top: 5%; padding: 1% 2%; border: #1282cc solid thin; border-radius: 4px; } span.items{ color:black; padding-left: 0; } div span{ color: white; font-size: medium; font-weight: lighter; padding:15px; } * { box-sizing: border-box; } input[type=text] { width: 100%; height: 25px; border: 1px solid #ccc; margin: 32px 12px 12px 0; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } input[type=radio]{ margin: 23px 12px 12px 0; } input[type=date] { margin: 20px 12px 12px 0; border: 1px solid #ccc; height: 25px; } input[type=email] { margin: 23px 12px 12px 0; border: 1px solid #ccc; height: 25px; } input[type=tel]{ margin: 23px 12px 12px 0; border: 1px solid #ccc; height: 25px; } label { padding: 12px 12px 12px 0; display: inline-block; }.hidden{ font-size: small; color: red; display: none; }.container { background-color: white; padding: 20px; border: blue 1px solid; } /* Clear floats after the columns */.row:after { content: ""; display: table; clear: both; } @media screen and (max-width:840px) {.parent{ display: flex; flex-direction: column; }.col-75{ margin: 0; margin-left: 5%; }.col-25{ width: 100%; margin: 0%; padding: 12px; text-align: left; } input[type=text] { margin: 10px 12px 12px 0; } input[type=email] { margin: 10px 12px 12px 0; } input[type=tel]{ margin: 10px 12px 12px 0; } input[type=radio]{ margin: 5px 5px 0 0; }.mf{ display: flex; } } /* Adding styling for basic table */.basic{ display: flex; flex-direction: row; width: 100%; overflow-x: auto; }

 <.DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="style,css" /> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <title>Employee Data</title> <script src="basic:js" defer></script> </head> <body> <div class="top-div"> <h2>Employee</h2> <div class="mid-div"> <span>Add Employee</span> <div class="bot-div"> <form action="" id="form"> <div class="parent"> <div class="col-25"> <label class="namelabel"> Name:</label> </div> <div class="col-75"> <input name="name" type="text" maxlength="45" minlength="5" placeholder="Your Name" /> <label class="hidden" id="namehidden">This field is required</label> </div> </div> <div class="parent"> <div class="col-25"> <label> Gender:</label> </div> <div class="col-75 mf"> <div> <input type="radio" class="radio" name="gender" value="Male" id="rdbox1" checked /><span class="items">Male</span> </div> <div><input type="radio" class="radio" name="gender" value="Female" id="rdbox2"/><span class="items">Female</span> </div> </div> </div> <div class="parent"> <div class="col-25"> <label> Date of Birth:</label> </div> <div class="col-75"> <input type="date" name="dob" class="dob" /><br> <label class="hidden visible" id="dobhidden">This field is required</label> </div> </div> <div class="parent"> <div class="col-25"> <label> Email:</label> </div> <div class="col-75"> <input type="email" placeholder="Enter Email" name="email" class="email" /> <br> <label class="hidden" id="emailhidden">This field is required</label> </div> </div> <div class="parent"> <div class="col-25"> <label> Phone:</label> </div> <div class="col-75"> <input type="tel" placeholder="Enter phone" name="tel" class="tel" /> <br> <label class="hidden" id="telhidden">This field is incorrect</label> </div> </div> <div class="parent"> <div class="col-25"> <label class="padding"> Hobbies.</label> </div> <div class="col-75 vertical" name="hobbies"> <input class="chkbox" type="checkbox" name="hobbies" value="Gaming" id="chkbx1" /><span class="items">Gaming</span> <br> <input class="chkbox" type="checkbox" name="hobbies" value="Coding" id="chkbx2" /><span class="items">Coding</span> <br> <input class="chkbox" type="checkbox" name="hobbies" value="Music" id="chkbx3" /><span class="items">Music</span> <br> </div> </div> <div> <div class="col-75"> <button type="submit" id="button">Submit</button> </div> </div> </form> </div> </div> <h2>Basic</h2> <div class="mid-div"> <span>Add Employee</span> <div class="bot-div basic"> </div> </div> <h2>Advanced</h2> <div class="mid-div"> <span>Add Employee</span> <div class="bot-div"> </div> </div> </div> </div> </body> <script src="script.js"></script> </html>

Answer 1

  const keys = Object.keys(employeeData[0]);
  const form = document.getElementsByName("form")[0];
  console.log("form in edit listener ", form);
  for (let i = 0; i < form.length; i++) {
    const formElement = document.forms[0].elements[i];
    if (formElement.type == "radio") {
      formElement.checked = formElement.value === emp.Gender;
      if (!formElement.checked) {
        document.forms[0].elements[i + 1].checked = true;
      }
      i += 1;
      continue;
    }
    if (formElement.type == "checkbox") {
      for (let j = 0; j < emp.Hobbies.length; j++) {
        if (!formElement.checked) {
          formElement.checked = formElement.value === emp.Hobbies[j];
        }
      }
    }
    if (formElement.type != ("checkbox" || "radio")) {
      form.elements[i].value = emp[keys[i]];
      if (formElement.type == "text") {
        formElement.value = emp.Name;
      }
    }
  }

这样我就可以检查formElement.checked = formElement.value === emp.Gender; 并使用formElement.type == "radio"设置值。 我无法考虑这个问题，后来当我四处寻找解决方案时，它终于打动了我。 这似乎是一个小问题，但问题仍然存在。 为什么按钮组不是一个组？？？