Link to home
Start Free TrialLog in
Avatar of rhea_v
rhea_v

asked on

Disable fields on load

I have the following HTML code (attached as code snippet).

I want to add following functionality but am unable to do so.
When the page loads, fields in the bottom table "Brand Related to FB" and  "Destination" should be disabled. When user clicks  on the checkbox "Do you want to Transfer?" then they should get enabled and should get disabled when checkbox is unchecked.

Please help

Thank you



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<link rel="stylesheet" href="TPG/css/webforms.css" type="text/css">
<link rel="stylesheet" href="TPG/css/webforms1.css" type="text/css">
<HEAD>
<TITLE>RespondentDetails </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
 
<script>
function apply()
{
	document.drops.Brand-select.disable=true;
	document.drops.component-select.disable=true;
	//document.drops.slave.disable=true;
 
 // document.frm.sub.disabled=true;
  if(document.frm.chk.checked==true)
  {
	document.drops.Brand-select.disable=true;
	document.drops.component-select.disable=true;
	//document.drops.slave.disable=true;
 
  }
  if(document.frm.chk.checked==false)
  {
   document.drops.Brand-select.disable=false;
	document.drops.component-select.disable=false;
	//document.drops.slave.disable=false;
  }
}
</script> 
<script>
function check() {
  var listBox = document.getElementById("component-select");
  for(i=0; i<listBox.options.length  ; i++) {
      if ( listBox.options[i].selected == true)
        if (listBox.options[i].value == 'Component_1_a') {
            var listBox1 = document.getElementById("slave");
                listBox1.disabled = false;
        }
        else {
            var listBox1 = document.getElementById("slave");
            listBox1.disabled = true;
        }
    }
}
 
</script>
 
 
<script language="javascript">
 
// This function goes through the options for the given
// drop down box and removes them in preparation for
// a new set of values
 
function emptyList( box ) {
	// Set each option to null thus removing it
	while ( box.options.length ) box.options[0] = null;
}
 
// This function assigns new drop down options to the given
// drop down box from the list of lists specified
 
function fillList( box, arr ) {
	// arr[0] holds the display text
	// arr[1] are the values
 
	for ( i = 0; i < arr[0].length; i++ ) {
 
		// Create a new drop down option with the
		// display text and value from arr
 
		option = new Option( arr[0][i], arr[1][i] );
 
		// Add to the end of the existing options
 
		box.options[box.length] = option;
	}
 
	// Preselect option 0
 
	box.selectedIndex=0;
}
 
// This function performs a drop down list option change by first
// emptying the existing option list and then assigning a new set
 
function changeList( box ) {
	// Isolate the appropriate list by using the value
	// of the currently selected option
 
	list = lists[box.options[box.selectedIndex].value];
 
	// Next empty the slave list
 
	emptyList( box.form.slave );
 
	// Then assign the new list values
 
	fillList( box.form.slave, list );
}
 
	 function checkBox(ctrl)
{
	//get the state of the check box
	if (ctrl.checked == true) {
		//the box is checked, so show the table
		document.all['moreInfo'].style.display = "inline";
	} else {
		//hide the table
		document.all['moreInfo'].style.display = "none";
	}
}
 
</script>
 
<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 next()
  {
 
	var answer = confirm("Are you sure you want to Approve?")
	if (answer)
	{
		window.location="Respondent_id.html";
	}
	else
	{
		
	}
  }
 function save()
  {
	var answer = confirm("Are you sure you want to Save?")
	if (answer)
	{
	window.location="Respondent.html"
	}
	else
	{
		
	}  
  }
  function history()
  {
  window.location="history_approver.html"
  }
 
function Attach()
	{
	window.location="RespondentDetails_attach.html"
	}
 
  function previous()
  {
 
  var answer = confirm("Are you sure yow want to Reject?")
	if (answer)
	{
		window.location="Respondent.html";
	}
	else
	{
		
	}
 
  }
 
  function transfer()
  {
window.location="Respondent.html";
  }
 
  function home()
  {
  window.location="Respondent.html"
  }
 
 
function Search()
{
 
window.open("find_product.html", "list", "width=150,height=150,left=500,top=300");
 
}
 
  // -->
</script>
<BODY>
 
<table>
	<tr>
	<td class="title">
	<Font size=5><U>Respondent Details</U></font>
	</td>
	</tr>
	</table>
<Form name="drops">
<TABLE class="borderTable" align="Center" width="65%">
<tr>
<td colspan="6" bgcolor="#CCCCCC" class="C_table_form">
<img src="TPG/icons/CustomerInfo.JPG" alt="Create New Feedback" width="20" height="20" />
<span class="subhead" >Respondent Details</span>
</td>
  </tr>
<TR class="row2">
	<TD class="header">FB ID</TD>
	<TD>XXXXX</TD>
</TR>
<!--<TR class="row2">
	<TD class="header">Product Name</TD>
	<TD>Servers</TD>
</TR>-->
<TR class="row1">
	<TD class="header">Submitted by</TD>
	<TD>Bonku</TD>
</TR>
<TR class="row2">
	<TD class="header">Status</TD>
	<TD>Responding</TD>
</TR>
<TR class="row1">
	<TD class="header">Date Submitted</TD>
	<TD>09/08/2008 11:47</TD>
</TR>
<TR class="row2">
	<TD class="header">Overview of FB</TD>
	<TD>Product Launch</TD>
</TR>
<TR class="row1">
	<TD class="header">Operation Division of Inputter</TD>
	<TD>Domestic Sales Business Unit</TD>
</TR>
<TR class="row2">
	<TD class="header">Operation Division of Respondent</TD>
	<td>		 <select title="Dropdown List" size='0' class="C_table_form" style='width: auto'>
	
		<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" /></TD-->
</TR>
<TR class="row1">
	<TD class="header">Response</TD>
	<TD><input type="radio" name="group1"> Temporary<input type="radio" name="group1" checked> Final
</TD>
 
</TR>
<TR class="row2">
	<TD class="header">Correspond to FB</TD>
	<TD><input type=radio name="update" value="yes" checked onclick="setReadOnly(this)">Yes
	<input type=radio name="update" value="no" onclick="setReadOnly(this)">No<TD>
	<!--TD><input type="radio" name="group2"> Yes <input type="radio" name="group2" > No
</TD-->
</TR>
<TR class="row1">
	<TD class="header">Corresponding plan period</TD>
	<TD><input type="text" name="mytext" />
</TD>
</TR>
<TR class="row2">
	<TD class="header">Response Details</TD>
	<TD><Textarea name="text1" ></textarea>
</TD>
</TR>
 
<TR class="row1">
	<TD class="header">Response Type</TD>
<td>
	<select name="Op_div" size="1" class="C_table_form">
		<option>Product</option>
		<option>Sales Promotional tool/ framework</option>
		<option>Others</option>
	</select>
</TD>
</TR>
 
<TR class="row2">
	<TD class="header">Brand Related to FB</TD>
	<td><SELECT multiple size="4" name="Brand-select">
			<OPTION>WebSAM</option>
			<OPTION>InfoCage</option>
			<OPTION selected>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>
</TR>
 
<TR class="row1">
	<TD class="header">Product related to FB</TD>
	<td class="C_table_form"> <input type="text" value="Printer" name="product"/> &nbsp;&nbsp;
<button type="button" onclick="Search()" class="buttons">Search</button>
 
</TD>
</TR>
 
<tr class="row2">
<td class="header"><LABEL for="op_div">Disclosure Control </LABEL>  </td>
 
<td><select name="Op_div" size="1">
<option value="d">Yes</option>
<option value="">No</option>
 
 
</select></td>
</TD>
</TR>
 
<TR  class="row1">
	<TD class="header">Contents of FB</TD>
	<TD>this was an appreciative effort.</TD>
</TR>
<TR class="row2">
	<TD class="header">Attached Files</TD>
	<TD><a href="pdf/090f120680007588.pdf" target=_blank>dept_detail.pdf</a></TD>
</TR>
<TR></tr>
<TR>
<td></td>
<td class="C_table_form"> <INPUT type="file" id="file">
<button type="button" onclick="Attach()" class="buttons">Attach</button><TD>
</Tr>
 
 
 
<TR class="row1">
	<TD class="header">Approver Comments</TD>
	<TD>All the details are complete</TD>
</TR>
<TR class="row2">
<td class="menuhead1">
<LABEL for="Contents of FB" class="header">Comments   </LABEL>
</td>
 
<td class="C_table_form">
<textarea rows="5" cols="38" align="center">
</textarea>
</td>
</TR>
 
<tr>
<td> 
<input type="checkbox" name="chk" value="xxx" onclick="apply()"> 
<B>Do you want to Transfer?<B>
</td>
 
</tr>
 
</TABLE>
 
<BR><BR>
 
<TABLE  class="borderTable" align="Center" width="65%" >
<tr>
    <td colspan="2" bgcolor="#CCCCCC" class="C_table_form"><img src="TPG/icons/CustomerInfo.JPG" alt="Transfer Details" width="20" height="20" /><span class="subhead" >Transfer Details</span></td>
  </tr>
 
 
 
 
 
 
<TR class="row2">
	<TD class="header">Brand Related to FB</TD>
	<td><SELECT multiple size="4" name="Brand-select" name="Brand-select" 
onChange="var idx = this.selectedIndex; var otherOptions = this.form.elements['component-select'].options;
for (var i=0;i<otherOptions.length;i++) otherOptions[i].selected=false;
if (idx == 0) otherOptions[0].selected=true;
else if (idx == 1) otherOptions[1].selected=true;
else otherOptions[2].selected=true;">
			<OPTION selected>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>
</TR>
<tr class="row1">
  <td class="header"><LABEL for="dsfd" class="menuhead1">Destination </LABEL></td>
  <td><SELECT multiple size="4" name="component-select" class="C_table_form" onchange="check()">
       <OPTION selected value="Component_1_b">Group 1</OPTION>
	   <OPTION value="Component_1_b">Group 2</OPTION>
	   <OPTION value="Component_1_c">Others</OPTION>
       <OPTION value="Component_1_a">Seperate Specification</OPTION>
	 </SELECT>
  </td>
</tr>
 
<TR class="row1" >
<td class="header">
<LABEL for="Contents of FB">Name of Respondent</LABEL> 
</td>	
 
<TD>	
<select name="slave" size="1" class="C_table_form"  disabled='true'>
<option value="d">Yamamoto</option>
<option value="c">Koisumi</option>
<option value="b">Bonku</option>
<option value="a">Fuji</option>
</select> 
</TR>		
</TABLE>
 
</Form>
<HR>
 
<TABLE >
 
<tr>
<td><button type="button" onclick="next()" class="buttons">Approve</button>
<button type="button" onclick="previous()" class="buttons">Reject</button>
<button type="button" onclick="transfer()" class="buttons">Transfer</button>
 
 
<TD align="right"><button type="button" onclick="save()" class="buttons">Save</button>
<TD><button type="button" onclick="history()" class="buttons">History</button></TD>
</td><td align="right"><button type="button" onclick="home()" class="buttons">Cancel</button></td>
</tr>
</TABLE>
</BODY>
</HTML>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Pratima
Pratima
Flag of India image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
SOLUTION
Avatar of hielo
hielo
Flag of Wallis and Futuna image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial