jquery hide and show
Hi,
I have the form with default it shows below. When i click on Group, the company is hiding. When I click on Compay, i want the group is hiding and Company is shown, but my code didn't do it. Not sure what I have wrong here, please help.
Code:
<!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" />
<title>test</title>
<linkrel="stylesheet" href="css/demos.css">
<!--- sortabledatagrid --->
<script type="text/javascript" src="js/jquery.tablesorter.js"></script>
<cfparam name="_update" default="off">
<cfparam name="_updatebritm" default="off">
<cfparam name="_groupOption" default="">
<cfparam name="_groupOption2" default="" />
<cfparam name="reporttype" default="company">
<cfparam name="companyOption" default="" />
<cfparam name="com" default="1" />
<script type="text/javascript">
$(function() {
$( "#reportTypeGroup" ).buttonset();
});
$(document).ready(function() {
// sort on the first column and third column, order asc
$("#userLog").tablesorter({
widgets: ['zebra'],
sortList: [[4,1]],
headers: {
//1: { sorter: false},
2: { sorter: false},
3: { sorter: false}
//5: { sorter: false}
}
});
}
);
// hide and show drop box when select company or group
$(document).ready(function() {
$("input[name$='reporttype']").click(function() {
var type = $(this).val();
$("tr.desc").hide();
$("#Reporttype" + type).show();
});
});
</script>
</head>
<cfifisDefined("form.save")>
<cfifreporttypeeq "company">
<cfset variables.comp = form.companyOption />
<cfset variables.group = form._groupoption />
<cfelse>
<cfset variables.comp = "" />
<cfset variables.group = form._groupoption2 />
</cfif>
</cfif>
<body>
<cfoutput>
<div class="demo">
<form name="test" method="post" action="#CGI.SCRIPT_NAME#" id="test">
<table width="200" cellpadding="0" cellspacing="0" border="0">
<tr>
<tdcolspan="3">
<div id="reportTypeGroup" class="ui-widget">
<input type="radio" size="10" id="companyType" name="reporttype" value="company" <cfifreporttype EQ "company">checked="checked"</cfif> /><label for="companyType">Company</label>
<input type="radio" size="10" id="groupType" name="reporttype" value="group" <cfifreporttype EQ "group">checked="checked"</cfif>/><label for="groupType">Group</label>
</div>
</td>
</tr>
<tr><td colspan="4"> </td></tr>
<tr id="Reporttypecompany" class="desc">
<td class="label">group:</td>
<td>
<select name="_groupOption" id="_groupCode" onchange='surfto(this.form);'>
<option value="1" <cfif _groupOption EQ "1">selected="selected"</cfif>>1</option>
<option value="2" <cfif _groupOption EQ "2">selected="selected"</cfif>>2</option>
<option value="3" <cfif _groupOption EQ "3">selected="selected"</cfif>>3</option>
<option value="4" <cfif _groupOption EQ "4">selected="selected"</cfif>>4</option>
<option value="5" <cfif _groupOption EQ "5">selected="selected"</cfif>>5</option>
</select>
</td>
</tr>
<tr><td colspan="4"> </td></tr>
<tr id="Reporttypecompany" class="desc">
<td class="label">company:
</td>
<td>
select name="companyOption" id="companyCode">
<option value="0" selected="selected">Choose a company</option>
</select>
</td>
</tr>
<trid="Reporttypegroup" class="desc" style="display: none;">
<td class="label">group:</td>
<td>
<select name="_groupOption2" id="_groupCode2">
<option value="1" <cfif _groupOption2 EQ "1">selected="selected"</cfif>>1</option>
<option value="2" <cfif _groupOption2 EQ "2">selected="selected"</cfif>>2</option>
<option value="3" <cfif _groupOption2 EQ "3">selected="selected"</cfif>>3</option>
<option value="4" <cfif _groupOption2 EQ "4">selected="selected"</cfif>>4</option>
<option value="5" <cfif _groupOption2 EQ "5">selected="selected"</cfif>>5</option>
</select>
</td>
</tr>
</table>
</form>
</div>
</cfoutput>
</body>
</htm>
AdChoices