[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 270
  • Last Modified:

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.
0
ims_memory
Asked:
ims_memory
  • 5
  • 2
1 Solution
 
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
 
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
basicinstinctCommented:
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
 
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now