Hiding table using JavascriptHI,
I have two tables which will be available in the Page.
I want to hide one table and show the other according to a condition.
Which ever table i am displaying should be displayed at the top
could you please help me
here is my code
<html>
<head>
<script language="javascript">
function show()
{
if (contact.r1.checked)
{
det1.style.visibility = "visible";
det2.style.visibility = "hidden";
}
if (contact.r2.checked)
{
det1.style.visibility = "hidden";
det2.style.visibility = "visible";
}
}
function check()
{
usr=contact.username.value;
a1=contact.add1.value;
a2=contact.add2.value;
a3=contact.add3.value;
cty=contact.city.value;
stat=contact.state.value;
ph=contact.phone.value;
mob=contact.mobile.value;
mail=contact.email.value;
if (usr.length == 0)
{
alert("New Username Field is Empty");
contact.username.focus();
return false;
}
if (a1.length == 0)
{
alert("First Address Field is Empty");
contact.add1.focus();
return false;
}
if (a2.length == 0)
{
alert("Second Address Field is Empty");
contact.add2.focus();
return false;
}
if (a3.length == 0)
{
alert("Third Address Field is Empty");
contact.add3.focus();
return false;
}
if (cty.length == 0)
{
alert("Enter your city");
contact.city.focus();
return false;
}
if (stat.length == 0)
{
alert("Enter your state");
contact.state.focus();
return false;
}
if (ph.length == 0)
{
alert("Enter your phone number");
contact.phone.focus();
return false;
}
if (mob.length == 0)
{
alert("Enter your mobile number");
contact.mobile.focus();
return false;
}
if (mail.length == 0)
{
alert("Specify your mail id");
contact.email.focus();
return false;
}
}
function check1()
{
user=contact.uname.value;
company=contact.cname.value;
a1=contact.address1.value;
a2=contact.address2.value;
a3=contact.address3.value;
cty=contact.city1.value;
stat=contact.state1.value;
ph=contact.phone1.value;
mob=contact.mobile1.value;
mail=contact.email1.value;
if (user.length == 0)
{
alert(" Username Field is Empty");
contact.uname.focus();
return false;
}
if (company.length == 0)
{
alert(" Companyname Field is Empty");
contact.cname.focus();
return false;
}
if (ad1.length == 0)
{
alert("First Address Field is Empty");
contact.address1.focus();
return false;
}
if (ad2.length == 0)
{
alert("Second Address Field is Empty");
contact.address2.focus();
return false;
}
if (ad3.length == 0)
{
alert("Third Address Field is Empty");
contact.address3.focus();
return false;
}
if (cty1.length == 0)
{
alert("Enter your city");
contact.city1.focus();
return false;
}
if (stat1.length == 0)
{
alert("Enter your state");
contact.state1.focus();
return false;
}
if (ph1.length == 0)
{
alert("Enter your phone number");
contact.phone1.focus();
return false;
}
if (mob1.length == 0)
{
alert("Enter your mobile number");
contact.mobile1.focus();
return false;
}
if (mail1.length == 0)
{
alert("Specify your mail id");
contact.email1.focus();
return false;
}
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>New Page 1</title>
</head>
<body>
<form name=contact method=post action=contact567.asp>
<p>
<center>
<input type=radio id=r1 value=y name=radio1 onclick=show()><font size="3"><font face="Century Gothic" color="#0000FF">Personal </font><font color="#FF0000"><font face="Century Gothic"> </font> </font>
<input type=radio id=r2 value=n name=radio1 onclick=show()><font color="#0000FF"><font face="Century Gothic">Business
</font></font><br></font><br>
<table id=det1 border=0 style='visibility: hidden; position: Relative; top: 10' width="714" height="699">
<tr>
<td width="313" height="71">
<p align="center"><font color="#800000"><b> Contact Information</b></font></p>
</td>
</tr>
<tr>
<td width="313" height="25"><p> <font color="#800000">
Scheme
</font></td>
<td width="389" height="25">
<p> </p>
<p><select size="1" name="scheme">
<option selected="selected" value="0">Select</option>
<option value="Scheme Orange">Scheme Orange</option>
<option value="Scheme Yellow">Scheme Yellow</option>
</select></p>
<p> </p>
</td>
</tr>
<tr><td width="313" height="25"><p> <font color="#800000">
Name
</font></td>
<td width="389" height="25">
<input type="text" name="username" size="25"></font>
</td>
</tr>
<tr><td width="313" height="81"><p> <font color="#800000">
Address1 </font></td>
<td width="389" height="81">
<textarea rows="3" name="add1" cols="20"></textarea>
</td>
</tr>
<tr><td width="313" height="81"><p> <font color="#800000">
Address2 </font></td>
<td width="389" height="81">
<textarea rows="3" name="add2" cols="20"></textarea>
</td>
</tr>
<tr><td width="313" height="90"><p> <font color="#800000">
Address3 </font></td>
<td width="389" height="90">
<textarea rows="3" name="add3" cols="20"></textarea>
</td>
</tr>
<tr><td width="313" height="59"><p> <font color="#800000">City </font></td>
<td width="389" height="59">
<input type="text" name="city" size="25"></font>
</td>
</tr>
<tr><td width="313" height="56"><p> <font color="#800000">State </font></td>
<td width="389" height="56">
<input type="text" name="state" size="25"></font>
</td>
</tr>
<tr><td width="313" height="50"><p> <font color="#800000">
Phone No </font></td>
<td width="389" height="50">
<input type="text" name="phone" size="25"></font>
</td>
</tr>
<tr><td width="313" height="42"><p> <font color="#800000">Mobile </font></td>
<td width="389" height="42">
<input type="text" name="mobile" size="25"></font>
</td>
</tr>
<tr><td width="313" height="51"> <font color="#800000"> Email</font>
<font color="#800000">Subject</font> </td>
<td width="389" height="51">
<input type="text" name="subject" size="25">
</td>
</tr>
<tr><td width="313" height="51"><p> <font color="#800000">
Email Id </td>
<td width="389" height="51">
<input type="text" name="email" size="25"></font>
</td>
</tr>
<tr><td width="313" height="49">
<p align="center"><input type=submit onclick="return check()" name=submit value=submit></p>
</td>
<td width="389" height="49">
<p align="center">
<input type=reset name=reset value=reset>
</p>
</td>
</tr>
</table>
<table id=det2 border=0 style='visibility: hidden; position: Relative; top: 10' width="714" height="724">
<tr>
<td width="363" height="71">
<p align="center"><font color="#800000"><b>Contact Information</b></font></p>
<p> </p>
</td>
</tr>
<tr><td width="363" height="25"><p> <font color="#800000">
Scheme
</font></td>
<td width="339" height="25">
<p> </p>
<p><select size="1" name="scheme1">
<option selected="selected" value="0">Select</option>
<option value="Scheme Orange">Scheme Orange</option>
<option value="Scheme Yellow">Scheme Yellow</option>
</select></p>
<p> </p>
</td>
</tr>
<tr><td width="363" height="44"><p> <font color="#800000">
Name
</font></td>
<td width="339" height="44">
<input type="text" name="uname" size="25"></font>
</td>
</tr>
<tr>
<td width="363" height="44"><p> <font color="#800000">Name of the
Company
</font></td>
<td width="339" height="44">
<input type="text" name="cname" size="25"></font>
</td>
</tr>
<tr><td width="363" height="81"><p> <font color="#800000">
Address1 </font></td>
<td width="339" height="81">
<textarea rows="3" name="address1" cols="20"></textarea>
</td>
</tr>
<tr><td width="363" height="81"><p> <font color="#800000">
Address2 </font></td>
<td width="339" height="81">
<textarea rows="3" name="address2" cols="20"></textarea>
</td>
</tr>
<tr><td width="363" height="101"><p> <font color="#800000">
Address3 </font></td>
<td width="339" height="101">
<textarea rows="3" name="address3" cols="20"></textarea>
</td>
</tr>
<tr><td width="363" height="51"><p> <font color="#800000">City </font></td>
<td width="339" height="51">
<input type="text" name="city1" size="25">
</td>
</tr>
<tr><td width="363" height="37"><p> <font color="#800000">State </font></td>
<td width="339" height="37">
<input type="text" name="state1" size="25"></font>
</td>
</tr>
<tr><td width="363" height="46"><p> <font color="#800000">
Phone No </font></td>
<td width="339" height="46">
<input type="text" name="phone1" size="25"></font>
</td>
</tr>
<tr><td width="363" height="53"><p> <font color="#800000">Mobile </font></td>
<td width="339" height="53">
<input type="text" name="mobile1" size="25"></font>
</td>
</tr>
<tr>
<td width="363" height="51"> <font color="#800000">Email</font>
<font color="#800000">Subject</font> </td>
<td width="339" height="51">
<input type="text" name="subject" size="25">
</td>
</tr>
<tr><td width="363" height="43"><p> <font color="#800000">
Email Id </td>
<td width="339" height="43">
<input type="text" name="email1" size="25"></font>
</td>
</tr>
<tr><td width="363" height="53">
<p align="center"><input type=submit onclick="return check1()" name=submit value=submit></p>
</td>
<td width="339" height="53">
<p align="center">
<input type=reset name=reset value=reset>
</p>
</td>
</tr>
</table>
</form>
</body>
sriram
April 5,