asked on

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');"> 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" />
</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.

basicinstinct

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');"> Module
                  <input type="radio" name="field[base_btype_id]" value="2" id="1" onclick="showform('frm','frm2');"> 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>

basicinstinct

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!

ims_memory

ASKER

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.

basicinstinct

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>

basicinstinct

Or do you need section one in the same form too?

ASKER CERTIFIED SOLUTION

basicinstinct

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ims_memory

ASKER

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.