单击按钮时自动填充表单

Question

我在 StackOverflow 上阅读了很多关于我需要什么的条目，并且我还实现了我在此处找到的方法。嗯，它不能正常工作，我希望有人能告诉我原因。

我有一个包含 7 个输入字段的表单。我需要的是一个按钮，如果有人单击该按钮，表单将自动填充，每个字段上始终使用相同的文本。我应该这样工作：

形式： 输入1：空， 输入2：空， 输入 3：空， 输入 4：空， 输入 5：空， 输入 6：空， 输入 7：空，

所以七个输入字段是空的。现在，如果有人点击按钮，输入字段应该都得到相同的值，它应该看起来像这样：

输入 1：自动填充， 输入 2：自动填充， 输入 3：自动填充， 输入 4：自动填充， 输入 5：自动填充， 输入 6：自动填充， 输入 7：自动填充

让我告诉你我做了什么。我创建了以下按钮：

<a class="btn btn-warning" href="#" onClick="autoFill('Suppenbuffet'); return false;" role="button">Suppenbuffet</a>

然后我写了下面的JS代码：

<script>
        function autoFill(vorspeise) {
            document.getElementById('vorspeise').value = vorspeise;           
        }
    </script>

然后我将 id="vorspeise" 输入到我的所有输入字段中，如下所示：

<div class="form-group">
 <label class="control-label col-md-3 col-sm-3 col-xs-12">Input 1:  </label>
  <div class="col-md-9 col-sm-9 col-xs-12">
   <input type="text" name="vorspeise-traditionell-montag" id="vorspeise" class="form-control" value="<?php echo $yy ?>" required>
  </div>
</div>

<div class="form-group">
 <label class="control-label col-md-3 col-sm-3 col-xs-12">Input 2:  </label>
  <div class="col-md-9 col-sm-9 col-xs-12">
   <input type="text" name="vorspeise-traditionell-dienstag" id="vorspeise" class="form-control" value="<?php echo $yy ?>" required>
  </div>
</div>

<div class="form-group">
 <label class="control-label col-md-3 col-sm-3 col-xs-12">Input 3:  </label>
  <div class="col-md-9 col-sm-9 col-xs-12">
   <input type="text" name="vorspeise-traditionell-mittwoch" id="vorspeise" class="form-control" value="<?php echo $yy ?>" required>
  </div>
</div>

我现在的问题是，如果我点击按钮，只有第一个输入字段会被自动填充，而不是所有七个输入字段。有人能告诉我我需要如何更改代码，以便这将影响所有带有 id="vorspeise" 的输入字段吗？！

谢谢， 克里斯

Answer 1

ID 必须是唯一的，否则它将只返回第一个匹配的元素。将 id 更改为类定义，如下所示：

HTML

<div class="form-group">
 <label class="control-label col-md-3 col-sm-3 col-xs-12">Input 1:  </label>
 <div class="col-md-9 col-sm-9 col-xs-12">
  <input type="text" name="vorspeise-traditionell-montag" class="form-control vorspeise" value="<?php echo $yy ?>" required>
 </div>
</div>

<div class="form-group">
 <label class="control-label col-md-3 col-sm-3 col-xs-12">Input 2:  </label>
 <div class="col-md-9 col-sm-9 col-xs-12">
 <input type="text" name="vorspeise-traditionell-dienstag" class="form-control vorspeise" value="<?php echo $yy ?>" required>
 </div>
</div>

<div class="form-group">
 <label class="control-label col-md-3 col-sm-3 col-xs-12">Input 3:  </label>
 <div class="col-md-9 col-sm-9 col-xs-12">
 <input type="text" name="vorspeise-traditionell-mittwoch" class="form-control vorspeise" value="<?php echo $yy ?>" required>
 </div>
</div>

JS

function autoFill(vorspeise) {
   $('.vorspeise').val(vorspeise);          
}

DEMO

Answer 2

使用具有相同 id 的多个字段不是一个好主意。会产生问题的是 CSS、Scripting 等。

对所有输入使用相同的类。

或者其他方式可能是为每个输入使用不同的 ID。

希望对你有帮助:)

Answer 3

ID：是唯一的（或应该是唯一的），因此您需要通过类或唯一的 id：s 对它们进行寻址

例子：

function autoFill(vorspeise) {
            document.getElementById('vorspeise1').value = vorspeise;           
            document.getElementById('vorspeise2').value = vorspeise;           
            document.getElementById('vorspeise3').value = vorspeise;           
        }

或者您可以按名称添加它们：

document.getElementsByName("vorspeise-traditionell-mittwoch")[0].value = "bla"
document.getElementsByName("vorspeise-traditionell-dienstag")[0].value = "bla"
document.getElementsByName("vorspeise-traditionell-montag")[0].value = "bla"