单击按钮时自动填充表单

时间:2015-08-28 07:25:34

标签: javascript jquery html forms input

我在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; ?!

谢谢, 克里斯

3 个答案:

答案 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。

我希望它有所帮助:)