提交和序列化时忽略表单元素答案

【问题标题】：Form elements are being ignored when submitting and serializing提交和序列化时忽略表单元素
【发布时间】：2020-12-04 18:13:02
【问题描述】：

现在我正在尝试在 HTML 中创建一种测试表单，并且在提交表单和使用 serializeArray() 时都会忽略某些元素。基本表单代码如下所示：

<form action="/form-submit" method="POST">
  <div id="login">
    <h1>Form Title</h1>
    <label>Name:</label>
    <input type="text" name="name" id="name"></input><br>
    <label>Key:</label>
    <input type="text" name="key" id="key"></input><br>
    <button onclick="hideLogin()" type="button" class="next-section" id="start-test" disabled>Start Test</button>
    <p id="invalid-key">Invalid Key</p>
  </div>
  <div id="earth">
    <p>Earth questions</p> 
  </div>
  <div id="bio">
    <p>Bio questions</p>
  </div>
  <div id="chem">
    <p>Chem questions</p>
  </div>
  <div id="physics">
    <p>Physics questions</p>
  </div>
  <div id="math">
    <p>Math questions</p> 
  </div>
  <div id="end-page">
    <p>end page</p>
  </div>
</form>

问题是从 questions 对象中添加的，如下所示：

function readQuestions(section){
  questions[section].forEach((item, number) => {
    if (item.type === "mc") {
      $(`#${section}`).append($(`<div id="${section}-${number}"></div>`))
      $(`#${section}-${number}`).append(`<label class="mc-question">${item.question}</label>`)
      $(`#${section}-${number}`).append(`<ul></ul>`)
      item.choices.forEach((choice,index)=>{
        $(`#${section}-${number} ul`).append('<li></li>').append(`<label class="container" for="${section}-q${number}-c${index}">${choice}<input type="radio" name="${section}-q${number}" id="${section}-q${number}-c${index}"><span class="checkmark"></span></label>`)
      })
    } else {
      $(`#${section}`).append($(`<div id="${section}-${number}"></div>`))
      $(`#${section}-${number}`).append(`<label for="${section}-q${number}" class="short-question">${item.question}</label>`)
      $(`#${section}-${number}`).append(`<input type="text" id="${section}-q${number}" name="${section}-q${number}">`)
    }
  })
  if (section === 'math') {
    $(`#math`).append($(`<input type="submit" class="next-section" disabled>Submit Test</input>`))
  } else {
    $(`#${section}`).append($(`<button onclick="nextSection('${section}')" type="button" class="next-section" disabled>Next Section</button>`))
  }
}

使用visibility: hidden 和position: absolute 时，这些部分是不可见的，直到用户到达该部分，当它们变得可见并且位置设置为静态时。现在，在提交表单时，登录部分中名称和键的两个输入始终可见，但其他元素均不可见。当console.dir()serializeArray() 在表单的每个部分可见时，它会显示名称、键和该部分的问题，但不显示之前或之后部分的问题。是否有理由像这样排除某些输入？

【问题讨论】：

标签： javascript html jquery forms

【解决方案1】：

在另一段代码中，我在每个部分的计时器用完后禁用了输入。禁用的输入不会与表单一起提交或由 serializeArray() 读取，因此我不得不将输入设为只读。将它们设为只读也会禁用用户输入，但会将它们包含在表单提交和 serializeArray() 中。

【讨论】：