Help with focus on fields

[Richo1980]

Hi all,

I am trying to create a form where if a user chooses either the Yes or No radio button they are prompted to complete different fields before submitting the form...The following is the Javascript section of the code

<script type="text/javascript">

//----------------------------------------------------------------------
function popUp(URL) {
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=600,height=400');");
}
//----------------------------------------------------------------------
function insideslo()
{
	document.form1.txtJustify.disabled = false
	document.form1.txtJustify.style.backgroundColor="#FFFFFF"

	document.form1.escmgrcontact.disabled = false
	document.form1.escmgrcontact.style.backgroundColor="#FFFFFF"

	document.form1.escmgrname.disabled = false
	document.form1.escmgrname.style.backgroundColor="#FFFFFF"
}
//----------------------------------------------------------------------
function outsideslo()
{
	document.form1.txtJustify.disabled = true
	document.form1.txtJustify.style.backgroundColor="#CCCCCC"

	document.form1.escmgrcontact.disabled = true
	document.form1.escmgrcontact.style.backgroundColor="#CCCCCC"

	document.form1.escmgrname.disabled = true
	document.form1.escmgrname.style.backgroundColor="#CCCCCC"
}
//----------------------------------------------------------------------
function fnValidation(which)
{
if (document.form1.requestor.value.length==0) 
	{
	alert("Please enter your name (Firstname Lastname)")
	document.form1.requestor.focus()
	return false
	}
else if (document.form1.from.value.length==0)
	{
	alert("Please enter your email address (Firstname.Lastname@test.com)")
	document.form1.from.focus()
	return false
	}
else if (document.form1.businessarea.value.length==0)
	{
	alert("Please enter your Business Area.")
	document.form1.businessarea.focus()
	return false
	}
else if (document.form1.refnumber.value.length==0)
	{
	alert("Please provide us with a Reference Number to follow up on.")
	document.form1.refnumber.focus()
	return false
	}

else if (document.form1.xtn.value.length==0)
	{
	alert("Please enter your extension number")
	document.form1.xtn.focus()
	return false
	}
else if (document.form1.txtJustify.value.length==0)
	{
	alert("Please enter a Justification")
	document.form1.txtJustify.focus()
	return false
	}	
else if (document.form1.escmgrname.value.length==0)
	{
	alert("Please provide the Name of an Escalating Manager.")
	document.form1.escmgrname.focus()
	return false
	}

else if (document.form1.escmgrcontact.value.length==0)
	{
	alert("Please provide us with the Contact details of the Escalating Manager.")
	document.form1.escmgrcontact.focus()
	return false
	}
}
//----------------------------------------------------------------------

This code works, but now how I want it too. What should happen is when the 'Yes' radio button is selected 3 fields should be greyed out (working) however I am still promoted to enter information into fields...i.e The script still prompts me to enter information into the 'escmgrcontact' field even though it is greyed out when the 'Yes' radio button is selected..

I'm tearing my hair out trying to work this out, and believe me I don't have enough of it to keep doing

The code for the radio buttons is also included below so you can see how I call the insideslo() & outsidelo() functions (maybe this is wrong??)

<td width="33%" style="border-style: none; border-width: medium">
      <font face="Arial"><font size="2">Yes</font><input type="radio" value="Yes" name="radio" onClick="{outsideslo()}" checked><font size="2">&nbsp;&nbsp; 
      No </font>
      <input type="radio" value="No" name="radio" onClick="{insideslo()}"></font></td>
      <td width="47%" style="border-style: none; border-width: medium">

Thanks heaps

 

[j4606]

Your field validation does not look at weather the inputs are disabled or not, it will check for values reguardless of the enabled/disabled status. What you need is a way to disable/enable your validation for the fields which are disabled/enabled.

Here is an example using the validation you posted.

<html>
<head>
<script type="text/javascript">
	var txtdisabled = 1;
	function insideslo() {
    		document.form1.txtJustify.disabled = false
    		document.form1.txtJustify.style.backgroundColor="#FFFFFF"

    		document.form1.escmgrcontact.disabled = false
    		document.form1.escmgrcontact.style.backgroundColor="#FFFFFF"

    		document.form1.escmgrname.disabled = false
    		document.form1.escmgrname.style.backgroundColor="#FFFFFF"
			txtdisabled = 0;
		}

	function outsideslo() {
			document.form1.txtJustify.disabled = true
			document.form1.txtJustify.style.backgroundColor="#CCCCCC"

			document.form1.escmgrcontact.disabled = true
			document.form1.escmgrcontact.style.backgroundColor="#CCCCCC"

			document.form1.escmgrname.disabled = true
			document.form1.escmgrname.style.backgroundColor="#CCCCCC"
			txtdisabled = 1;
		}

	function fnValidation(txtdisabled) {
		if(txtdisabled == 0){
			if (document.form1.txtJustify.value.length==0) {
				alert("Please enter a Justification")
				document.form1.txtJustify.focus()
				return false
			}
			else if (document.form1.escmgrname.value.length==0) {
				alert("Please provide the Name of an Escalating Manager.")
				document.form1.escmgrname.focus()
				return false
			}
			else if (document.form1.escmgrcontact.value.length==0) {
				alert("Please provide us with the Contact details of the Escalating Manager.")
				document.form1.escmgrcontact.focus()
				return false
					}
		}

	}


</script>
</head>
<body>
<table>
	<form name="form1">
		<td><input type="text" name="txtJustify" value="">
		<td><input type="text" name="escmgrcontact" value="">
		<td><input type="text" name="escmgrname" value="">
		<td>Yes<input type="radio" value="Yes" name="radio" onClick="{outsideslo()}" checked>
		<td>No<input type="radio" value="No" name="radio" onClick="{insideslo()}"></td>
		<button onclick="fnValidation(txtdisabled);"> test </button>
	</form>
</table>
</body>

I don't know the answer but my good friend Google does.