Javascript getElementsByName.value not working

Question

I am trying to make a simple javascript program bit it isn't working. Kindly help. In eclipse I have created a dynamic web project and in DD my welcome file is index.jsp. Given below is my code for index.jsp

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Duncan'S</title>
<script type="text/javascript">
function nameSubmit() {
    alert(document.getElementsByName("username").value);
}
function CakeNumber() {
    alert(document.getElementsByName("numOfCake").value);
}
</script>
</head>
<body>
<form action="myservlet.do">
    <table>
        <tr>
              <td>Name:</td>
              <td><input type="text" id="name" name="username" size="10"
                onchange="nameSubmit();"></td>
        </tr>
        <tr>
              <td>Number Of Duncan's Cake:</td>
              <td><input type="text" id="numOfDunCake" name="numOfCake"
                size="5" onchange="CakeNumber();"></td>
        </tr>
    </table>
</form>
</body>
</html>

In the above code both the functions are returning undefined.....!!How can I get the real value??

You are using `username` instead of `name` – Don Nov 07 '13 at 11:34 — Don, Nov 07 '13 at 11:34

Praveen · Accepted Answer · 2013-11-07T12:01:20.183

39

You have mentioned Wrong id

alert(document.getElementById("name").value);

if you want to use name attribute then

alert(document.getElementsByName("username")[0].value);

Updates:

input type="text" id="name" name="username"

id is different from name

edited Nov 07 '13 at 12:01

answered Nov 07 '13 at 11:33

Praveen

55,303
33
133
164

Praveen this expression is giving the right value for the function CakeNumber() So i guess it somehow works. Please corrext me if I am wrong. What should i use to fet the value?? – user2583134 Nov 07 '13 at 11:35
@user2583134 no in `CakeNumber()` both name and id are having same names and hence it is working see this `input type="text" id="numOfDunCake" name="numOfDunCake"` – Praveen Nov 07 '13 at 11:37
@Praveen I tried using GetElementByName() and changed the value of both name and id, taking value of name as an argument in the function but still it does not work and this time the 1st function is returning value as undefined and the second function never gets called :( – user2583134 Nov 07 '13 at 11:43
@Praveen I have used the command said by you but now both of them are returning 'undefined'. What should I do? – user2583134 Nov 07 '13 at 11:50
@user2583134 sorry, it has to be `alert(document.getElementsByName("username")[0].value);` check this fiddle http://jsfiddle.net/88krg/ – Praveen Nov 07 '13 at 12:01
1

@Praveen Thanks a lot friend..It worked this time. One more thing how can i get the value by using id...?? :) – user2583134 Nov 07 '13 at 12:05
@user2583134 similar what you have done for `CakeNumber`. See this fiddle http://jsfiddle.net/88krg/1/. The problem you have referred name instead of id. Hope you understand. – Praveen Nov 07 '13 at 12:09

score 4 · Answer 2 · edited May 21 '17 at 03:31

document.getElementsByName("name") will get several elements called by same name . document.getElementsByName("name")[Number] will get one of them. document.getElementsByName("name")[Number].value will get the value of paticular element.

The key of this question is this:
The name of elements is not unique, it is usually used for several input elements in the form.
On the other hand, the id of the element is unique, which is the only definition for a particular element in a html file.

score 0 · Answer 3 · edited May 30 '20 at 10:23

Here is the example for having one or more checkboxes value. If you have two or more checkboxes and need values then this would really help.

function myFunction() {
  var selchbox = [];
  var inputfields = document.getElementsByName("myCheck");
  var ar_inputflds = inputfields.length;

  for (var i = 0; i < ar_inputflds; i++) {
    if (inputfields[i].type == 'checkbox' && inputfields[i].checked == true)
      selchbox.push(inputfields[i].value);
  }
  return selchbox;

}

document.getElementById('btntest').onclick = function() {
  var selchb = myFunction();
  console.log(selchb);
}

Checkbox:
<input type="checkbox" name="myCheck" value="UK">United Kingdom
<input type="checkbox" name="myCheck" value="USA">United States
<input type="checkbox" name="myCheck" value="IL">Illinois
<input type="checkbox" name="myCheck" value="MA">Massachusetts
<input type="checkbox" name="myCheck" value="UT">Utah

<input type="button" value="Click" id="btntest" />

Javascript getElementsByName.value not working

3 Answers3

Linked

Related