Form and text fields

dkin

Hello,

I have constructed a form with 3 text fields for the input of Name, Email Address and Phone number.

How can I prevent form entering text (make it shaded or something…) to the Phone number field, if Email address has been inserted. And also how to do it in case of having the opposite situation (block the Email address field when phone is submitted)

Thanks.

cahva

I suck at javascript(you cannot do this in php), but I hope you get the idea...

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript">
function joo()
{
	if (document.form1.phone.value=='') 
	{ 
		document.form1.email.value='';
		document.form1.email.disabled=false; 
	} 
	else 
	{ 
		document.form1.email.value='Phone number entered';
		document.form1.email.disabled=true; 
	}
}

function joo2()
{
	if (document.form1.email.value=='') 
	{ 
		document.form1.phone.value='';
		document.form1.phone.disabled=false; 
	} 
	else 
	{ 
		document.form1.phone.value='Email entered';
		document.form1.phone.disabled=true; 
	}
}

function clearForm(el) {
    if (el.defaultValue==el.value) el.value = ""
    if (el.style) el.style.cssText = ""
}
</script>
</head>

<body>

<form name="form1" method="post" action="">
  <input name="name" type="text" id="name">
  <br>
  <input name="phone" type="text" id="phone" onFocus="javascript:clearForm(this)" onBlur="javascript:joo()">
  <br>
  <input name="email" type="text" id="email" onFocus="javascript:clearForm(this)" onBlur="javascript:joo2()">
</form>
</body>
</html>

dkin

Unfortunately the script does not work, but this a php forum after all, so what is the best JavaScript forum.

cahva

What you mean it doesnt work? It works in IE. Hope you joined those "java script" to "javascript" because those dont show correctly when posting here...

Anyway for javascript forum, I recommend www.devshed.com.

I found there a script for your needs. This should work a bit better. I modified it a little bit:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script>
function disable(el,lol)
{
if (document.getElementById(lol).value) {
document.getElementById(el).disabled = true;
document.getElementById(el).style.backgroundColor = 'red';
}
else {
document.getElementById(el).disabled = false;
document.getElementById(el).style.backgroundColor = '';
}
}
</script>
</head>

<body>
<form name="form1" id="form1" method="post" action="">
  <p>

<input type="text" name="myTextBox1" id="myTextBox1" onBlur="disable('myTextBox2','myTextBox1')" />
  </p>
  <p> 
    <input type="text" name="myTextBox2" id="myTextBox2" onBlur="disable('myTextBox1','myTextBox2')" />
  </p>
</form>
</body>
</html>