I read a lot of entries here on StackOverflow about what I need and I also implemented a method that I found here. Well it is not working as it should and I hope someone can tell me why.

I have a form with 7 input fields. What I need is a button and if someone clicks on the button, the form will be autofilled, always with the same text on every field. I should work something like this:

Form: Input 1: empty, Input 2: empty, Input 3: empty, Input 4: empty, Input 5: empty, Input 6: empty, Input 7: empty,

So the seven input fields are empty. Now if someone clicks on the button, the input fields should all get the same value and it should look like this:

Input 1: AUTOFILLED, Input 2: AUTOFILLED, Input 3: AUTOFILLED, Input 4: AUTOFILLED, Input 5: AUTOFILLED, Input 6: AUTOFILLED, Input 7: AUTOFILLED

Let me show you what I did. I created the following button:

<a class="btn btn-warning" href="#" onClick="autoFill('Suppenbuffet'); return false;" role="button">Suppenbuffet</a>

Then I wrote the following JS code:

<script>
        function autoFill(vorspeise) {
            document.getElementById('vorspeise').value = vorspeise;           
        }
    </script>

And then I entered the id="vorspeise" to all my input fields like this:

<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>

My problem now is, that if I click the button, ONLY the first input field will be autofilled and not all seven input fields. Can someone tell me how I need to change the code so that this will affect all input fields with the id="vorspeise" ?!

Thanks, Chris

I read a lot of entries here on StackOverflow about what I need and I also implemented a method that I found here. Well it is not working as it should and I hope someone can tell me why.

I have a form with 7 input fields. What I need is a button and if someone clicks on the button, the form will be autofilled, always with the same text on every field. I should work something like this:

Form: Input 1: empty, Input 2: empty, Input 3: empty, Input 4: empty, Input 5: empty, Input 6: empty, Input 7: empty,

So the seven input fields are empty. Now if someone clicks on the button, the input fields should all get the same value and it should look like this:

Input 1: AUTOFILLED, Input 2: AUTOFILLED, Input 3: AUTOFILLED, Input 4: AUTOFILLED, Input 5: AUTOFILLED, Input 6: AUTOFILLED, Input 7: AUTOFILLED

Let me show you what I did. I created the following button:

<a class="btn btn-warning" href="#" onClick="autoFill('Suppenbuffet'); return false;" role="button">Suppenbuffet</a>

Then I wrote the following JS code:

<script>
        function autoFill(vorspeise) {
            document.getElementById('vorspeise').value = vorspeise;           
        }
    </script>

And then I entered the id="vorspeise" to all my input fields like this:

<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>

My problem now is, that if I click the button, ONLY the first input field will be autofilled and not all seven input fields. Can someone tell me how I need to change the code so that this will affect all input fields with the id="vorspeise" ?!

Thanks, Chris

• javascript
• jquery
• html
• forms
• input

Share Improve this question Follow asked Aug 28, 2015 at 7:25 Christoph C.Christoph C. 93844 gold badges2222 silver badges4141 bronze badges 1

• yeah because you are giving the same Id to all the input fields, Ids must be unique for every element! – Vibhesh Kaul Commented Aug 28, 2015 at 7:31

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

ID must be unique otherwise it will returned first matched element only. Change the id into class definition like so :

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

it is not a good idea to use multiple fields with same id. It will create problems is CSS, Scripting, etc.

Either use same class for all the input.

Or other way could be to use different ID's for each inputs.

I hope it helps :)

IDs:are unique (or supposed to be) so you need to adress them by a class, or by unique id:s

Example:

function autoFill(vorspeise) {
            document.getElementById('vorspeise1').value = vorspeise;           
            document.getElementById('vorspeise2').value = vorspeise;           
            document.getElementById('vorspeise3').value = vorspeise;           
        }

Or you can addres them by name:

document.getElementsByName("vorspeise-traditionell-mittwoch")[0].value = "bla"
document.getElementsByName("vorspeise-traditionell-dienstag")[0].value = "bla"
document.getElementsByName("vorspeise-traditionell-montag")[0].value = "bla"