时间戳

首页 > 解决方案 > 提交和序列化时忽略表单元素

javascript - 提交和序列化时忽略表单元素

问题描述

现在我正在尝试在 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() 执行一次时，它会显示该部分的名称、键和问题，但不显示前面或后面部分的问题。是否有理由像这样排除某些输入？

标签： javascripthtmljqueryforms

解决方案

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

推荐阅读