Using javascript to reset sections of html form.

I have one html form, with three sections; section 1 is static, however, depending on the option selected in this section, it will show section 2 or section 3 of the form. I have implemented a function that will show the section chosen, however, the problem is that the data for section 2 & 3 is not reset if a user decides to change the option in section 1 after completing details in section 2 & 3 of the form.

Here is the code:

Option that dsiplays section 2 or 3 of form:

<tr>
<td width="100">
Base Type:
</td>
<td colspan="2">
<input type="radio" name="field[base_btype_id]" id="0" value="1" onclick="showform('module','flash');">&nbsp;Module
&nbsp;&nbsp;&nbsp;
<input type="radio" name="field[base_btype_id]" value="2" id="1" onclick="showform('module','flash');">&nbsp;Flash
<input name="name[base_btype_id]" type="hidden" value="Base Type" />
</td>
</tr>

---------------------------------------------------------

how sections 2 & 3 are distinguished:

<tbody id="module" style="display:none">
  // SECTION 2 FORM CONTENTS
</tbody>

<tbody id="flash" style="display:none">
  // SECTION 3 FORM CONTENTS
</tbody>

---------------------------------------------------------

The showform function:

function showform(FORM1,FORM2){
if(document.getElementById(0).checked){
     document.getElementById(FORM1).style.display="";
     document.getElementById(FORM2).style.display="none";
}
if(document.getElementById(1).checked){
     document.getElementById(FORM1).style.display="none";
     document.getElementById(FORM2).style.display="";
}
}


---------------------------------------------------------

For the option fields, I tried adding "this.reset();" to the onChange attribute for each radio and it did reset the entire form, however the check wouldn't stay selected. However, if I added "this.checked();" also, it did stay selected, however the showform function stopped working so the sections would not appear.

Any help would be greatly appreciated.
ims_memoryAsked:
Who is Participating?
 
basicinstinctConnect With a Mentor Commented:
If so, then how about this:

<html>
     <head>
     <script>
          function showform(div1,div2){
              var divOne = document.getElementById(div1);
              var divTwo = document.getElementById(div2);
            var radioZero = document.getElementById(0);
            divOne.style.display = (radioZero.checked) ? "" : "none";
            divTwo.style.display = (radioZero.checked) ? "none" : "";
            clearForm(divOne.parentNode);
          }
        function clearForm(theForm)
        {
              var kids = theForm.childNodes;
            for(var i=0; i < kids.length; i++)
            {
                  if(kids[i].type == "text")
                  {
                        kids[i].value="";
                  }
                  else if(kids[i].type == "checkbox")
                  {
                        kids[i].checked = false;
                  }
                  else
                  {
                        clearForm(kids[i]);
                  }
            }
        }
     </script>
     </head>
     <body>
          <form id="frm0">         
             <input type="radio" name="field[base_btype_id]" id="0" value="1" onclick="showform('module','flash');"> Module
             <input type="radio" name="field[base_btype_id]" value="2" id="1" onclick="showform('module','flash');">Flash
             <input name="name[base_btype_id]" type="hidden" value="Base Type" />
           <div id="module" style="display:none">
               <input type="text"/>
               <input type="text"/>
           </div>
           <div id="flash"style="display:none">
               <input type="checkbox"/>
               <input type="checkbox"/>
           </div>
          </form>    
     </body>
</html>
0
 
basicinstinctCommented:
Here, I've touched up your code a bit to make it work.

<html>
      <head>
      <script>
            function showform(FORM1,FORM2){
                frm1 = document.getElementById(FORM1);
                frm2 = document.getElementById(FORM2);
                  if(document.getElementById(0).checked){
                       frm1.style.display="";
                       frm2.style.display="none";
                       frm2.reset();
                  }
                  else if(document.getElementById(1).checked){
                       frm2.style.display="";
                       frm1.style.display="none";
                       frm1.reset();
                  }
            }
      </script>
      </head>
      <body>
            <form id="frm0">
                  <input type="radio" name="field[base_btype_id]" id="0" value="1" onclick="showform('frm','frm2');">&nbsp;Module
                  <input type="radio" name="field[base_btype_id]" value="2" id="1" onclick="showform('frm','frm2');">&nbsp;Flash
                  <input name="name[base_btype_id]" type="hidden" value="Base Type" />
            </form>
            <form id="frm" style="display:none">
                  <input type="text"/>
                  <input type="text"/>
            </form>
            <form id="frm2" style="display:none">
                  <input type="checkbox"/>
                  <input type="checkbox"/>
            </form>      
      </body>
</html>
0
 
basicinstinctCommented:
What you were doing wrong...

Your function has this signature:
function showform(FORM1,FORM2){

However, you call it like this:
onclick="showform('module','flash');"

So, one would expect that 'module' and 'flash' are forms. But are they?  No, they are 'tbody' elements.  Do tbody elements have a reset method? I don't think so, which is why you couldn't reset them.

If we actually pass the ids of some real form elements into your function it will work, and we can call 'reset' on the forms.  That's what my code above does.

Your function could me more elegant, but it does the job fine.  The only improvement I really HAD to make was to change the second 'if' to an 'else if'.  They are radio buttons: if one is checked there is no need to test the other one!  
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
ims_memoryAuthor Commented:
The problem with creating an individual form for each section, is when the user submits the form for processing, it will only submit the form that input submit is in and I don't believe it is possible to nest forms. That is why the tbody element is used, so the fields are included in the one form. I don't mind if the entire form is reset if a user changes the option in section 1, the problem with having the form reset on changing the option, is that the option does not stayed checked.
0
 
basicinstinctCommented:
How about this then...

<html>
     <head>
     <script>
          function showform(div1,div2){
              var divOne = document.getElementById(div1);
              var divTwo = document.getElementById(div2);
            var radioZero = document.getElementById(0);
            divOne.style.display = (radioZero.checked) ? "" : "none";
            divTwo.style.display = (radioZero.checked) ? "none" : "";
            divOne.parentNode.reset();
          }
     </script>
     </head>
     <body>
          <form id="frm0">         
               <input type="radio" name="field[base_btype_id]" id="0" value="1" onclick="showform('module','flash');"> Module
               <input type="radio" name="field[base_btype_id]" value="2" id="1" onclick="showform('module','flash');">Flash
               <input name="name[base_btype_id]" type="hidden" value="Base Type" />
        </form>
        <form id="frm1">
           <div id="module" style="display:none">
               <input type="text"/>
               <input type="text"/>
           </div>
           <div id="flash"style="display:none">
               <input type="checkbox"/>
               <input type="checkbox"/>
           </div>
          </form>    
     </body>
</html>
0
 
basicinstinctCommented:
Or do you need section one in the same form too?
0
 
ims_memoryAuthor Commented:
Thanks basicinstinct,

Almost working completely, what would I require to clear drop down selections and text areas also?

The checkbox and textfields are working great.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.