PDA

View Full Version : Get element by name error



keyboard
08-09-2011, 10:43 AM
<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>


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:


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:


document.getElementsByName('choice')[0]

keyboard
08-09-2011, 10:03 PM
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:


<!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:


<!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>

<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
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:



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:


<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!