我在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; ?!
谢谢, 克里斯
答案 0 :(得分:3)
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 强>
答案 1 :(得分:0)
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"
答案 2 :(得分:0)
使用具有相同ID的多个字段不是一个好主意。它会产生CSS,Scripting等问题。
为所有输入使用相同的类。
或者其他方式可以是为每个输入使用不同的ID。
我希望它有所帮助:)