Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Looping through Form Elements?

    Hi there

    I have a form with elements named (& id) 1 through 5
    Why can't I loop through all my form elements like this...

    Code:
    function toggle(){
    	for (var i=1;i<=5;i++)
    	{
    		var y = document.getElementById(i);
    		y.style.backgroundColor = '#FFFFFF';		
    
    	}
    }
    The error I get is y is null???
    If I hard code the id's like this...
    var y = document.getElementById('2');
    it works fine??

    Please Help

    NEWB

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    var y = document.getElementById(i);
    Validate your markup first. You can't have the value of an id that starts with a number.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,925
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Form names and ids may not start with a digit.

    Try this:-


    Code:
    <form name = "myform">
    <input name="Field1" type="text" /><br>
    <input name="Field2" type="text" /><br>
    <input name="Field3" type="text" /><br>
    <input name="Field4" type="text" /><br>
    <input name="Field5" type="text" /><br>
    <input type = button value = "Change Background Color" onclick = "chk()">
    </form>
    
    <script type = "text/javascript">
    function chk() {
    for(var i=1; i<=5; i++){
    document["myform"]["Field" + i].style.backgroundColor = '#FF0000';		
    }
    }
    </script>
    or if you want to use ids:-

    Code:
    <script type = "text/javascript">
    function chk() {
    for(var i=1; i<=5; i++){
    document.getElementById("Field" + i).style.backgroundColor = '#FF0000';		
    }
    }
    </script>

    Quote Originally Posted by altergothen View Post
    The error I get is y is null???
    If I hard code the id's like this...
    var y = document.getElementById('2');
    it works fine??
    Yes it does, because '2' is a string value, not a number. But very srongly advised to avoid.

    Nothing's black or white in our country - you're either brilliant or you're hopeless. - Commentator, Radio 5 Live
    Last edited by Philip M; 12-13-2010 at 04:22 PM.

  • #4
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,922
    Thanks
    15
    Thanked 229 Times in 229 Posts
    That's because when you hard code it 2 is a string and not a number. Better to not use numbers as IDs or names, try this:
    Code:
    function toggle(){
    	for (var i=1;i<=5;i++)
    	{
    		var y = document.getElementById("form_item"+i);
    		y.style.backgroundColor = '#FFFFFF';		
    
    	}
    }
    where the names and IDs are form_item1, etc., of course you can use any text string you want.

  • #5
    New to the CF scene
    Join Date
    Dec 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Thanks Guys

    Thanks Guys!!!
    you have been a great help ;-)


  •  

    Posting Permissions

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