Assign value for multiple input boxes using javascript?

Hi I have a problem in assign single values to multiple input boxes. i am trying many ways but it assign only 1 text box. How can I assign multiple text boxes.

Note: I have the same ID for all input boxes.

My code is given below

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function getInputs()
{
  var inputs = document.getElementsByTagName('input');
  var ids = new Array();
  for(var i = 0; i < inputs.length; i++)
  {
    if(inputs[i].getAttribute('id').toLowerCase()== 'myid')
    {       
       document.getElementsById('myid').value="1";
    }
  }   
}    
window.onload = getInputs;
</script>
</head>
<body>
<form>
  <input type="text"  id="myid"><br>
  <input type="text"  id="myid"><br>
  <input type="text"  id="myid"><br>
  <input type="text"  id="myid"><br>
</form>
</body>
</html>

Can anyone help?

Answers


It only assigns a value to one of because ID's should be unique; therefore you're only actually going to end up targetting the first one with that value assignment.

Change your HTML to use a class instead:

<input type="text"  class="myids"><br>
<input type="text"  class="myids"><br>
<input type="text"  class="myids"><br>
<input type="text"  class="myids"><br>

Then, you can adapt your JavaScript accordingly.


jQuery

in jQuery, you could then set a value using:

$('.myids').val('value for all of them here');

jQuery jsFiddle here.


Pure JavaScript

In Javascript, you'd use getElementsByClassName() and iterate through them, giving them the same value.

var x = document.getElementsByClassName('myids');
for(i = 0; i < x.length; i++) {
  x[i].value = "New!";
}

Pure JavaScript jsFiddle here.


Need Your Help

gSOAP dynamic array as input parameter

c++ web-services gsoap

I generate soap service and client using gSOAP toolkit which is supposed to send an int array which is put in a struct as is suggested in gSOAP docs:

Toggle div with easing

jquery jquery-ui html toggle easing

I've got a link, when clicking this I want a div to slideIn with easing, and then clicking the link again, it should close the div, with easing...

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.