...
PDA

Text Box Invisible Help

rahulr
01-19-2009, 07:17 AM
Hi All,
Following is a HTML code with javascript. Plz open it in a browser. I have posted it b4 for a seeking a help and my doubt was clarified well. Now I need one more help. If I select "Bachelors" from the environment field, then only i need the Degree Text Box Visible. Now with the script even though itz disabled, it is visible to others. But i need a script in which that box is visible only when i select "Bachelors", in all other cases invisible. Is that possible? It would be a gr8 help if some one can help me in this... :-)


<HTML><HEAD><TITLE>Electronic Deposting Form</TITLE>

<script language="JavaScript">
<!-- script start
function validateComplete(formObj) {
if (emptyField(formObj.username))
alert("Please enter the Username.");
else if (emptyField(formObj.passwd))
alert("Please enter the Password.");
else return true;

return false;
}
// Check to see if field is empty

function emptyField(textObj)
{
if (textObj.value.length == 0) return true;
for (var i=0; i<textObj.value.length; ++i) {
var ch = textObj.value.charAt(i);
if (ch != ' ' && ch != '\t') return false;
}
return true;
}

// script end -->
</script>
</head>


<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2900.3429" name=GENERATOR></HEAD>
<BODY>
<TABLE>
<TBODY>
<TD><FONT face=Times size=5>&nbsp;<B>Electronic Depositing
Form</B></FONT></TD></TR></TBODY></TABLE>

<FORM name="Iform" action="saveFRM.cgi" method="post" onSubmit="return validateComplete(document.Iform)">
<TABLE cellSpacing=10 cellPadding=5>
<TBODY>
<TR>
<TD style="FONT-FAMILY: arial"><B>Username</B></TD>
<TD>:</TD>
<TD><INPUT maxLength=255 size=21 name=username>
<TD></TD>
<TR>

<TD style="FONT-FAMILY: arial"><B>Password</B></TD>
<TD>:</TD>
<TD><INPUT type=password maxLength=255 size=21 name=passwd>
<TD></TD>
<TR>
<TD style="FONT-FAMILY: arial"><B>ELIGIBILITY</B></TD>
<TD>:</TD>

<TD><SELECT size=1 name='environ' id=environment onchange='enable()'>
<OPTION value=bachelors selected>BACHELORS</OPTION>
<OPTION value=diploma>Diploma</OPTION>
<OPTION value=isd>ISD</OPTION>
<OPTION value=dataprotector>DPTP</OPTION>
</SELECT>
</TD>

</TR>
<TR>
<TD style="FONT-FAMILY: arial"><B>Degree</B></TD>
<TD>:</TD>
<TD><SELECT size=1 name='degree' id='degree'>
<OPTION value=art>Art</OPTION>
<OPTION value=science>Science</OPTION>

</SELECT>
</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;
<TD></TD>
<TR>

<TD><INPUT type=submit value=Submit v:shapes="_x0000_s1034"></TD>
<TD>&nbsp;</TD>
<TD><INPUT type=reset value=Clear v:shapes="_x0000_s1035\"></TD></TR></TBODY></TABLE></FORM></BODY></HTML>

<script>
function enable()
{
if (!(document.getElementById('environment').value=="bachelors"))
{
document.getElementById('degree').value="";
document.getElementById('degree').disabled=true;
}
else
{
document.getElementById('degree').disabled=false;
}
}
</script>
abduraooft
01-19-2009, 07:22 AM
Validate your markup (http://validator.w3.org/#validate_by_input) and fix the errors first (which includes adding a valid DOCTYPE (http://www.alistapart.com/stories/doctype/)).

PS: please use ][/COLOR] tags to wrap your code while posting here.
rahulr
01-19-2009, 07:39 AM
<CODE>

<HTML><HEAD><TITLE>Electronic Depositing Form</TITLE>

<script language="JavaScript">
<!-- script start
function validateComplete(formObj) {
if (emptyField(formObj.username))
alert("Please enter the Username.");
else if (emptyField(formObj.passwd))
alert("Please enter the Password.");
else return true;

return false;
}
// Check to see if field is empty

function emptyField(textObj)
{
if (textObj.value.length == 0) return true;
for (var i=0; i<textObj.value.length; ++i) {
var ch = textObj.value.charAt(i);
if (ch != ' ' && ch != '\t') return false;
}
return true;
}

// script end -->
</script>
</head>


<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2900.3429" name=GENERATOR></HEAD>
<BODY>
<TABLE>
<TBODY>
<TD><FONT face=Times size=5>&nbsp;<B>Electronic Depositing
Form</B></FONT></TD></TR></TBODY></TABLE>

<FORM name="Iform" action="saveFRM.cgi" method="post" onSubmit="return validateComplete(document.Iform)">
<TABLE cellSpacing=10 cellPadding=5>
<TBODY>
<TR>
<TD style="FONT-FAMILY: arial"><B>Username</B></TD>
<TD>:</TD>
<TD><INPUT maxLength=255 size=21 name=username>
<TD></TD>
<TR>

<TD style="FONT-FAMILY: arial"><B>Password</B></TD>
<TD>:</TD>
<TD><INPUT type=password maxLength=255 size=21 name=passwd>
<TD></TD>
<TR>
<TD style="FONT-FAMILY: arial"><B>ELIGIBILITY</B></TD>
<TD>:</TD>

<TD><SELECT size=1 name='environ' id=environment onchange='enable()'>
<OPTION value=bachelors selected>BACHELORS</OPTION>
<OPTION value=diploma>Diploma</OPTION>
<OPTION value=isd>ISD</OPTION>
<OPTION value=dataprotector>DPTP</OPTION>
</SELECT>
</TD>

</TR>
<TR>
<TD style="FONT-FAMILY: arial"><B>Degree</B></TD>
<TD>:</TD>
<TD><SELECT size=1 name='degree' id='degree'>
<OPTION value=art>Art</OPTION>
<OPTION value=science>Science</OPTION>

</SELECT>
</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;
<TD></TD>
<TR>

<TD><INPUT type=submit value=Submit v:shapes="_x0000_s1034"></TD>
<TD>&nbsp;</TD>
<TD><INPUT type=reset value=Clear v:shapes="_x0000_s1035\"></TD></TR></TBODY></TABLE></FORM></BODY></HTML>

<script>
function enable()
{
if (!(document.getElementById('environment').value=="bachelors"))
{
document.getElementById('degree').value="";
document.getElementById('degree').disabled=true;
}
else
{
document.getElementById('degree').disabled=false;
}
}
</script>

</code>
rahulr
01-19-2009, 07:42 AM
<CODE>

<HTML><HEAD><TITLE>Electronic Depositing Form</TITLE>

<script language="JavaScript">
<!-- script start
function validateComplete(formObj) {
if (emptyField(formObj.username))
alert("Please enter the Username.");
else if (emptyField(formObj.passwd))
alert("Please enter the Password.");
else return true;

return false;
}
// Check to see if field is empty

function emptyField(textObj)
{
if (textObj.value.length == 0) return true;
for (var i=0; i<textObj.value.length; ++i) {
var ch = textObj.value.charAt(i);
if (ch != ' ' && ch != '\t') return false;
}
return true;
}

// script end -->
</script>
</head>


<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<META content="MSHTML 6.00.2900.3429" name=GENERATOR></HEAD>
<BODY>
<TABLE>
<TBODY>
<TD><FONT face=Times size=5>&nbsp;<B>Electronic Depositing
Form</B></FONT></TD></TR></TBODY></TABLE>

<FORM name="Iform" action="saveFRM.cgi" method="post" onSubmit="return validateComplete(document.Iform)">
<TABLE cellSpacing=10 cellPadding=5>
<TBODY>
<TR>
<TD style="FONT-FAMILY: arial"><B>Username</B></TD>
<TD>:</TD>
<TD><INPUT maxLength=255 size=21 name=username>
<TD></TD>
<TR>

<TD style="FONT-FAMILY: arial"><B>Password</B></TD>
<TD>:</TD>
<TD><INPUT type=password maxLength=255 size=21 name=passwd>
<TD></TD>
<TR>
<TD style="FONT-FAMILY: arial"><B>ELIGIBILITY</B></TD>
<TD>:</TD>

<TD><SELECT size=1 name='environ' id=environment onchange='enable()'>
<OPTION value=bachelors selected>BACHELORS</OPTION>
<OPTION value=diploma>Diploma</OPTION>
<OPTION value=isd>ISD</OPTION>
<OPTION value=dataprotector>DPTP</OPTION>
</SELECT>
</TD>

</TR>
<TR>
<TD style="FONT-FAMILY: arial"><B>Degree</B></TD>
<TD>:</TD>
<TD><SELECT size=1 name='degree' id='degree'>
<OPTION value=art>Art</OPTION>
<OPTION value=science>Science</OPTION>

</SELECT>
</TD>
</TR>
<TR>
<TD>&nbsp;</TD>
<TD>&nbsp;</TD>
<TD>&nbsp;
<TD></TD>
<TR>

<TD><INPUT type=submit value=Submit v:shapes="_x0000_s1034"></TD>
<TD>&nbsp;</TD>
<TD><INPUT type=reset value=Clear v:shapes="_x0000_s1035\"></TD></TR></TBODY></TABLE></FORM></BODY></HTML>

<script>
function enable()
{
if (!(document.getElementById('environment').value=="bachelors"))
{
document.getElementById('degree').value="";
document.getElementById('degree').disabled=true;
}
else
{
document.getElementById('degree').disabled=false;
}
}
</script>

</code>

Is this the right format??
Philip M
01-19-2009, 07:43 AM
Validate your markup (http://validator.w3.org/#validate_by_input) and fix the errors first (which includes adding a valid DOCTYPE (http://www.alistapart.com/stories/doctype/)).

PS: please use ][/COLOR] tags to wrap your code while posting here.

Seconded!


Because your code uses deprecated TABLES rather than CSS it does not lend itself to this, but I have cobbled it up for you:-

<TR>
<TD id = "Deg" style="FONT-FAMILY: arial"><B>Degree</B></TD>
<TD id = "Deg1" >:</TD>
<TD><SELECT size=1 name='degree' id='degree'>
<OPTION value=art>Art</OPTION>
<OPTION value=science>Science</OPTION>
</SELECT>
</TR>

............

<script>
function enable()
{
if (!(document.getElementById('environment').value=="bachelors"))
{
document.getElementById('degree').value="";
document.getElementById('degree').disabled=true;
document.getElementById('degree').style.visibility = "hidden";
document.getElementById('Deg').style.visibility = "hidden";
document.getElementById('Deg1').style.visibility = "hidden";

}
else
{
document.getElementById('degree').disabled=false;
document.getElementById('degree').style.visibility = "visible";
document.getElementById('Deg').style.visibility = "visible";
document.getElementById('Deg1').style.visibility = "visible";

}
}
</script>

This is old code, as evidenced by <script language="JavaScript"> which is deprecated. Use <script type = "text/javascript"> instead. But to be candid the whole thing lacks fragrance and needs re-writing to bring it up to modern standards.

You create the <code> tags using the hash or octothorpe symbol on the toolbar. The code tags are and in capitals and within square brackets where the X is replaced by O. Obviously if I used CODE it would place code tags around this text.

Might I respectfully mention that it is not considered good practice to use textspeak (gr8, b4 and itz) in this forum. There is no need to save a couple of keystrokes here.


Quizmaster: Who was the Norwegian Explorer who first reached the South Pole?
Contestant: Sherpa Tenzing
rahulr
01-19-2009, 07:55 AM
Oh This is superb.. Im Loving It :-) Thanks a lllloooottttt... :thumbsup::thumbsup::thumbsup:

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum