Problem is I want to change all elements with same class. Example here:

<select class="dntselect"  onchange="go(this); return false;">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    <option value="4">test4</option>
</select>

<form>
    <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
    <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
    <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

So I want to replace that "XXX" value in input with selected option for example. Replace "XXX" value with "test1"

I tried some tutorials and some of my own work but it won't work. And I can't figure how to do it.

<script>
    function go(x) {
        var elements = document.getElementsByClassName('ppselect').value;
        for (var i = 0; i < elements.length; i++) {
            elements[i].x.options[x.selectedIndex].text;
        }
    }
</script>

It is not duplicate - because i am inspired by these "duplicates" but i cant figure how to do it in this case.

Problem is I want to change all elements with same class. Example here:

<select class="dntselect"  onchange="go(this); return false;">
    <option value="1">test1</option>
    <option value="2">test2</option>
    <option value="3">test3</option>
    <option value="4">test4</option>
</select>

<form>
    <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
    <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
    <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

So I want to replace that "XXX" value in input with selected option for example. Replace "XXX" value with "test1"

I tried some tutorials and some of my own work but it won't work. And I can't figure how to do it.

<script>
    function go(x) {
        var elements = document.getElementsByClassName('ppselect').value;
        for (var i = 0; i < elements.length; i++) {
            elements[i].x.options[x.selectedIndex].text;
        }
    }
</script>

It is not duplicate - because i am inspired by these "duplicates" but i cant figure how to do it in this case.

• javascript
• html

• 2 IDs must be unique. You're using getElementsByClassName which is to be used with classes, yet you have none on your inputs – j08691 Commented Feb 9, 2018 at 16:41
• ou sorry in original is class - edited – user9817924 Commented Feb 9, 2018 at 16:43
• 1 Possible duplicate of What do querySelectorAll, getElementsByClassName and other getElementsBy* methods return? – Heretic Monkey Commented Feb 9, 2018 at 16:45
• Yeah i used those tutorials but i cant figure out what to do with my problem. Because i have nearly zero experience with js. – user9817924 Commented Feb 9, 2018 at 16:47
• 1 Also of interest here is stackoverflow./questions/24427621/… – Mark Schultheiss Commented Feb 9, 2018 at 18:04

3 Answers 3

Let's ignore the case that you use multiple <form> elements which in this case make no sense just as using type=hidden if you want to see whats going on.

So to answer the question. Why not use document.querySelectorAll() which has the .forEach() option to use like so:

function go(x) {
    var text = x.options[x.selectedIndex].text;
    var elements = document.querySelectorAll('.ppselect');
    elements.forEach(function(element){
        element.value = text;
    });
};

<select class="dntselect"  onchange="go(this); return false;">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
  <option value="4">test4</option>
</select>

<input type="text" class="ppselect" name="item_name" value="XXX">
<input type="text" class="ppselect" name="item_name" value="XXX">

<input type="text" class="ppselect" name="item_name" value="XXX">

rather then pretty much the same thing with using Document.getElementsByClassName() where your have to write the for loop

function go(x) {
    var text = x.options[x.selectedIndex].text;
    var elements = document.getElementsByClassName('ppselect');
    for(var i=0; i < elements.length; i++){
        elements[i].value = text;
    }
};

<select class="dntselect"  onchange="go(this); return false;">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
  <option value="4">test4</option>
</select>

<input type="text" class="ppselect" name="item_name" value="XXX">
<input type="text" class="ppselect" name="item_name" value="XXX">

<input type="text" class="ppselect" name="item_name" value="XXX">

Your script makes little sense to me however perhaps you intended to use the class instead of an id which you duplicated and is invalid.

I modified your function a bit so it would work but that actually still makes little sense to me (setting values of all hidden elements to the selection).

function go(x) {
  var el = document.getElementsByClassName('ppselect');
  for (var i = 0; i < el.length; i++) {
    el[i].value = x.options[x.selectedIndex].innerText;
  }
}

<select class="dntselect" onchange="go(this); return false;">
  <option value="1">test1</option>
  <option value="2">test2</option>
  <option value="3">test3</option>
  <option value="4">test4</option>
</select>

<form>
  <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
  <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

<form>
  <input type="hidden" class="ppselect" name="item_name" value="XXX">
</form>

this is because document.getElementsByClassName('ppselect').value is undefined

your function should be

function go(x)
{
var elements = document.getElementsByClassName('ppselect'); 
for (var i = 0; i < elements.length; i++) {
        elements[i].value=x.options[x.selectedIndex].innerHTML;
    }
}