rhea_v
asked on
Disable textfields
I have the following HTML code.
There are two fields in it "Field Search" and "File Search". What I need is that these two fields should be disabled when the corresponding checkbox is unchecked. They should be enabled only when the corresponding checkbox is checked.
Please help
There are two fields in it "Field Search" and "File Search". What I need is that these two fields should be disabled when the corresponding checkbox is unchecked. They should be enabled only when the corresponding checkbox is checked.
Please help
<html>
<head>
<link rel="stylesheet" href="TPG/css/webforms.css" type="text/css">
<link rel="stylesheet" href="TPG/css/webforms1.css" type="text/css">
<script language="javascript">
function setReadOnly(obj) {
if(obj.value == "Yes")
{
document.forms[0].mytext.style.backgroundColor = "#ffffff";
document.forms[0].mytext.readOnly = 0;
document.forms[0].mytext.value = "";
} else {
document.forms[0].mytext.style.backgroundColor = "#eeeeee";
document.forms[0].mytext.readOnly = 1;
document.forms[0].mytext.value = " ";
}
}
function showDropDown(ddid)
{
document.getElementById(ddid).style.visibility = "visible";
}
function acceptDropDown(ddid)
{
document.getElementById(ddid).style.visibility = "hidden";
// Get values into textbox
var myList = document.getElementById("selMulti");
var myListCount = myList.options.length; // number of items
var textToDisplay = "";
for (i=0; i < myListCount; i++) if (myList.options[i].selected == true) textToDisplay += myList.options[i].value + ";";
document.getElementById("txtDropDown").value = textToDisplay;
}
</script>
</head>
<body >
<form name="SearchProcess_0" id="SearchProcess_0" action="searchSubmit.html">
<DIV id="search_criteria" style="position:absolute;left:0;top:05;display:inline">
<table width='100%'>
<tr>
<td valign="top" align="left">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="NarrowBody">
<tr>
<td valign="top">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width='100%'>
<tr width="100%" height="20">
<td style="background-color:#08045A" colspan=2>
<table cellspacing=0 cellpadding=0 border=0 width="100%" >
<tr width="100%" class="boilerplateBold">
<td align="left" class="bpLeft">
<span class='defaultLabelStyle' style='color:#FFFFFF'>Input Information</span>
</td>
<td class="bpRight" ></td>
</tr>
</table>
</td>
</tr>
</table>
<table >
<tr>
<th>
<span class='defaultLabelStyle'>Operation Division</span>
</th>
<th>
<span class='defaultLabelStyle'>Inputter Name</span>
</th>
<th>
<span class='defaultLabelStyle' style='Width: 140px'>Input Date</span>
</th>
<th>
<span class='defaultLabelStyle'>Type of FB</span>
</th>
<th>
<span class='defaultLabelStyle'>Importance</span>
</th>
<th>
<span class='defaultLabelStyle'>Brand related to FB</span>
</th>
<th>
<span class='defaultLabelStyle'>Product related to FB</span>
</th>
</tr>
<tr>
<td>
<select title="Dropdown List" size='0' class="C_table_form" style='width: auto'>
<option value="Domestic Sales Business Unit">Select from list</option>
<option value="Domestic Sales Business Unit">Domestic Sales Business Unit</option>
<option value="International Business Promotion Unit">International Business Promotion Unit</option>
<option value="Software Business Promotion Unit">Software Business Promotion Unit</option>
<option value="Marketing Unit">Marketing Unit</option>
<option value="MONOZUKRI Innovation Unit">MONOZUKRI Innovation Unit</option>
</td>
<td>
<input type='text' style="width: 110px;" value='' size='15'>
</td>
<td>
<table>
<tr>
<td>
<script src='TPG/wdk/include/popupCalendar.js' language='javascript'></script>
<table cellspacing='0' cellpadding='0' bordersize='0'>
<tr>
<td>
<input type='text' name='SearchProcess_from_date_date_0' value='From' style='width:70px'/>
</td>
<td>
<img name='SearchProcess_from_date_date_0_anchor' src='TPG/images/date/dropdown.gif' width=30 height=18 alt=' Calandar' onclick="popupCalendar('SearchProcess_0','SearchProcess_from_date_date_0','Sun,Mon,Tue,Wed,Thu,Fri,Sat','Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec','January,February,March,April,May,June,July,August,September,October,November,December',0,2,'m/d/yyyy','mmm d, yyyy','mmmm d, yyyy','Previous month','TPG/images/date/prevmonth.gif','Next month','TPG/images/date/nextmonth.gif');"/>
</td>
</tr>
</table>
</td>
<td>
<script src='TPG/wdk/include/popupCalendar.js' language='javascript'></script>
<table cellspacing='0' cellpadding='0' bordersize='0'>
<tr>
<td>
<input type='text' name='SearchProcess_to_date_date_0' value='To' style='width:70px'/>
</td>
<td>
<img name='SearchProcess_to_date_date_0_anchor' src='TPG/images/date/dropdown.gif' width=30 height=18 alt=' Calandar' onclick="popupCalendar('SearchProcess_0','SearchProcess_to_date_date_0','Sun,Mon,Tue,Wed,Thu,Fri,Sat','Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec','January,February,March,April,May,June,July,August,September,October,November,December',0,2,'m/d/yyyy','mmm d, yyyy','mmmm d, yyyy','Previous month','TPG/images/date/prevmonth.gif','Next month','TPG/images/date/nextmonth.gif');"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</td>
<td>
<select title="Type of FB" size='0' class="C_table_form" style='width: 100px;'>
<option value="dd">Select from List</option>
<option value='A'>Type1</option>
<option value='B'>Type2</option>
<option value='C'>Type3</option>
<option value='D'>Type4</option>
</select>
</td>
<td>
<select title="Select degree of Importance of correspondence to FB" size='0' class="C_table_form" style='width: 60px;'>
<option value="Domestic Sales Business Unit">Select</option>
<option value='High'>High</option>
<option value='low'>Medium</option>
<option value='low'>Low</option>
</select>
</td>
<td>
<select title="Dropdown List" size='0' class="C_table_form" style='width: 170px;'>
<OPTION selected>Select from List</option>
<OPTION >WebSAM</option>
<OPTION>InfoCage</option>
<OPTION>CLUSTERPRO</option>
<OPTION>WebOTX</option>
<OPTION>InfoFrame</option>
<OPTION>SystemDirector</option>
<OPTION>StarOffice</option>
<OPTION>Other Collaboration areas</option>
<OPTION>Other CRM area</option>
<OPTION>Other Service execution base area</option>
<OPTION>Other Development environment area</option>
<OPTION>Other Information management area</option>
<OPTION>Other Security area</option>
<OPTION>Other Operation management area</option>
<OPTION>Other System base area</option>
<OPTION>Others</option>
</select>
</td>
<td>
<input type='text' style="width: 130px;" value='' size='15'>
</td>
</tr>
</table>
<BR>
<table width='100%'>
<tr width="100%" height="20">
<td style="background-color:#08045A" colspan=2>
<table cellspacing=0 cellpadding=0 border=0 width="100%" >
<tr width="100%" class="boilerplateBold">
<td align="left" class="bpLeft">
<span class='defaultLabelStyle' style='color:#FFFFFF'>Response Information</span>
</td>
<td class="bpRight" ></td>
</tr>
</table>
</td>
</tr>
</table>
<table >
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<th>
<span class='defaultLabelStyle'>Respondent Operation Division</span>
</th>
<th>
<span class='defaultLabelStyle'>Respondent Name</span>
</th>
<th>
<span class='defaultLabelStyle' style='Width: 140px'>Responding Date</span>
</th>
<th>
<span class='defaultLabelStyle'>Response Type</span>
</th>
<th>
<span class='defaultLabelStyle'>Brand related to FB</span>
</th>
<th>
<span class='defaultLabelStyle'>Product related to FB</span>
</th>
</tr>
<tr>
<td>
<select title="Dropdown List" size='0' class="C_table_form" style='width: auto'>
<OPTION selected>Select from List</option>
<option value="Domestic Sales Business Unit">Domestic Sales Business Unit</option>
<option value="International Business Promotion Unit">International Business Promotion Unit</option>
<option value="Software Business Promotion Unit">Software Business Promotion Unit</option>
<option value="Marketing Unit">Marketing Unit</option>
<option value="MONOZUKRI Innovation Unit">MONOZUKRI Innovation Unit</option>
</td>
<td>
<input type='text' style="width: 120px;" value='' size='15'>
</td>
<td>
<table>
<tr>
<td>
<script src='TPG/wdk/include/popupCalendar.js' language='javascript'></script>
<table cellspacing='0' cellpadding='0' bordersize='0'>
<tr>
<td>
<input type='text' name='SearchProcess_from1_date_date_0' value='From' style='width:70px'/>
</td>
<td>
<img name='SearchProcess_from1_date_date_0_anchor' src='TPG/images/date/dropdown.gif' width=30 height=18 alt=' Calandar' onclick="popupCalendar('SearchProcess_0','SearchProcess_from1_date_date_0','Sun,Mon,Tue,Wed,Thu,Fri,Sat','Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec','January,February,March,April,May,June,July,August,September,October,November,December',0,2,'m/d/yyyy','mmm d, yyyy','mmmm d, yyyy','Previous month','TPG/images/date/prevmonth.gif','Next month','TPG/images/date/nextmonth.gif');"/>
</td>
</tr>
</table>
</td>
<td>
<script src='TPG/wdk/include/popupCalendar.js' language='javascript'></script>
<table cellspacing='0' cellpadding='0' bordersize='0'>
<tr>
<td>
<input type='text' name='SearchProcess_to1_date_date_0' value='To' style='width:70px'/>
</td>
<td>
<img name='SearchProcess_to1_date_date_0_anchor' src='TPG/images/date/dropdown.gif' width=30 height=18 alt=' Calandar' onclick="popupCalendar('SearchProcess_0','SearchProcess_to1_date_date_0','Sun,Mon,Tue,Wed,Thu,Fri,Sat','Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec','January,February,March,April,May,June,July,August,September,October,November,December',0,2,'m/d/yyyy','mmm d, yyyy','mmmm d, yyyy','Previous month','TPG/images/date/prevmonth.gif','Next month','TPG/images/date/nextmonth.gif');"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</td>
<td>
<select name="Op_div" size="1" class="C_table_form" style='width: auto;'>
<OPTION selected>Select from List</option>
<option>Product</option>
<option>Sales Promotional tool/ framework</option>
<option>Others</option>
</td>
<td>
<select title="Dropdown List" size='0' class="C_table_form" style='width: 170px;'>
<OPTION selected>Select from List</option>
<OPTION >WebSAM</option>
<OPTION>InfoCage</option>
<OPTION>CLUSTERPRO</option>
<OPTION>WebOTX</option>
<OPTION>InfoFrame</option>
<OPTION>SystemDirector</option>
<OPTION>StarOffice</option>
<OPTION>Other Collaboration areas</option>
<OPTION>Other CRM area</option>
<OPTION>Other Service execution base area</option>
<OPTION>Other Development environment area</option>
<OPTION>Other Information management area</option>
<OPTION>Other Security area</option>
<OPTION>Other Operation management area</option>
<OPTION>Other System base area</option>
<OPTION>Others</option>
</select>
</td>
<td>
<input type='text' style="width: 130px;" value='' size='15'>
</td>
</tr>
</table>
<Br>
<table width='100%'>
<tr width="100%" height="20">
<td style="background-color:#08045A" colspan=2>
<table cellspacing=0 cellpadding=0 border=0 width="100%" >
<tr width="100%" class="boilerplateBold">
<td align="left" class="bpLeft">
<span class='defaultLabelStyle' style='color:#FFFFFF'>Other Information</span>
</td>
<td class="bpRight" ></td>
</tr>
</table>
</td>
</tr>
</table>
<table >
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<th>
<span class='defaultLabelStyle'>Status</span>
</th>
<th>
<span class='defaultLabelStyle'>FB ID</span>
</th>
<th>
<span class='defaultLabelStyle'>Field Search</span>
</th>
<th>
<span class='defaultLabelStyle'>File Search</span>
</th>
<tr>
<td>
<!--select title="Dropdown List" size='0' class="C_table_form" style='width: auto'-->
<SELECT multiple size="4" name="status-select" style='width: auto'>
<option value="Domestic Sales Business Unit">--Select--</option>
<option value="Domestic Sales Business Unit">Inputting</option>
<option value="International Business Promotion Unit">Awaiting Approval</option>
<option value="Software Business Promotion Unit">Responding</option>
<option value="Marketing Unit">Not Responded</option>
<option value="Marketing Unit">Waiting for Response Approval</option>
<option value="Marketing Unit">Waiting for Response Completion</option>
<option value="MONOZUKRI Innovation Unit">Completion</option>
</td>
<!-- working here.............-->
<td valign='top'>
<input type='text' style="width: 130px;" value='' size='15'>
</td>
<td valign='top'>
<input type="checkbox" name="chk" value="xxx" onclick="setReadOnly(this)">
<input type='text' style="width: 130px;" value='' size='15' name="mytext">
</td>
<td valign='top'>
<input type="checkbox" name="chk" value="xxx" onclick="setReadOnly(this)">
<input type='text' style="width: 130px;" value='' name="mytext" size='15'>
</td>
</tr>
</table>
<table width="100%">
<tr align='left'>
<button type="button" onclick="search()" class="buttons">Search</button></td>
<!--button type="button" onclick="search1()" class="buttons">Open in Xls</button></td-->
<button type="button" onclick="goback()" class="buttons">Cancel</button></td>
<script>
function goback()
{
window.location.replace("body.html",true);
}
function search()
{
window.location="searchsubmit.html";
}
function search1()
{
window.open("searchresult.xlsx");
}
</script>
<b><span class='defaultLabelStyle' style='color:red'></span></b>
</td>
</tr>
</table>
</div>
<div id="search_result" style="position:absolute;left:0;top:285;display:inline">
<table cellspacing=0 cellpadding=0 border=0 width="100%" >
<tr width="100%">
<td class="SecStart" ><span class="subhead"><span class='defaultLabelStyle'>FB Search Result</span>
</span></td>
</tr>
<table border='0' width='100%' class='defaultDatagridStyle'>
<tr>
<td>
<tr class='defaultRowStyle' height='10'>
<td align="right" colspan="10" >
</td>
<td align='center' width="90%" >
</td>
<td align='right' width="95%" class="ShowItems">
<span class='defaultLabelStyle'>Show Item</span>
</td>
<td>
<select title="Items per page:" size=0 class=defaultDataPageSizeStyle >
<option selected value=10>10</option>
<option value=50>50</option>
<option value=100>100</option>
</select>
</td>
</tr>
</td>
</tr>
<table width='100%'border='0'>
<tr>
<th nowrap>Status</th>
<th nowrap>FB-ID</th>
<th nowrap>Type</th>
<th nowrap>Brand</th>
<th nowrap>Product Name</th>
<th nowrap>Requisition</th>
<th nowrap>Input by</th>
<th nowrap>Input date</th>
<th nowrap>Responded by</th>
<th nowrap>Responded on</th>
<th nowrap>Approved on</th>
<th nowrap></th>
<!--th nowrap>History</th-->
</tr>
</table>
</table>
</form>
</body>
</html>
use this condition to find whether the checkbox is checked or not...
if(document.getElementById
{
document.getElementById('<
}
else
{
document.getElementById('<
}
if(document.getElementById
{
document.getElementById('<
}
else
{
document.getElementById('<
}
ASKER
Did this (code atached)
but it's not working. Please help
but it's not working. Please help
<td valign='top'>
<input type="checkbox" id="chk" name="chk" value="xxx" onclick="setReadOnly(this)">
<input type='text' style="width: 130px;" value='' size='15' name="mytext">
</td>
<script language="javascript">
function setReadOnly(obj) {
if(document.getElementById('chk').checked)
{
document.getElementById('mytext').disabled = false;
}
else
{
document.getElementById('mytext').disabled = true;
}
}
</script>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
but your code is working in my system...
did u get any error???
did u get any error???
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
try this,
i have change your code:
1:
function setReadOnly(ischecked, obj) {
alert( obj.name );
if(ischecked == true) {
obj.style.backgroundColor = "#ffffff";
obj.value = "";
obj.readOnly = 0;
} else {
obj.style.backgroundColor = "#eeeeee";
obj.value = " ";
obj.readOnly = 1;
}
}
2:
and the call to the script:
....
<input type="checkbox" name="chk" value="xxx" onclick="setReadOnly(this.
...
<input type="checkbox" name="chk" value="xxx" onclick="setReadOnly(this.
....
Hope this helps
i have change your code:
1:
function setReadOnly(ischecked, obj) {
alert( obj.name );
if(ischecked == true) {
obj.style.backgroundColor = "#ffffff";
obj.value = "";
obj.readOnly = 0;
} else {
obj.style.backgroundColor = "#eeeeee";
obj.value = " ";
obj.readOnly = 1;
}
}
2:
and the call to the script:
....
<input type="checkbox" name="chk" value="xxx" onclick="setReadOnly(this.
...
<input type="checkbox" name="chk" value="xxx" onclick="setReadOnly(this.
....
Hope this helps
<html>
<head>
<link rel="stylesheet" href="TPG/css/webforms.css" type="text/css">
<link rel="stylesheet" href="TPG/css/webforms1.css" type="text/css">
<script language="javascript">
function setReadOnly(ischecked, obj) {
alert( obj.name );
if(ischecked == true) {
obj.style.backgroundColor = "#ffffff";
obj.value = "";
obj.readOnly = 0;
//document.forms[0].mytext.style.backgroundColor = "#ffffff";
//document.forms[0].mytext.readOnly = 0;
//document.forms[0].mytext.value = "";
} else {
obj.style.backgroundColor = "#eeeeee";
obj.value = " ";
obj.readOnly = 1;
//document.forms[0].mytext.style.backgroundColor = "#eeeeee";
//document.forms[0].mytext.readOnly = 1;
//document.forms[0].mytext.value = " ";
}
}
function showDropDown(ddid)
{
document.getElementById(ddid).style.visibility = "visible";
}
function acceptDropDown(ddid)
{
document.getElementById(ddid).style.visibility = "hidden";
// Get values into textbox
var myList = document.getElementById("selMulti");
var myListCount = myList.options.length; // number of items
var textToDisplay = "";
for (i=0; i < myListCount; i++) if (myList.options[i].selected == true) textToDisplay += myList.options[i].value + ";";
document.getElementById("txtDropDown").value = textToDisplay;
}
</script>
</head>
<body >
<form name="SearchProcess_0" id="SearchProcess_0" action="searchSubmit.html">
<DIV id="search_criteria" style="position:absolute;left:0;top:05;display:inline">
<table width='100%'>
<tr>
<td valign="top" align="left">
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="NarrowBody">
<tr>
<td valign="top">
</td>
</tr>
</table>
</td>
</tr>
</table>
<table width='100%'>
<tr width="100%" height="20">
<td style="background-color:#08045A" colspan=2>
<table cellspacing=0 cellpadding=0 border=0 width="100%" >
<tr width="100%" class="boilerplateBold">
<td align="left" class="bpLeft">
<span class='defaultLabelStyle' style='color:#FFFFFF'>Input Information</span>
</td>
<td class="bpRight" ></td>
</tr>
</table>
</td>
</tr>
</table>
<table >
<tr>
<th>
<span class='defaultLabelStyle'>Operation Division</span>
</th>
<th>
<span class='defaultLabelStyle'>Inputter Name</span>
</th>
<th>
<span class='defaultLabelStyle' style='Width: 140px'>Input Date</span>
</th>
<th>
<span class='defaultLabelStyle'>Type of FB</span>
</th>
<th>
<span class='defaultLabelStyle'>Importance</span>
</th>
<th>
<span class='defaultLabelStyle'>Brand related to FB</span>
</th>
<th>
<span class='defaultLabelStyle'>Product related to FB</span>
</th>
</tr>
<tr>
<td>
<select title="Dropdown List" size='0' class="C_table_form" style='width: auto'>
<option value="Domestic Sales Business Unit">Select from list</option>
<option value="Domestic Sales Business Unit">Domestic Sales Business Unit</option>
<option value="International Business Promotion Unit">International Business Promotion Unit</option>
<option value="Software Business Promotion Unit">Software Business Promotion Unit</option>
<option value="Marketing Unit">Marketing Unit</option>
<option value="MONOZUKRI Innovation Unit">MONOZUKRI Innovation Unit</option>
</td>
<td>
<input type='text' style="width: 110px;" value='' size='15'>
</td>
<td>
<table>
<tr>
<td>
<script src='TPG/wdk/include/popupCalendar.js' language='javascript'></script>
<table cellspacing='0' cellpadding='0' bordersize='0'>
<tr>
<td>
<input type='text' name='SearchProcess_from_date_date_0' value='From' style='width:70px'/>
</td>
<td>
<img name='SearchProcess_from_date_date_0_anchor' src='TPG/images/date/dropdown.gif' width=30 height=18 alt=' Calandar' onclick="popupCalendar('SearchProcess_0','SearchProcess_from_date_date_0','Sun,Mon,Tue,Wed,Thu,Fri,Sat','Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec','January,February,March,April,May,June,July,August,September,October,November,December',0,2,'m/d/yyyy','mmm d, yyyy','mmmm d, yyyy','Previous month','TPG/images/date/prevmonth.gif','Next month','TPG/images/date/nextmonth.gif');"/>
</td>
</tr>
</table>
</td>
<td>
<script src='TPG/wdk/include/popupCalendar.js' language='javascript'></script>
<table cellspacing='0' cellpadding='0' bordersize='0'>
<tr>
<td>
<input type='text' name='SearchProcess_to_date_date_0' value='To' style='width:70px'/>
</td>
<td>
<img name='SearchProcess_to_date_date_0_anchor' src='TPG/images/date/dropdown.gif' width=30 height=18 alt=' Calandar' onclick="popupCalendar('SearchProcess_0','SearchProcess_to_date_date_0','Sun,Mon,Tue,Wed,Thu,Fri,Sat','Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec','January,February,March,April,May,June,July,August,September,October,November,December',0,2,'m/d/yyyy','mmm d, yyyy','mmmm d, yyyy','Previous month','TPG/images/date/prevmonth.gif','Next month','TPG/images/date/nextmonth.gif');"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</td>
<td>
<select title="Type of FB" size='0' class="C_table_form" style='width: 100px;'>
<option value="dd">Select from List</option>
<option value='A'>Type1</option>
<option value='B'>Type2</option>
<option value='C'>Type3</option>
<option value='D'>Type4</option>
</select>
</td>
<td>
<select title="Select degree of Importance of correspondence to FB" size='0' class="C_table_form" style='width: 60px;'>
<option value="Domestic Sales Business Unit">Select</option>
<option value='High'>High</option>
<option value='low'>Medium</option>
<option value='low'>Low</option>
</select>
</td>
<td>
<select title="Dropdown List" size='0' class="C_table_form" style='width: 170px;'>
<OPTION selected>Select from List</option>
<OPTION >WebSAM</option>
<OPTION>InfoCage</option>
<OPTION>CLUSTERPRO</option>
<OPTION>WebOTX</option>
<OPTION>InfoFrame</option>
<OPTION>SystemDirector</option>
<OPTION>StarOffice</option>
<OPTION>Other Collaboration areas</option>
<OPTION>Other CRM area</option>
<OPTION>Other Service execution base area</option>
<OPTION>Other Development environment area</option>
<OPTION>Other Information management area</option>
<OPTION>Other Security area</option>
<OPTION>Other Operation management area</option>
<OPTION>Other System base area</option>
<OPTION>Others</option>
</select>
</td>
<td>
<input type='text' style="width: 130px;" value='' size='15'>
</td>
</tr>
</table>
<BR>
<table width='100%'>
<tr width="100%" height="20">
<td style="background-color:#08045A" colspan=2>
<table cellspacing=0 cellpadding=0 border=0 width="100%" >
<tr width="100%" class="boilerplateBold">
<td align="left" class="bpLeft">
<span class='defaultLabelStyle' style='color:#FFFFFF'>Response Information</span>
</td>
<td class="bpRight" ></td>
</tr>
</table>
</td>
</tr>
</table>
<table >
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<th>
<span class='defaultLabelStyle'>Respondent Operation Division</span>
</th>
<th>
<span class='defaultLabelStyle'>Respondent Name</span>
</th>
<th>
<span class='defaultLabelStyle' style='Width: 140px'>Responding Date</span>
</th>
<th>
<span class='defaultLabelStyle'>Response Type</span>
</th>
<th>
<span class='defaultLabelStyle'>Brand related to FB</span>
</th>
<th>
<span class='defaultLabelStyle'>Product related to FB</span>
</th>
</tr>
<tr>
<td>
<select title="Dropdown List" size='0' class="C_table_form" style='width: auto'>
<OPTION selected>Select from List</option>
<option value="Domestic Sales Business Unit">Domestic Sales Business Unit</option>
<option value="International Business Promotion Unit">International Business Promotion Unit</option>
<option value="Software Business Promotion Unit">Software Business Promotion Unit</option>
<option value="Marketing Unit">Marketing Unit</option>
<option value="MONOZUKRI Innovation Unit">MONOZUKRI Innovation Unit</option>
</td>
<td>
<input type='text' style="width: 120px;" value='' size='15'>
</td>
<td>
<table>
<tr>
<td>
<script src='TPG/wdk/include/popupCalendar.js' language='javascript'></script>
<table cellspacing='0' cellpadding='0' bordersize='0'>
<tr>
<td>
<input type='text' name='SearchProcess_from1_date_date_0' value='From' style='width:70px'/>
</td>
<td>
<img name='SearchProcess_from1_date_date_0_anchor' src='TPG/images/date/dropdown.gif' width=30 height=18 alt=' Calandar' onclick="popupCalendar('SearchProcess_0','SearchProcess_from1_date_date_0','Sun,Mon,Tue,Wed,Thu,Fri,Sat','Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec','January,February,March,April,May,June,July,August,September,October,November,December',0,2,'m/d/yyyy','mmm d, yyyy','mmmm d, yyyy','Previous month','TPG/images/date/prevmonth.gif','Next month','TPG/images/date/nextmonth.gif');"/>
</td>
</tr>
</table>
</td>
<td>
<script src='TPG/wdk/include/popupCalendar.js' language='javascript'></script>
<table cellspacing='0' cellpadding='0' bordersize='0'>
<tr>
<td>
<input type='text' name='SearchProcess_to1_date_date_0' value='To' style='width:70px'/>
</td>
<td>
<img name='SearchProcess_to1_date_date_0_anchor' src='TPG/images/date/dropdown.gif' width=30 height=18 alt=' Calandar' onclick="popupCalendar('SearchProcess_0','SearchProcess_to1_date_date_0','Sun,Mon,Tue,Wed,Thu,Fri,Sat','Jan,Feb,Mar,Apr,May,Jun,Jul,Aug,Sep,Oct,Nov,Dec','January,February,March,April,May,June,July,August,September,October,November,December',0,2,'m/d/yyyy','mmm d, yyyy','mmmm d, yyyy','Previous month','TPG/images/date/prevmonth.gif','Next month','TPG/images/date/nextmonth.gif');"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</td>
<td>
<select name="Op_div" size="1" class="C_table_form" style='width: auto;'>
<OPTION selected>Select from List</option>
<option>Product</option>
<option>Sales Promotional tool/ framework</option>
<option>Others</option>
</td>
<td>
<select title="Dropdown List" size='0' class="C_table_form" style='width: 170px;'>
<OPTION selected>Select from List</option>
<OPTION >WebSAM</option>
<OPTION>InfoCage</option>
<OPTION>CLUSTERPRO</option>
<OPTION>WebOTX</option>
<OPTION>InfoFrame</option>
<OPTION>SystemDirector</option>
<OPTION>StarOffice</option>
<OPTION>Other Collaboration areas</option>
<OPTION>Other CRM area</option>
<OPTION>Other Service execution base area</option>
<OPTION>Other Development environment area</option>
<OPTION>Other Information management area</option>
<OPTION>Other Security area</option>
<OPTION>Other Operation management area</option>
<OPTION>Other System base area</option>
<OPTION>Others</option>
</select>
</td>
<td>
<input type='text' style="width: 130px;" value='' size='15'>
</td>
</tr>
</table>
<Br>
<table width='100%'>
<tr width="100%" height="20">
<td style="background-color:#08045A" colspan=2>
<table cellspacing=0 cellpadding=0 border=0 width="100%" >
<tr width="100%" class="boilerplateBold">
<td align="left" class="bpLeft">
<span class='defaultLabelStyle' style='color:#FFFFFF'>Other Information</span>
</td>
<td class="bpRight" ></td>
</tr>
</table>
</td>
</tr>
</table>
<table >
<tr>
<td>
</td>
<td>
</td>
</tr>
<tr>
<th>
<span class='defaultLabelStyle'>Status</span>
</th>
<th>
<span class='defaultLabelStyle'>FB ID</span>
</th>
<th>
<span class='defaultLabelStyle'>Field Search</span>
</th>
<th>
<span class='defaultLabelStyle'>File Search</span>
</th>
<tr>
<td>
<!--select title="Dropdown List" size='0' class="C_table_form" style='width: auto'-->
<SELECT multiple size="4" name="status-select" style='width: auto'>
<option value="Domestic Sales Business Unit">--Select--</option>
<option value="Domestic Sales Business Unit">Inputting</option>
<option value="International Business Promotion Unit">Awaiting Approval</option>
<option value="Software Business Promotion Unit">Responding</option>
<option value="Marketing Unit">Not Responded</option>
<option value="Marketing Unit">Waiting for Response Approval</option>
<option value="Marketing Unit">Waiting for Response Completion</option>
<option value="MONOZUKRI Innovation Unit">Completion</option>
</td>
<!-- working here.............-->
<td valign='top'>
<input type='text' style="width: 130px;" value='' size='15'>
</td>
<td valign='top'>
<input type="checkbox" name="chk" value="xxx" onclick="setReadOnly(this.checked, mytext1)">
<input type='text' style="width: 130px;" value='' size='15' name="mytext1">
</td>
<td valign='top'>
<input type="checkbox" name="chk" value="xxx" onclick="setReadOnly(this.checked, mytext2)">
<input type='text' style="width: 130px;" value='' name="mytext2" size='15'>
</td>
</tr>
</table>
<table width="100%">
<tr align='left'>
<button type="button" onclick="search()" class="buttons">Search</button></td>
<!--button type="button" onclick="search1()" class="buttons">Open in Xls</button></td-->
<button type="button" onclick="goback()" class="buttons">Cancel</button></td>
<script>
function goback()
{
window.location.replace("body.html",true);
}
function search()
{
window.location="searchsubmit.html";
}
function search1()
{
window.open("searchresult.xlsx");
}
</script>
<b><span class='defaultLabelStyle' style='color:red'></span></b>
</td>
</tr>
</table>
</div>
<div id="search_result" style="position:absolute;left:0;top:285;display:inline">
<table cellspacing=0 cellpadding=0 border=0 width="100%" >
<tr width="100%">
<td class="SecStart" ><span class="subhead"><span class='defaultLabelStyle'>FB Search Result</span>
</span></td>
</tr>
<table border='0' width='100%' class='defaultDatagridStyle'>
<tr>
<td>
<tr class='defaultRowStyle' height='10'>
<td align="right" colspan="10" >
</td>
<td align='center' width="90%" >
</td>
<td align='right' width="95%" class="ShowItems">
<span class='defaultLabelStyle'>Show Item</span>
</td>
<td>
<select title="Items per page:" size=0 class=defaultDataPageSizeStyle >
<option selected value=10>10</option>
<option value=50>50</option>
<option value=100>100</option>
</select>
</td>
</tr>
</td>
</tr>
<table width='100%'border='0'>
<tr>
<th nowrap>Status</th>
<th nowrap>FB-ID</th>
<th nowrap>Type</th>
<th nowrap>Brand</th>
<th nowrap>Product Name</th>
<th nowrap>Requisition</th>
<th nowrap>Input by</th>
<th nowrap>Input date</th>
<th nowrap>Responded by</th>
<th nowrap>Responded on</th>
<th nowrap>Approved on</th>
<th nowrap></th>
<!--th nowrap>History</th-->
</tr>
</table>
</table>
</form>
</body>
</html>
simplified.
<input type="checkbox" id="chk" name="chk" value="xxx" onclick="setReadOnly(this,'mytext')">
<input disabled="disabled" type='text' style="width: 130px;" value='' size='15' id="mytext" name="mytext">
<script type="text/javascript">
function setReadOnly(chkObj,inpId)
{
var inpObj = document.getElementById(inp);
inpObj.value="";
inpObj.disabled = !chkObj.checked; // for readonly : inpObj.readOnly = !chkObj.checked;
}
</script>
for disabling controls..
document.getElementById('<
and this for enabling...
document.getElementById('<
call this javascript in onclick event of the corresponding checkbox