Forum Moderators: open
First i would like to thank u and ur patience for replying to messages..
Here is my problem sir..
I have a checkbox (named monday), 2 textboxes (from_time,to_time), 2 dropdown lists(to show am or pm for both from_time and to_time) in a row... When i check the checkbox, the textboxes n dropdown lists must become visible so that time can be entered..If the checkbox is again unchecked those 4 must become invisible.. I'm able to do it for a single textbox... So i need to know how to achieve the same for a row...
I'm a beginner... I don't have any idea as how to accomplish this.. So please help me sir.. Its bit urgent...
When you say you can get it to work for one of the text boxes, sounds like you at least grasp the general idea. What method are you using?
Maybe a little code snippet of your work can help us help you. There's no point in me typing out a whole working example if it won't be easily integrated into your solution.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>test</title>
<style type="text/css">
tr {
height: 1.75em;
}
.hide {
display: none;
}
</style>
<script type="text/javascript">
window.onload = function() {
prepTexts();
}
function prepTexts() {
document.getElementById('Monday').className='hide';
}
function toggleText(objChk) {
var obj = objChk.form.elements[objChk.value];
obj.className = (obj.className == 'hide') ? '' : 'hide' ;
}
</script>
</head>
<body>
<form action="form1" method="post">
<table border="0">
<tr>
<td><input type="checkbox" name="chkMonday" value="Monday" onclick="toggleText(this);" />
</td>
<td>Monday</td>
<td>From</td>
<td><input type="text" name="Monday" id="Monday" value="" size="22" /></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" value="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<form name="form1" method="post" action="">
<table width="798" height="50" border="0" cellpadding="4" cellspacing="0">
<tr>
<td width="147"><input type="checkbox" name="checkbox" value="checkbox">
Monday</td>
<td width="68">From</td>
<td width="145"><input type="text" name="textfield"></td>
<td width="53"><select name="select">
<option>AM</option>
<option>PM</option>
</select></td>
<td width="17">To</td>
<td width="152"><input type="text" name="textfield2"></td>
<td width="160"><select name="select2">
<option>AM</option>
<option>PM</option>
</select></td>
</tr>
</table>
</form>
</body>
</html>
My first suggestion would be to drop the use of the table and use DIV's instead. That will certainly make things a little easier.
You will then be able to group all the form elements together and then simply show/hide the container (DIV).
Here's a quick & dirty example;
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="Keywords" content="">
<meta name="Description" content=""><style type="text/css">
.left{ float:left; }
.days{ margin-right:20px; }
</style><script type="text/javascript">
window.onload = function() {
prepTexts();
}function prepTexts() {
document.getElementById('mondayDiv').style.display = 'none';
}function showHide(theObj){
if(document.getElementById(theObj).style.display == 'none'){
document.getElementById(theObj).style.display = 'block';
}else{
document.getElementById(theObj).style.display = 'none';
}
}
</script></head>
<body><form name="form1" method="post" action="">
<div class="left days">
<input type="checkbox" name="checkbox" value="checkbox" onclick="showHide('mondayDiv')"> Monday
</div><div class="left" id="mondayDiv">
From <input type="text" name="textfield">
<select name="select">
<option>AM</option>
<option>PM</option>
</select><input type="text" name="textfield2">
<select name="select2">
<option>AM</option>
<option>PM</option>
</select>
</div></form>
</body>
</html>
Hope that helps, let me know if you have any questions.
[edited by: Trace at 8:30 pm (utc) on Jan. 12, 2009]
instead of;
document.getElementById(theObj).style.display == 'none'
Something I overlooked when looking at your example.
