提交没有隐藏 HTML 元素数组值的表单答案

【问题标题】：Submit form without hidden HTML element array value提交没有隐藏 HTML 元素数组值的表单
【发布时间】：2019-02-15 08:08:00
【问题描述】：

基本上这就是我想要做的事情

我有一个按钮，通过触发它，向用户显示书籍的下拉列表。每个触发器都会加载一个新的下拉菜单。

我一直将它们加载给用户的方式是克隆一个隐藏的 div。像这样

<form action="POST">
  <div id="books"></div>
  <button onclick="addBook()"></button>
  <input type="submit" value="Submit">
</form> 

<select id="book" name="books[]" style="display: none;">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>


<script>
$count = 0;

function addBook() {
     $clone = $("#book").clone().show();
     clone.find("#book").attr('id','book-' + $count);
     clone.appendTo("#books");
     $count += 1;
 }

例如，点击按钮3次后，这将是我的html显示（我显然改变了选择的值）

  <form action="POST">
    <div id="books">
    <select id="book-0" name="books[]">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C" selected>C</option>
  </select>

 <select id="book-1" name="books[]">
  <option value="A">A</option>
  <option value="B" selected>B</option>
  <option value="C">C</option>
  </select>

<select id="book-3" name="books[]">
  <option value="A" selected>A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

  </div>
  <button onclick="addBook()"></button>
  <input type="submit" value="Submit">
</form> 

 <select id="book" name="books[]" style="display: none;">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
   </select>

现在的问题是......当我点击提交时，我正在使用名称字段（即书籍 []）收集他们的数据，这应该类似于书籍 [C、B、A]。但是，当我打印 books[] 值时，我得到 books[C, B, A, A]。最后一个 A 似乎来自隐藏的 div！即使它被隐藏了。

var books = $("select[name='books[]']").map(function(){return $(this).val();}).get();

console.log(books);

我尝试禁用、使其只读等，但每次隐藏 div 的值似乎都附加到我的数组元素（我不想要）

【问题讨论】：

console.log(books[]) 将导致Uncaught SyntaxError: Unexpected token ]，而不是books[C, B, A, A]..？
听起来像是 <template> 的工作
我相信许多浏览器不会发布直接应用display:none 的输入，尽管I'm not sure how reliable that behavior is。除了将它们设置为display:none 之外，您可能还需要disable the inputs（并在克隆时重新启用它们）。话虽如此，我同意@JosephMarikle 的观点，即模板可能是更好的选择。
你是循环提交表单还是集合值？

标签： javascript jquery html arrays

【解决方案1】：

对代码稍作更改，对我来说工作正常。我假设您也获得了带有表单数据的隐藏选择（从您用来克隆的地方）值。 Submit 或 $("#myForm").serialize() 两者都没有额外提供正确的值。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button id="addBook" onclick="addBook()">Add Book</button>
<form action="POST" id="myForm">
  <div id="books"></div>
  <input type="submit" value="Submit">
</form> 

<select id="book" name="books[]" style="display: none;">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>


<script>
$count = 0;
function addBook() {
     $clone = $("#book").clone().show();
     $clone.appendTo("#books");
     $("#books select:last-child").attr('id','book-' + $count);
     $count += 1;
 }
 </script>

【讨论】：