Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Disable textfields

Posted on 2008-10-05
9
390 Views
Last Modified: 2012-06-27
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
<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&#37;'>
<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&#37;'>
<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&#37;'>
<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&#37;'>
<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>

Open in new window

0
Comment
Question by:rhea_v
9 Comments
 
LVL 4

Expert Comment

by:sijishJohn
ID: 22647273
try this ...

for disabling controls..
document.getElementById('<yourControlName>'.disabled = true;

and this for enabling...

document.getElementById('<yourControlName>'.disabled = false;

call this javascript in onclick event of the corresponding checkbox
0
 
LVL 4

Expert Comment

by:sijishJohn
ID: 22647282
use this condition to find whether the checkbox is checked or not...

if(document.getElementById('<yourCheckboxId>').checked)
{
  document.getElementById('<yourControlName>').disabled = false;
}
else
{
  document.getElementById('<yourControlName>').disabled = true;
}
0
 

Author Comment

by:rhea_v
ID: 22647303
Did this (code atached)

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>

Open in new window

0
Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

 
LVL 82

Accepted Solution

by:
hielo earned 50 total points
ID: 22647321
try:
<td valign='top'>
                  <input type="checkbox" id="chk" name="chk" value="xxx" onclick="setReadOnly(this)"> 
                  <input disabled="disabled" type='text' style="width: 130px;" value='' size='15' id="mytext" 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>

Open in new window

0
 
LVL 4

Expert Comment

by:sijishJohn
ID: 22647331
but your code is working in my system...

did u get any error???
0
 
LVL 39

Assisted Solution

by:Pratima Pharande
Pratima Pharande earned 50 total points
ID: 22647361
0
 
LVL 1

Expert Comment

by:Georg
ID: 22647878
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.checked, mytext1)">
...
<input type="checkbox" name="chk" value="xxx" onclick="setReadOnly(this.checked, mytext2)">
....

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&#37;'>
<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&#37;'>
<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&#37;'>
<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&#37;'>
<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>

Open in new window

0
 
LVL 22

Expert Comment

by:kadaba
ID: 25874569
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>

Open in new window

0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question