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 4 of 4
  1. #1
    New Coder
    Join Date
    Aug 2006
    Posts
    66
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Trying to access all the inputs within a span

    I have a basic setup where I call on a function that shows/hides a span. The problem that I run into is I need to manipulate the values of the inputs within the span so that if they are hidden, my validator does not attempt to reject them upon validation onSubmit. And then if they are shown, I want to clear the values out so that the user can input data.

    My question is:
    is there some way to cycle through, or get an array of all of the elements from within a span - when you have the span id as an argument in a function:

    ex) function changeSpan(spanname) { function body; }

    Help is appreciated.

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    You can use a for loop in conjunction with getElementsByTagName().
    Code:
    <html>
    <head>
    <title></title>
    <script type="text/javascript">
    function setInput()
    {
    	var spans = document.getElementsByTagName('span');
    	for(var i = 0; i < spans.length; i++)
    	{
    		if(spans[i].firstChild.nodeName.toUpperCase() == 'INPUT')
    		{
    			alert(spans[i].firstChild.value);
    		}
    	}
    }
    window.onload = setInput;
    </script>
    </head>
    <body>
    <form action="#" method="post">
    <span><input type="text" value="test"></span>
    <span>blah</span>
    <span><input type="text" value="blah2"></span>
    </form>
    </body>
    </html>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #3
    New Coder
    Join Date
    Aug 2006
    Posts
    66
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Thank you, that looks like what I was looking for. Now I have a question about that line of code (don't hate me too much, I'm picking up a book on DOM this afternoon) - what exactly is this line for?
    Code:
    if(spans[i].firstChild.nodeName.toUpperCase() == ' INPUT')
    I'm not very familiar with the whole Child/Parent thing yet, because I haven't had to work too much with them. Are you just filtering out the Input fields from the other things contained in the span?

    Just trying to understand here, do you change everything toUpperCase() just in case there are mixed capitalizations of the word input in my input tags?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Every HTML element on a page has a nodeName which usually tells what type of element it is. That line there is checking to see if the first element in the span is an input element. If it is then do this, if not keep going to the next span until that statement is true. Yes I change the nodeName to uppercase because some browsers may put it as lowercase in which the line will fail. You could just as well do toLowerCase but by default Firefox uses uppercase so I use uppercase as well. If you have more elements inside of the span then the test will fail. If thats the case then you'll have to use a for loop to go through childNodes checking their nodeName.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Posting Permissions

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