Highlighted

jquery hide and show

Explorer ,
Jun 26, 2017

Copy link to clipboard

Copied

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>

TOPICS
Getting started

Views

364

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

jquery hide and show

Explorer ,
Jun 26, 2017

Copy link to clipboard

Copied

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>

TOPICS
Getting started

Views

365

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jun 26, 2017 0

Have something to add?

Join the conversation