form validation problem with divs within form

[spastica]

i have a form with a set of divs contained within it. these divs contain form fields. the contents of the divs change according to options the user selects on the form.

So, for example, if a user selects "other" in a dropdown menu, a div inside the form will be populated with a textbox for the user type into.

i am having problems in netscape and firefox validating the form fields contained in the divs. whenever i reference the form fields or even the divs, the script throws an error saying the form fields/divs referenced have no properties. the validation script works fine when i take the fields out of the divs.

I know there is an issue with netscape where you can't have more than 1 div in a form because it reads each one as seperate? if so, how can i modify my code to make sure it works with netscape?

here is a snippet of the validation script

if (document.mtgapp.natureOfMtg[1].checked)
{
if(form.refiPurpose.value=="")
{
alert("Please specify the purpose for refinance");
form.refiPurpose.focus();
return false;
}

// REFINANCE - 'OTHER' BOX
if(document.mtgapp.refiPurpose.value=="Other")

{
if(document.mtgapp.refiPurpose_Other.value=="")

{
alert("Please specify");
form.refiPurpose_Other.focus();
return false;
}

}
}


and here is the div :

<div id="refiPricePurch" class="mainbodytext">

&nbsp;
</div>

here is the function that populates the div:

<script language="JavaScript">

// FUNCTION TO SHOW REFINANCE:OTHER (PLEASE SPECIFY) BOX IF "OTHER" OPTION IS SELECTED UNDER REFINANCE - PURPOSE
<!--
function showRefiOtherbox(formData)
{

if(formData=="Other")
{
document.getElementById('refiPurpose_OtherBox').innerHTML = "Please specify: <input maxlength=\"60\" size=\"15\" type=\"text\" name=\"refiPurpose_Other\" value=\"\">";
}
else
{
document.getElementById('refiPurpose_OtherBox').innerHTML = "";
}

}
// -->
</script>

 

[theboyhope]

That post's pretty hard to get through and understand. You're trying to set the innerHTML of a DIV called 'refiPurpose_OtherBox' but you already said the DIV is called 'refiPricePurch' ... ?

Have a look into using the syntax document.forms[formName].elements[elementName] btw.

 

[theboyhope]

That post's pretty hard to get through and understand. You're trying to set the innerHTML of a DIV called 'refiPurpose_OtherBox' but you already said the DIV is called 'refiPricePurch' ... ?

Have a look into using the syntax document.forms[formName].elements[elementName] btw.

 

[theboyhope]

*echo*

 

[cLFlaVA]

I certainly wouldn't be setting the innerHTML property of the div.

Instead, I would create a div that looked like this:

<div id="other" style="display: none;">
Please specify:
<input maxlength="60" size="15" type="text" name="refiPurpose_Other" value="" />
</div>

And then, I'd show/hide it based on the value of the drop-down box.

function showRefiOtherbox(formData) {
    var d = document.getElementsById('other');
    d.style.display = (d.style.display == '') ? 'none' : '';
}

Hope this helps.

*cLFlaVA
----------------------------
Lois: "Peter, you're drunk!"
Peter: "I'm not drunk, I'm just exhausted from stayin' up all night drinking!