How to show hidden field base on the value selected from a dropdown list field?

Hi,

I wanted to initially hide the fields during add operation and planning to use this function.



$crud->change_field_type('pc_id', 'hidden', $pc_id);

Now, base on the value of a dropdown field during add operation I wanted to unhide it so that user will be able to use that field. It looks like that I need a javascript solution for this, but I'm not sure if I need to create a new script or if there is an existing script in grocery crud that I can use.

Or, aside from javascript, is other way on how to do this using a native grocery crud functions or by not breaking it?

I'm working on my project using for the first time CI and grocery crud tandem. So far so good, both works great and I wanted to use both native functions and as much as possible all my code will not deviate from them.

Thanks and Best Regards,
Clustersblue

Thanks for confirming midnigther!

Now, I tried putting my custom JS on my html file. My script works fine when loading the GC table (I'm using flexigrid theme), however, when I wanted to add entry into it, it now seems I cannot get into my script. Why? when I tried to check it by simply prompting me an alert I didn't get it. I have a couple of things below that I suspect that causes this.

1. I didn't place my custom JS in the grocery crud javascript path (i.e. assets/grocery_crud/js). I'm no sure if the location could be the issue.
2. I might be using the wrong element id. I'm using "field-category_id" from the whole DIV of my code below in which from what I know is enought for the jquery to determine the field who will be triggered.



<div id="category_id_field_box" class="form-field-box odd">

    <div id="category_id_display_as_box" class="form-display-as-box">

	    <div id="category_id_input_box" class="form-input-box">

		    <select id="field-category_id" class="chosen-select chzn-done" style="width: 300px; display: none;" data-placeholder="Select Category" name="category_id">



		    <div id="field-category_id_chzn" class="chzn-container chzn-container-single" style="width: 300px;">



		    <a class="chzn-single" href="javascript:void(0)" tabindex="-1">



		    <div class="chzn-drop" style="left: -9000px; width: 298px; top: 24px;">

		    <div class="chzn-search">



		    <ul class="chzn-results">

			   <li id="field-category_id_chzn_o_1" class="active-result" style="">FW</li>

			   <li id="field-category_id_chzn_o_2" class="active-result" style="">HW</li>

			   <li id="field-category_id_chzn_o_3" class="active-result result-selected" style="">Solutions</li>

			   <li id="field-category_id_chzn_o_4" class="active-result" style="">SW</li>

		    </ul>

	    </div>

    </div>

</div>



<div class="clear"></div>

</div>

3. Flexigrid or GC limitation?

I know my script will work (the if statement works well) but it seems there is something wrong that I don't know about the click function. Below is an excerpt of my custom JS:



$(document).ready(function(){



if (readCookie("role")!=4){

		 $( "#maintenance" ).hide();

		 return false;

}



$("#category_id_input_box").click(function() {

	 alert("Handler for .click() called.");



});

});

I really appreciate any help.

Thanks and BR,
Clustersblue

How to show hidden field base on the value selected from a dropdown list field?

clustersblue

midnigther

clustersblue

clustersblue