CODEWITHSUNDEEP
javascripthtml
user9817924
user9817924

Reputation:

Change value of all elements with same class won't work

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.

Upvotes: 3

Views: 4109

Answers (3)

Mark Schultheiss
Mark Schultheiss

Reputation: 34168

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>

Upvotes: 2

caramba
caramba

Reputation: 22480

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

Upvotes: 3

guigoz
guigoz

Reputation: 704

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

Upvotes: 0

Related Questions