[SOLVED] Assign value to all input boxes

[jaymc]

I want a simple javascript function that will allow me to dynamically set the value of all text fields in an array, see below

 

 

<BR><input type="text" id="test[]">

<BR><input type="text" id="test[]">

<BR><input type="text" id="test[]">

<BR><input type="text" id="test[]">

 

 

In this example there are 4 boxes, sometimes there can be 10, sometimes 100, its dynamic so I cant use hard coded ID/NAME

 

I want something like this

 

<div OnClick="document.getElementById('test').value=='cheese'">Click me</div>

 

This will then set all text box values to cheese

 

Please note that there will be other input boxes on the page, but will not be part of the test[] bunch

 

How is can this be done

[rhodesa]

Well, first, we need to correct your HTML. You should be using NAME, not ID:

<BR><input type="text" name="test[]">
<BR><input type="text" name="test[]">
<BR><input type="text" name="test[]">
<BR><input type="text" name="test[]">

 

Here is the JS though:

<script type="text/javascript">
  function setInputs ( str ) {
    var eles = document.forms['myform']['test[]'];
    for(var n=0;n<eles.length;n++)
      eles[n].value = str;
  }
</script>
<form name="myform">
<BR><input type="text" name="test[]">
<BR><input type="text" name="test[]">
<BR><input type="text" name="test[]">
<BR><input type="text" name="test[]">
</form>
<div onclick="setInputs('cheese');">Click me</div>

[jaymc]

Thanks

 

Ok, next question

 

I want to do exactly the same, but for a drop down, so here is the drop downs, which may appear many times

 

 

<select name="dropdown[]"><option>Dog</option><option>Cat</option><option>Chicken</option></select>

<select name="dropdown[]"><option>Dog</option><option>Cat</option><option>Chicken</option></select>

<select name="dropdown[]"><option>Dog</option><option>Cat</option><option>Chicken</option></select>

 

And I want to have another drop down which when selected will set the value of those 3 drop downs to what ever value the master drop down is set to

 

<select name="MASTER" OnChange="changeEmAll();">

<option>Dog</option>

<option>Cat</option>

<option>Chicken</option>

</select>

 

Dont worry about the ONCHANGE stuff, I can do all that, I just need it acting as a master switch, just like your above example with the text fields

[rhodesa]

You will need to use VALUES first off. But here is a snippet that works:

 

<script type="text/javascript">
  function changeEmAll ( val ) {
    var eles = document.forms['myform']['dropdown[]'];
    for(var n=0;n<eles.length;n++){
      for(var a=0;a<eles[n].options.length;a++){
        if(eles[n].options[a].value == val)
          eles[n].selectedIndex = a;
      }
    }
  }
</script>
<form name="myform">
  Some dropdowns:<br />
  <select name="dropdown[]">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="chicken">Chicken</option>
  </select><br />
  <select name="dropdown[]">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="chicken">Chicken</option>
  </select><br />
  <select name="dropdown[]">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="chicken">Chicken</option>
  </select><br />

  <br />Master:<br />
  <select name="MASTER" onchange="changeEmAll(this.value);">
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="chicken">Chicken</option>
  </select>
</form>

[jaymc]

Thats the one

 

Thanks.