Log in

View Full Version : Disable textbox if field is empty


Manny
07-27-2006, 12:15 PM
Hi,

I have a form which allows users to input up to 5 records at a time. However, I would like them to start at the top of the form. How could I disable row2 if a textbox in row1 is not complete and row3 if the textbox in row2 is not complete etc.

A sample of my form is below.

<table>
<form name="EnterTimecard" method="POST" action="addtimecard.asp">
<tr>
<td>
<select id="dt1" name="dt1">
<option value="">Select date</option>
<option value="27/07/2006">27/07/2006</option>
<option value="26/07/2006">26/07/2006</option>
<option value="25/07/2006">25/07/2006</option>
<option value="24/07/2006">24/07/2006</option>
<option value="23/07/2006">23/07/2006</option>
</select>
</td>
<td>
<select id="tp1" name="tp1">
<option value="">Select Type.....</option>
<option value="BAU">Business as usual</option>
<option value="Project">Any project related work</option>
<option value="AL">Annual Leave</option>
<option value="SL">Sick Leave</option>
<option value="UL">Unpaid Leave</option>
<option value="EL">Education Leave</option>
<option value="Other">Other</option>
</select>
</td>
<td><input type="text" id="notes1" name="notes1" value="" size="50"></td>
<td><input type="text" id="hours1" name="hours1" value="" size="1"></td>
</tr>

<tr>
<td>
<select id="dt2" name="dt2">
<option value="">Select date</option>
<option value="27/07/2006">27/07/2006</option>
<option value="26/07/2006">26/07/2006</option>
<option value="25/07/2006">25/07/2006</option>
<option value="24/07/2006">24/07/2006</option>
<option value="23/07/2006">23/07/2006</option>
</select>
</td>
<td>
<select id="tp2" name="tp2">
<option value="">Select Type.....</option>
<option value="BAU">Business as usual</option>
<option value="Project">Any project related work</option>
<option value="AL">Annual Leave</option>
<option value="SL">Sick Leave</option>
<option value="UL">Unpaid Leave</option>
<option value="EL">Education Leave</option>
<option value="Other">Other</option>
</select>
</td>
<td><input type="text" id="notes2" name="notes2" value="" size="50"></td>
<td><input type="text" id="hours2" name="hours2" value="" size="1"></td>
</tr>

<tr>
<td>
<select id="dt3" name="dt3">
<option value="">Select date</option>
<option value="27/07/2006">27/07/2006</option>
<option value="26/07/2006">26/07/2006</option>
<option value="25/07/2006">25/07/2006</option>
<option value="24/07/2006">24/07/2006</option>
<option value="23/07/2006">23/07/2006</option>
</select>
</td>
<td>
<select id="tp3" name="tp3">
<option value="">Select Type.....</option>
<option value="BAU">Business as usual</option>
<option value="Project">Any project related work</option>
<option value="AL">Annual Leave</option>
<option value="SL">Sick Leave</option>
<option value="UL">Unpaid Leave</option>
<option value="EL">Education Leave</option>
<option value="Other">Other</option>
</select>
</td>
<td><input type="text" id="notes3" name="notes3" value="" size="50"></td>
<td><input type="text" id="hours3" name="hours3" value="" size="1"></td>
</tr>
<tr>
<td colspan="6" class="tdn" align="right"><input type="submit" value="Add Timecard Details" class="btn1">&nbsp;<input type="button" value="Reset" class="btn1" onClick="history.go()">
</td>
</tr>
</form>
</table>

Thanks in anticipation.

Regards,

Manny
Manny
07-28-2006, 12:15 AM
Just in case somebody else ever needs this:

<html>
<head>
<title>Timecard Disable Function</title>

<script language="JavaScript" type="text/javascript">

function check1(EnterTimecard) {
strhours1 = document.forms['EnterTimecard'].elements['hours1'].value;
if (strhours1 == "" || strhours1 == null || strhours1.charAt(0) == ' ')
{
document.forms['EnterTimecard'].elements['dt2'].disabled = true;
document.EnterTimecard.dt2.selectedIndex = 0;
document.EnterTimecard.dt2.options[0].selected = true;

}
else
{
document.forms['EnterTimecard'].elements['dt2'].disabled = false;
}
}


function check2(EnterTimecard) {
strhours2 = document.forms['EnterTimecard'].elements['hours2'].value;
if (strhours2 == "" || strhours2 == null || strhours2.charAt(0) == ' ')
{
document.forms['EnterTimecard'].elements['dt3'].disabled = true;
document.EnterTimecard.dt3.selectedIndex = 0;
document.EnterTimecard.dt3.options[0].selected = true;
}
else
{
document.forms['EnterTimecard'].elements['dt3'].disabled = false;
}
}


function check3(EnterTimecard) {
strhours3 = document.forms['EnterTimecard'].elements['hours3'].value;
if (strhours3 == "" || strhours3 == null || strhours3.charAt(0) == ' ')
{
document.forms['EnterTimecard'].elements['dt4'].disabled = true;
document.EnterTimecard.dt4.selectedIndex = 0;
document.EnterTimecard.dt4.options[0].selected = true;
}
else
{
document.forms['EnterTimecard'].elements['dt4'].disabled = false;
}
}


function check4(EnterTimecard) {
strhours4 = document.forms['EnterTimecard'].elements['hours4'].value;
if (strhours4 == "" || strhours4 == null || strhours4.charAt(0) == ' ')
{
document.forms['EnterTimecard'].elements['dt5'].disabled = true;
document.EnterTimecard.dt5.selectedIndex = 0;
document.EnterTimecard.dt5.options[0].selected = true;
}
else
{
document.forms['EnterTimecard'].elements['dt5'].disabled = false;
}
}

</script>
</head>

<body>
<form name="EnterTimecard" method="post" action="#" >
<input name="hours1" type="text" id="hours1" onChange="return check1(this);"><br>
<select name="dt2" size="1" class="dd" disabled="disabled">
<option value="" selected="selected">Select Subtype.....</option>
<option value="Active1">Active1</option>
</select><br>

<input name="hours2" type="text" id="hours2" onChange="return check2(this);"><br>
<select name="dt3" size="1" class="dd" disabled="disabled">
<option value="" selected="selected">Select Subtype.....</option>
<option value="Active2">Active2</option>
</select><br>

<input name="hours3" type="text" id="hours3" onChange="return check3(this);"><br>
<select name="dt4" size="1" class="dd" disabled="disabled">
<option value="" selected="selected">Select Subtype.....</option>
<option value="Active 3">Active 3</option>
</select><br>

<input name="hours4" type="text" id="hours4" onChange="return check4(this);"><br>
<select name="dt5" size="1" class="dd" disabled="disabled">
<option value="" selected="selected">Select Subtype.....</option>
<option value="Active 4">Active 3</option>
</select><br>

<input name="submit" type="submit">
</form>

</body>
</html>