CODEWITHSUNDEEP
javascripthtml
Aminul
Aminul

Reputation: 67

How to set value to all input row

I tried to set input value to all input row by using JavaScript. Please help me.

function myFunction() {
        document.getElementById("myText").value = "Johnny Bravo";
    }
<button class="btn" onclick="myFunction()">Set Value To All Input</button>

<input  type="text" name="part_name[]" id="myText" value="" />
<input  type="text" name="part_name[]" id="myText" value="" />
<input  type="text" name="part_name[]" id="myText" value="" />
<input  type="text" name="part_name[]" id="myText" value="" />

This code runs for first input row only. But I need to set value to all input rows. Any body please help me.

Upvotes: 0

Views: 474

Answers (5)

Sven.hig
Sven.hig

Reputation: 4519

In this example you could use getElementsByClassName change your imput id's to classes loop through the elements and assign a value to them

var inputs = document.getElementsByClassName("myText");
function myFunction() {
  new Array(inputs.length).fill().forEach((_,i) => {
    inputs[i].value = "Johnny Bravo";
  })
}
<button class="btn" onclick="myFunction()">Set Value To All Input</button>

<input type="text" name="part_name[]" class="myText" value="" />
<input type="text" name="part_name[]" class="myText" value="" />
<input type="text" name="part_name[]" class="myText" value="" />
<input type="text" name="part_name[]" class="myText" value="" />

Upvotes: 1

Ritu
Ritu

Reputation: 732

You can also try using querySelectorAll method with direct element. Also, Id should be always unique.

function myFunction() {
  const ELEMENTS = document.querySelectorAll("input");
  for (var elem=0, length=ELEMENTS.length; elem<length; elem++) {
    document.getElementsByClassName("myText")[elem].value = 'Johnny Bravo';
  }
}
<button class="btn" onclick="myFunction()">Set Value To All Input</button>
<input  type="text" name="part_name[]" class="myText" value="" />
<input  type="text" name="part_name[]" class="myText" value="" />
<input  type="text" name="part_name[]" class="myText" value="" />
<input  type="text" name="part_name[]" class="myText" value="" />

Upvotes: 1

user13949633
user13949633

Reputation: 56

Try using class="myText" instead of id="myText" , and use getElementsByClassName, or querySelectorAll to select the inputs

And then loop trough them

function myFunction() { 
        
var elements = document.getElementsByClassName("myText"); 
            
for(var i = 0; i < elements.length; i++) { 
  elements[i].value = "Johnny Bravo" 
  } 
}

Upvotes: 1

micronyks
micronyks

Reputation: 55443

You can use querySelectorAll method as follow,

function myFunction() {
       
       var eles = document.querySelectorAll("#myText");

       for(const el of eles){
          el.value ='Johnny Bravo';
       }
}

myFunction();
<button class="btn" onclick="myFunction()">Set Value To All Input</button>

<input  type="text" name="part_name[]" id="myText" value="" />
<input  type="text" name="part_name[]" id="myText" value="" />
<input  type="text" name="part_name[]" id="myText" value="" />
<input  type="text" name="part_name[]" id="myText" value="" />

Upvotes: 1

basic
basic

Reputation: 3408

Can't have a duplicate id, id's must be unique. Use a classname instead with getElementsByClassName.

function myFunction() {
        var elements = document.getElementsByClassName("myText");
        for(var i = 0; i < elements.length; i++) {
            elements[i].value = "Johnny Bravo"
        }
    }
<button class="btn" onclick="myFunction()">Set Value To All Input</button>

<input  type="text" name="part_name[]" class="myText" value="" />
<input  type="text" name="part_name[]" class="myText" value="" />
<input  type="text" name="part_name[]" class="myText" value="" />
<input  type="text" name="part_name[]" class="myText" value="" />

Upvotes: 1

Related Questions