javascript - 单击按钮时自动填写表单

Question

我在 StackOverflow 上阅读了很多关于我需要什么的条目，我还实现了我在这里找到的一个方法。好吧，它没有正常工作，我希望有人能告诉我原因。

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

表格:输入 1:空，输入 2:空，输入 3:空，输入 4:空，输入 5:空，输入 6:空，输入7:空，

所以七个输入字段是空的。现在，如果有人点击按钮，输入字段应该都获得相同的值，它应该如下所示:

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

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

<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