Divs within a form (referencing in Javascript)
in [JavaScript]
|
Prev: FAQ Topic - How do I generate a random integer from 1 to N? (2008-05-07)
Next: Unknown runtime error
From: Ronald Raygun on 6 May 2008 12:45 I am using divs to contain each of the control elements on a form, so that I can control the display via CSS. I am trying to loop through divs to locate particular divs, but I am not getting much luck in locating the divs. Here is an example of the form: <form id = "wizard" action="http://somesite.com/prog/adduser" method="post"> <div ID="page1" style="{display:block}"> <label for="firstname">First name: </label> <input type="text" id="firstname"><BR> <label for="lastname">Last name: </label> <input type="text" id="lastname"><BR> <label for="email">email: </label> <input type="text" id="email"><BR> <input type="radio" name="sex" value="Male"> Male<BR> <input type="radio" name="sex" value="Female"> Female<BR> </div> <div id="page2" style="{display:none;}"> <label for="address1">Address Line1: </label> <input type="text" id="address1"><BR> <label for="address2">Address Line2: </label> <input type="text" id="address2"><BR> </div> <div id="buttonArea"><a href="#" onclick="prevPage()">Previous</a><a href="#" onclick="nextPage()">Next</a></div> </form> prevPage() and nextPage() are simple functions that modify a static variable, that determines the page number. if the page number is determined to be 2, then I want to change the style of div with id="page2" to "block", and the style of all of the other divs in the form, none (so they are not displayed). This is the JS I have got so far: <script type="text/javascript"> function unhideDiv(index) { //the following don't work - whats the soln? //var temp = document.forms[0].elements; //var temp = document.getElementsByTagName(\'div\'); } function prevPage() { if (m_count > 1) unhideDiv(--m_count); } function nextPage() { if (m_count < 2) unhideDiv(++m_count); } m_count = 1; </script> </HEAD>
From: david.karr on 6 May 2008 13:01 On May 6, 9:45 am, Ronald Raygun <inva...(a)domain.com> wrote: > I am using divs to contain each of the control elements on a form, so > that I can control the display via CSS. I am trying to loop through divs > to locate particular divs, but I am not getting much luck in locating > the divs. > > Here is an example of the form: > > <form id = "wizard" action="http://somesite.com/prog/adduser" > method="post"> > <div ID="page1" style="{display:block}"> > <label for="firstname">First name: </label> > <input type="text" id="firstname"><BR> > <label for="lastname">Last name: </label> > <input type="text" id="lastname"><BR> > <label for="email">email: </label> > <input type="text" id="email"><BR> > <input type="radio" name="sex" value="Male"> Male<BR> > <input type="radio" name="sex" value="Female"> Female<BR> > </div> > <div id="page2" style="{display:none;}"> > <label for="address1">Address Line1: </label> > <input type="text" id="address1"><BR> > <label for="address2">Address Line2: </label> > <input type="text" id="address2"><BR> > </div> > <div id="buttonArea"><a href="#" onclick="prevPage()">Previous</a><a > href="#" onclick="nextPage()">Next</a></div> > </form> > > prevPage() and nextPage() are simple functions that modify a static > variable, that determines the page number. if the page number is > determined to be 2, then I want to change the style of div with > id="page2" to "block", and the style of all of the other divs in the > form, none (so they are not displayed). > > This is the JS I have got so far: > > <script type="text/javascript"> > > function unhideDiv(index) > { > //the following don't work - whats the soln? > //var temp = document.forms[0].elements; > //var temp = document.getElementsByTagName(\'div\'); > } I don't know why you're escaping the single quotes, but I don't know if that would matter. Note that you could also use "document.getElementById()" (but I think you should probably change "ID" to "id", although that might not matter unless you're using xhtml). Finally, I think I would recommend assigning a specific CSS class to each of your divs that you want to treat this way, and then if you were using any of the popular JavaScript frameworks, you could just call the method to return all the elements with that class. You could code this yourself, but remember that elements can have more than one class. Otherwise, a quick solution like <http://www.faqts.com/ knowledge_base/view.phtml/aid/2193/fid/128> would suffice.
From: Evertjan. on 6 May 2008 13:55
Ronald Raygun wrote on 06 mei 2008 in comp.lang.javascript: > I am using divs to contain each of the control elements on a form, so > that I can control the display via CSS. I am trying to loop through > divs to locate particular divs, but I am not getting much luck in > locating the divs. > > Here is an example of the form: > > <form id = "wizard" action="http://somesite.com/prog/adduser" > method="post"> > <div ID="page1" style="{display:block}"> Wrong! inline CSS has no {} <div ID="page1" style="display:block;"> The lase ; is optional, I always use it. > <label for="firstname">First name: </label> > <input type="text" id="firstname"><BR> > <label for="lastname">Last name: </label> > <input type="text" id="lastname"><BR> > <label for="email">email: </label> > <input type="text" id="email"><BR> > <input type="radio" name="sex" value="Male"> Male<BR> > <input type="radio" name="sex" value="Female"> Female<BR> > </div> > <div id="page2" style="{display:none;}"> same > <label for="address1">Address Line1: </label> > <input type="text" id="address1"><BR> > <label for="address2">Address Line2: </label> > <input type="text" id="address2"><BR> > </div> > <div id="buttonArea"><a href="#" > onclick="prevPage()">Previous</a><a > href="#" onclick="nextPage()">Next</a></div> > </form> > > > prevPage() and nextPage() are simple functions that modify a static > variable, that determines the page number. if the page number is > determined to be 2, then I want to change the style of div with > id="page2" to "block", and the style of all of the other divs in the > form, none (so they are not displayed). > > This is the JS I have got so far: > > <script type="text/javascript"> > > function unhideDiv(index) > { > //the following don't work - whats the soln? > //var temp = document.forms[0].elements; > //var temp = document.getElementsByTagName(\'div\'); the \ \ have no sense here and will make it not working. getElementsByTagName(x) expects a string as value of x var temp = document.forms[0].elements; var temp = document.getElementsByTagName('div'); both work and give a collection, a sort of array. You do not use the local variable "index". Perhaps you want this: function unhideDiv(index) { var temp1 = document.forms[0]; var temp2 = temp1.getElementsByTagName('div'); temp2[index].style.display='block'; }; > } > > function prevPage() > { > if (m_count > 1) > unhideDiv(--m_count); > > } > function nextPage() > { > if (m_count < 2) > unhideDiv(++m_count); > } > m_count = 1; > </script> > </HEAD> > -- Evertjan. The Netherlands. (Please change the x'es to dots in my emailaddress) |