Get element by name error

**keyboard** · 08-09-2011, 10:43 AM

HTML Code:

<html>

<head>
<script type="text/javascript">

	

         myTextField = document.getElementById('myText');

         myCheckField = document.getElementByName('choice');

	alert('myTextField.value');
	alert('myCheckField.value');
		

function notEmpty(){

if(myTextField.value == "") {
if(myCheckField.value == "")  {
   alert('Please select a checkbox.');
}}}


</script>



</head>

<body>

<form>
<br />

<input type="text" id="myText" name="choice1"><br /><br />

Choice 1<input type="checkbox" name="choice" value="choice1"><br />
Choice 2<input type="checkbox" name="choice" value="choice2"><br />
Choice 3<input type="checkbox" name="choice" value="choice3"><br />
Choice 4<input type="checkbox" name="choice" value="choice4"><br /><br />

<input type="submit" onClick="notEmpty()" value="BUTTON">
</form>

</body>

</html>

HTML Code:

myCheckField = document.getElementByName('choice');

I dont know why but thats causing an error. Any help

**jscheuer1** · 08-09-2011, 01:36 PM

There's no getElementByName. It's elements:

Code:

document.getElementsByName('name')

And if you want one, even if it's the only one, you must specify the index. If it's the only one, or if it's the first one, it's 0:

Code:

document.getElementsByName('choice')[0]

**keyboard** · 08-09-2011, 10:03 PM

HTML Code:

Choice 1<input type="checkbox" name="choice" value="choice1"><br />
Choice 2<input type="checkbox" name="choice" value="choice2"><br />
Choice 3<input type="checkbox" name="choice" value="choice3"><br />
Choice 4<input type="checkbox" name="choice" value="choice4"><br /><br />

I'm trying to get all of the check box values and see if one was selected. Am I allowed to get more than one at a time?

**jscheuer1** · 08-09-2011, 11:07 PM

Hmm, wouldn't radio buttons be better? If they all have the same name, only one of them may be checked:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Choices</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
Choice 1<input type="radio" name="choice" value="choice1"><br />
Choice 2<input type="radio" name="choice" value="choice2"><br />
Choice 3<input type="radio" name="choice" value="choice3"><br />
Choice 4<input type="radio" name="choice" value="choice4"><br /><br />
<script type="text/javascript">
(function(){
	var choices = document.getElementsByName('choice');
	function getchoice(){
		for(var i = 0; i < choices.length; ++i){
			if(choices[i].checked){
				alert('You Chose ' + choices[i].value + '!');
			}
		}
	}
	for(var i = 0; i < choices.length; ++i){
		choices[i].onclick = getchoice;
	}
})();
</script>
</body>
</html>

There's actually a simpler way to go about that, but it demonstrates with two examples how to loop through the choices, which might be necessary in a more complex situation. A simpler way using only one loop:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Simpler Choices</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
Choice 1<input type="radio" name="choice" value="choice1"><br />
Choice 2<input type="radio" name="choice" value="choice2"><br />
Choice 3<input type="radio" name="choice" value="choice3"><br />
Choice 4<input type="radio" name="choice" value="choice4"><br /><br />
<script type="text/javascript">
(function(){
	var choices = document.getElementsByName('choice');
	function getchoice(){
		alert('You Chose ' + this.value + '!');
	}
	for(var i = 0; i < choices.length; ++i){
		choices[i].onclick = getchoice;
	}
})();
</script>
</body>
</html>

**keyboard** · 08-10-2011, 09:19 AM

HTML Code:

<html>

<head>
<script type="text/javascript">

	

         myTextField = document.getElementById('myText');

         myCheckField = document.getElementsByName('choice');

		

function notEmpty(){

if(myTextField.value != "") {
if(myCheckField.value == "")  {
   alert('Please select a checkbox.');
}

}

}


</script>



</head>

<body>

<form>
<br />

<input type="text" id="myText" name="choice1"><br /><br />

Choice 1<input type="radio" name="choice" value="choice1"><br />
Choice 2<input type="radio" name="choice" value="choice2"><br />
Choice 3<input type="radio" name="choice" value="choice3"><br />
Choice 4<input type="radio" name="choice" value="choice4"><br /><br />

<input type="submit" onClick="notEmpty()" value="BUTTON">
</form>

</body>

</html>

The error is stopped but it dosen't do what it's meant to.

If the text field is empty and you click submit, nothing happens. If The text field has something in it and none of the radio buttons are selected, an alert pops up. If the text field has something in it and one of the radio buttons are selected, then nothing happens.( thats what I'm trying to make happen). Any help?

**jscheuer1** · 08-10-2011, 02:35 PM

Code:

         myTextField = document.getElementById('myText');

         myCheckField = document.getElementsByName('choice');

are both undefined. The browser hasn't parsed them yet.

Even if they were what you would like them to be:

Code:

if(myCheckField.value == "")

would then always be true because a collection of elements (here, technically a nodeList) has no value property. In other words, you seem to have ignored what I said about needing to provide an index for getElementsByName().

If you want to influence what the form does, you want its onsubmit event, not its submit button's onclick event.

This follows your criteria, at least as I understand them:

Code:

<html>
<head>
</head>
<body>
<form onsubmit="return notEmpty();">
<br />
<input type="text" id="myText" name="choice1"><br /><br />
Choice 1<input type="radio" name="choice" value="choice1"><br />
Choice 2<input type="radio" name="choice" value="choice2"><br />
Choice 3<input type="radio" name="choice" value="choice3"><br />
Choice 4<input type="radio" name="choice" value="choice4"><br /><br />
<input type="submit" value="BUTTON">
</form>
<script type="text/javascript">
var myTextField = document.getElementById('myText'),
myCheckField = document.getElementsByName('choice');

function notEmpty(){
	if(myTextField.value != ""){ // text field not empty
		for(var i = 0; i < myCheckField.length; ++i){
			if(myCheckField[i].checked){ // a radio was checked
				return true; // function ends, form submits
			}
		}
		alert('Please select a checkbox.'); // if we get to here the text field wasn't empty but no radio was checked
		return false; // function ends, form doesn't submit
	} else { // text field is empty
		return false; // nothing happens and form does not submit
	}
}
</script>
</body>
</html>

**keyboard** · 08-10-2011, 10:05 PM

Thanks jscheuer1!

Thread: Get element by name error

Thread Tools

Search Thread

Get element by name error

Bookmarks

Bookmarks

Posting Permissions