Results 1 to 7 of 7

Thread: Get element by name error

  1. #1
    Join Date
    Mar 2011
    Posts
    1,968
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default Get element by name error

    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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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]
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2011
    Posts
    1,968
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    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?

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2011
    Posts
    1,968
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    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?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    Last edited by jscheuer1; 08-11-2011 at 12:27 AM. Reason: spelling
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Mar 2011
    Posts
    1,968
    Thanks
    59
    Thanked 105 Times in 103 Posts
    Blog Entries
    4

    Default

    Thanks jscheuer1!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •