单击按钮时自动填充表单

我在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”的所有输入字段？

谢谢，克里斯

来源

2015-08-28 Christoph C.

是的，因为你给所有的输入字段相同的ID，Ids必须是唯一的每个元素！ –

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>

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

DEMO

来源

2015-08-28 07:30:51

就是这样！谢谢@Norlihazmey Ghazali！还有一个问题，如果我想在检查复选框时完全一样，我的JS函数应该是什么样子？因此，请自动填充文本字段，它应该是自动检查框 –

JS取决于您的HTML结构，您可以使用'.prop（）'来检查这些复选框 –

您可以将复选框的演示添加到JSfiddle吗？我真的很感激 –

的ID：是唯一的（或者应该是），所以你需要通过一个类来ADRESS他们，或通过独特的编号：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"

来源

2015-08-28 07:28:57 BobbyTables

噢好吧，但我已经需要我的类在输入按钮内，所以我想我不能创建第二类，我需要创建唯一的ID，对吗？ –

你可以按照课程或名称或id =来调整它们）你可以有多个类，例如class =“form-control vorspiese-class” – BobbyTables

@ChristophC。如果我为两个不同的字段使用两个onClick按钮，则它们互相中断，即使它们有两个不同的ID也会添加具有唯一名称的示例 – BobbyTables

它不使用多个字段是个好主意具有相同的ID。它会造成问题是CSS，脚本等。

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

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

我希望它有帮助:)

来源

2015-08-28 07:33:21

单击按钮时自动填充表单

回答

相关问题