PDA

View Full Version : Eneble disable form field



rtr.souvik
03-30-2012, 03:57 PM
I want to enable/disable form field using dropdown seletion, but its not working

my code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="robots" content="noindex, nofollow">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title></title>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>
<body>

<script language="javascript">

//////////////--USING JQUERY_--//////////////
$('document').ready(function(){
var counter = 2;
$('#addButton').click(function(){
if(counter>10)
{
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<tr>'+'<td width="150" align="center">'+'<select id="select'+counter+'"> <option value="">Select</option><option value="1">To</option><option value="2">By</option></select>'+'</td>'+'<td width="150">'+'<input type="text" name="textbox'+counter+'" id="textbox' + counter + '" value="" >'+'</td>'+'<td width="150">'+'<input type="text" name="textbox'+counter+'" id="textbox' + counter + '" value="" style="display:block">'+'</td>'+'<td width="150">'+'<input type="text" name="textbox'+counter+'" id="textbox' + counter + '" value="" style="display:block">'+'</td>'+'</tr>');
newTextBoxDiv.appendTo("#TextBoxesGroup")
counter++;
});
counter--;
$("#getButtonValue").click(function (){
var msg = '';
for(i=1; i<counter; i++){
msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
alert(msg);
});

///////////////////////////////////////////////////////
$(document).ready( function (){
$(".ddl").change( function(){
if($(this).val() == "Done")
$(this).parent().next().find("2").attr("disabled",true);
else
$(this).parent().next().find("1").attr("disabled",false);
});
});


//////////////////////////////////////////////////////

/* for(k=1; k<counter; k++){
alert(k);
$('#select'+k).change(function(){
if ($(this).val() == "2") {
$('#textbox'+k).attr('disable','disable');
} else {
$('#textbox'+k).attr('','');
}
if ($(this).val() == "1") {
$('#textbox'+k).show();
} else {
$('#textbox'+k).hide();
}

});
}
});*/


</script>
<form method="post" name="myfrm">
<table border="1" height="500px" width="800px" align="center" id="options-table">
<tr height="50">

<tr>
<td colspan="4">
<div id="TextBoxesGroup">
<table >
<tr height="30" align="center">
<td>To/By</td>
<td>Text Box</td>
<td>Debit</td>
<td>Credit</td>

</tr>

<tr>
<td width="150" align="center">
<select id="select" class="dd1">
<option value="">Select</option>
<option value="1">To</option>
<option value="2">By</option>
</select>
</td>
<td width="150"><input type="text" id='textbox2'></td>
<td width="150"><input type="text" id='textbox3' style="display:block"></td>
<td width="150"><input type="text" id='textbox4' style="display:block"></td>
<!--<td width="150"><input type="button" value="ADD" class="add"></td> -->
</tr>
</div>
</table>
</td>
</tr>

<tr height="50">
<td colspan="3"></td>
<td colspan="3" align="center"><input type="submit" name="sub" value="Enter"><input type="button" value="ADD" id="addButton"></td>
</tr>
</table>
</form>
</body>
</html>

<body>
</body>
</html>

I want when choose dr - debit field enable and credit field disable
and when choose cr - credit field enable and debit field disable

Please help me

Thanks in advance.

Souvik