OK, here is my issue maybe someone has already overcome this one. I am creating a form with multiple pages however, I have 3 sets of field I need to hide on the same page, so I have "Vehicle#2" "Vehicle#3" and "Vehicle#4". My issue is that Vehicle#4 is the only one hiding, and the other two will not open, they are not staying displayed they just will not display upon command. I will post my script here!
Any help will be greatly appreciated!
Vehicle #2
<script type="text/javascript">
function displayField(field)
{
if(document.getElementById('d2hide0').checked)
document.getElementById('helement2').style.display="";
else {
document.getElementById('helement2').style.display="none";
document.getElementById('component3').setAttribute("class", "formNoError");
}
}
function validateFields()
{
if(document.getElementById('d2hide13').checked && document.getElementById('vehicle2').value == '')
{
document.getElementById('component3').setAttribute("class","formError");
return false;
}
else
return true;
}
</script>
{error}
<tr>
<td>{d2hide:caption}</td>
<td>{d2hide:body}<div class="formClr"></div>{d2hide:validation}</td>
<td>{d2hide:description}</td>
</tr>
<table id="helement2">
<tr>
<td>{vehicle2:caption}</td>
<td>{vehicle2:body}<div class="Clr"></div>{vehicle2:validation}</td>
<td>{vehicle2:description}</td>
</tr>
<td>{d2year:caption}</td>
<td>{d2year:body}<div class="Clr"></div>{d2year:validation}</td>
<td>{d2year:description}</td>
</tr>
<tr>
<td>{d2make:caption}</td>
<td>{d2make:body}<div class="formClr"></div>{d2make:validation}</td>
<td>{d2make:description}</td>
</tr>
<tr>
<td>{d2vin:caption}</td>
<td>{d2vin:body}<div class="formClr"></div>{d2vin:validation}</td>
<td>{d2vin:description}</td>
</tr>
<tr>
<td>{d2doors:caption}</td>
<td>{d2doors:body}<div class="formClr"></div>{d2doors:validation}</td>
<td>{d2doors:description}</td>
</tr>
<tr>
<td>{d2truck:caption}</td>
<td>{d2truck:body}<div class="formClr"></div>{d2truck:validation}</td>
<td>{d2truck:description}</td>
</tr>
<tr>
<td>{d2drive:caption}</td>
<td>{d2drive:body}<div class="formClr"></div>{d2drive:validation}</td>
<td>{d2drive:description}</td>
</tr>
<tr>
<td>{d2cab:caption}</td>
<td>{d2cab:body}<div class="formClr"></div>{d2cab:validation}</td>
<td>{d2cab:description}</td>
</tr>
<tr>
<td>{d2liability:caption}</td>
<td>{d2liability:body}<div class="formClr"></div>{d2liability:validation}</td>
<td>{d2liability:description}</td>
</tr>
<tr>
<td>{d2full:caption}</td>
<td>{d2full:body}<div class="formClr"></div>{d2full:validation}</td>
<td>{d2full:description}</td>
</tr>
<tr>
<td>{d2lease:caption}</td>
<td>{d2lease:body}<div class="formClr"></div>{d2lease:validation}</td>
<td>{d2lease:description}</td>
</tr>
<tr>
<td>{d2lien:caption}</td>
<td>{d2lien:body}<div class="formClr"></div>{d2lien:validation}</td>
<td>{d2lien:description}</td>
</tr>
<tr>
<td>{d2miles:caption}</td>
<td>{d2miles:body}<div class="formClr"></div>{d2miles:validation}</td>
<td>{d2miles:description}</td>
</tr>
</table>
<script type="text/javascript">
displayField();
</script>
Vehicle#3
<script type="text/javascript">
function displayField(field)
{
if(document.getElementById('d3hide0').checked)
document.getElementById('helement3').style.display="";
else {
document.getElementById('helement3').style.display="none";
document.getElementById('component3').setAttribute("class", "formNoError");
}
}
function validateFields()
{
if(document.getElementById('d3hide13').checked && document.getElementById('vehicle3').value == '')
{
document.getElementById('component3').setAttribute("class","formError");
return false;
}
else
return true;
}
</script>
{error}
<tr>
<td>{d3hide:caption}</td>
<td>{d3hide:body}<div class="formClr"></div>{d3hide:validation}</td>
<td>{d3hide:description}</td>
</tr>
<table id="helement3">
<tr>
<td>{vehicle3:caption}</td>
<td>{vehicle3:body}<div class="Clr"></div>{vehicle3:validation}</td>
<td>{vehicle3:description}</td>
</tr>
<td>{d3year:caption}</td>
<td>{d3year:body}<div class="Clr"></div>{d3year:validation}</td>
<td>{d3year:description}</td>
</tr>
<tr>
<td>{d3make:caption}</td>
<td>{d3make:body}<div class="formClr"></div>{d3make:validation}</td>
<td>{d3make:description}</td>
</tr>
<tr>
<td>{d3vin:caption}</td>
<td>{d3vin:body}<div class="formClr"></div>{d3vin:validation}</td>
<td>{d3vin:description}</td>
</tr>
<tr>
<td>{d3doors:caption}</td>
<td>{d3doors:body}<div class="formClr"></div>{d3doors:validation}</td>
<td>{d3doors:description}</td>
</tr>
<tr>
<td>{d3truck:caption}</td>
<td>{d3truck:body}<div class="formClr"></div>{d3truck:validation}</td>
<td>{d3truck:description}</td>
</tr>
<tr>
<td>{d3drive:caption}</td>
<td>{d3drive:body}<div class="formClr"></div>{d3drive:validation}</td>
<td>{d3drive:description}</td>
</tr>
<tr>
<td>{d3cab:caption}</td>
<td>{d3cab:body}<div class="formClr"></div>{d3cab:validation}</td>
<td>{d3cab:description}</td>
</tr>
<tr>
<td>{d3liability:caption}</td>
<td>{d3liability:body}<div class="formClr"></div>{d3liability:validation}</td>
<td>{d3liability:description}</td>
</tr>
<tr>
<td>{d3full:caption}</td>
<td>{d3full:body}<div class="formClr"></div>{d3full:validation}</td>
<td>{d3full:description}</td>
</tr>
<tr>
<td>{d3lease:caption}</td>
<td>{d3lease:body}<div class="formClr"></div>{d3lease:validation}</td>
<td>{d3lease:description}</td>
</tr>
<tr>
<td>{d3lien:caption}</td>
<td>{d3lien:body}<div class="formClr"></div>{d3lien:validation}</td>
<td>{d3lien:description}</td>
</tr>
<tr>
<td>{d3miles:caption}</td>
<td>{d3miles:body}<div class="formClr"></div>{d3miles:validation}</td>
<td>{d3miles:description}</td>
</tr>
</table>
<script type="text/javascript">
displayField();
</script>
Vehicle #4
<script type="text/javascript">
function displayField(field)
{
if(document.getElementById('d4hide0').checked)
document.getElementById('helement4').style.display="";
else {
document.getElementById('helement4').style.display="none";
document.getElementById('component3').setAttribute("class", "formNoError");
}
}
function validateFields()
{
if(document.getElementById('d4hide13').checked && document.getElementById('vehicle4').value == '')
{
document.getElementById('component3').setAttribute("class","formError");
return false;
}
else
return true;
}
</script>
{error}
<tr>
<td>{d4hide:caption}</td>
<td>{d4hide:body}<div class="formClr"></div>{d4hide:validation}</td>
<td>{d4hide:description}</td>
</tr>
<table id="helement4">
<tr>
<td>{vehicle4:caption}</td>
<td>{vehicle4:body}<div class="Clr"></div>{vehicle4:validation}</td>
<td>{vehicle4:description}</td>
</tr>
<td>{d4year:caption}</td>
<td>{d4year:body}<div class="Clr"></div>{d4year:validation}</td>
<td>{d4year:description}</td>
</tr>
<tr>
<td>{d4make:caption}</td>
<td>{d4make:body}<div class="formClr"></div>{d4make:validation}</td>
<td>{d4make:description}</td>
</tr>
<tr>
<td>{d4vin:caption}</td>
<td>{d4vin:body}<div class="formClr"></div>{d4vin:validation}</td>
<td>{d4vin:description}</td>
</tr>
<tr>
<td>{d4doors:caption}</td>
<td>{d4doors:body}<div class="formClr"></div>{d4doors:validation}</td>
<td>{d4doors:description}</td>
</tr>
<tr>
<td>{d4truck:caption}</td>
<td>{d4truck:body}<div class="formClr"></div>{d4truck:validation}</td>
<td>{d4truck:description}</td>
</tr>
<tr>
<td>{d4drive:caption}</td>
<td>{d4drive:body}<div class="formClr"></div>{d4drive:validation}</td>
<td>{d4drive:description}</td>
</tr>
<tr>
<td>{d4cab:caption}</td>
<td>{d4cab:body}<div class="formClr"></div>{d4cab:validation}</td>
<td>{d4cab:description}</td>
</tr>
<tr>
<td>{d4liability:caption}</td>
<td>{d4liability:body}<div class="formClr"></div>{d4liability:validation}</td>
<td>{d4liability:description}</td>
</tr>
<tr>
<td>{d4full:caption}</td>
<td>{d4full:body}<div class="formClr"></div>{d4full:validation}</td>
<td>{d4full:description}</td>
</tr>
<tr>
<td>{d4lease:caption}</td>
<td>{d4lease:body}<div class="formClr"></div>{d4lease:validation}</td>
<td>{d4lease:description}</td>
</tr>
<tr>
<td>{d4lien:caption}</td>
<td>{d4lien:body}<div class="formClr"></div>{d4lien:validation}</td>
<td>{d4lien:description}</td>
</tr>
<tr>
<td>{d4miles:caption}</td>
<td>{d4miles:body}<div class="formClr"></div>{d4miles:validation}</td>
<td>{d4miles:description}</td>
</tr>
</table>
<script type="text/javascript">
displayField();
</script>