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

Posted 2023-05-09

【中文标题】提交和序列化时忽略表单元素

【英文标题】：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() 在表单的每个部分可见时，它会显示名称、键和该部分的问题，但不显示之前或之后部分的问题。是否有理由像这样排除某些输入？

【参考方案1】：

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