Question

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

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

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

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

输入1：自动填充，输入2：AUTOFILLED，输入3：AUTOFILLED，输入4：AUTOFILLED，输入5：AUTOFILLED，输入6：AUTOFILLED，输入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 =＆＃34; vorspeise＆＃34;到我的所有输入字段：

<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 =＆＃34; vorspeise＆＃34; ？！

谢谢，克里斯

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：是唯一的（或者应该是），所以你需要通过一个类或唯一的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"

Answer 3

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

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

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

我希望它有所帮助：）

单击按钮时自动填充表单

3 个答案: