...

View Full Version : enable/disable the fields



neelakantam
06-26-2009, 09:33 AM
Hi,
I am new to this site,I had a problem with my code. I had two radio buttons when i click the first radio button i want to appear one login form(username,password&submit button) and some fields like texbox, radio buttons.here the login form is only in enable state remaining fields must be in disable state. When i click on second radio button then i want to disappear the login form and the remaining fields must be in enable state.here is my code


<html>
<head>
<script language='javascript'>
function display(){
if(document.frmRadio.login[0].checked){
document.getElementById('div1').style.display
= 'block';
document.getElementById('div2').style.display
= 'block' ;
}
else{
document.getElementById('div2').style.display
= 'block';
document.getElementById('div1').style.display
= 'none';
}
}
</script>
</head>
<body>
<form name='frmRadio'>
<tr><td><input type=radio name='login' onclick='display
()'> Display login form & radio buttons</td></tr>
<tr><td><input type=radio name='login' onclick='display
()'> Display radio buttons only</td></tr>
<tr height='30'><td>&nbsp;</td></tr>
<div id='div1' style='display:none'>
<tr>
<td>UserName:<input type='text' name='username'></td>
<td>Password:<input type="text" name="password"></td>
<td><input type="submit" name="submit" value="Login"></td>
</tr>
</div>
<div id='div2' style='display:none'>
<tr>
<td>
<strong>Transaction Type:</strong>&nbsp;&nbsp;&nbsp;Sell<input type=radio disabled="disabled" name="sell">&nbsp;&nbsp;&nbsp;Rent<input type=radio name="rent" disabled="disabled">
<br><strong>Name</strong><input type="text" name="name" disabled="disabled"></td></tr>
</div>
</form>
</body>
</html>

Can any one help me to reslove this problem
Thanks&regards
neelakantam

liginmathew
06-26-2009, 10:46 AM
Here is the new code::



<html>
<head>
<script language='javascript'>
function display(chk){
if(document.frmRadio.login[0].checked){
document.getElementById('div1').style.display= 'block';
document.getElementById('div2').style.display= 'block' ;
}
else{
document.getElementById('div2').style.display= 'block';
document.getElementById('div1').style.display= 'none';
document.getElementById('sell').disabled=!chk.checked;
document.getElementById('rent').disabled=!chk.checked;
document.getElementById('name').disabled=!chk.checked;
}
}
</script>
</head>
<body>
<form name='frmRadio'>
<tr><td><input type=radio name='login' onclick="display(this)"> Display login form & radio buttons</td></tr>
<tr><td><input type=radio name='login' onclick="display(this)"> Display radio buttons only</td></tr>
<tr height='30'><td>&nbsp;</td></tr>
<div id='div1' style='display:none'>
<tr>
<td>UserName:<input type='text' name='username'></td>
<td>Password:<input type="text" name="password"></td>
<td><input type="submit" name="submit" value="Login"></td>
</tr>
</div>
<div id='div2' style='display:none'>
<tr>
<td id='div3'>
<strong>Transaction Type:</strong>&nbsp;&nbsp;&nbsp;Sell<input type=radio disabled="disabled" id=sell name="transaction">&nbsp;&nbsp;&nbsp;Rent<input type=radio id=rent name="transaction" disabled="disabled">
<br><strong>Name</strong><input type="text" name="name" id=name disabled="disabled"></td></tr>
</div>
</form>
</body>
</html>




Changes are
Line 4, 12-14, 21, 22, 34


Regards,
Ligin Mathew

Kor
06-26-2009, 02:22 PM
<div id='div1' style='display:none'>
<tr>
<td>UserName:<input type='text' name='username'></td>
<td>Password:<input type="text" name="password"></td>
<td><input type="submit" name="submit" value="Login"></td>
</tr>
</div>

That is HTML illegal. You can not nest a table's row within anything else except a row group such as tbody, tfoot or thead. But a TBODY element does not (in standard CSS) stand for a "block" display value (that works in IE only). So that you should use TBODY instead of DIV and a CSS empty value "" instead of "block".



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum