Use value in combo box to hide/show other fields - need help

The recommended method of customizing your AppGini-generated application is through hooks. But sometimes you might need to add functionality not accessible through hooks. You can discuss this here.
Post Reply
User avatar
shasta59
AppGini Super Hero
AppGini Super Hero
Posts: 231
Joined: 2013-01-08 19:40
Location: Calgary, Alberta, Canada

Use value in combo box to hide/show other fields - need help

Post by shasta59 » 2016-02-27 23:58

Appgini Version 5.50

I am trying to do the following:

Based upon the value selected in

<%%COMBO(fieldname)%%>

I want to hide/show various other fields in the input form. I can do this easily if the field is not a combo box but not with a combo box. I am sure I am missing something simple in this case but cannot see it. I have tried onblur, onfocusout etc. but it will not work. The issue I am having is how to read the value in the combo box. After multiple tries I decided to ask for a little help.

Any ideas?

Thanks everyone.
Calgary, Alberta, Canada - Using Appgini 5.50 -

User avatar
shasta59
AppGini Super Hero
AppGini Super Hero
Posts: 231
Joined: 2013-01-08 19:40
Location: Calgary, Alberta, Canada

Re: Use value in combo box to hide/show other fields - need help

Post by shasta59 » 2016-02-28 16:02

Appgini Version 5.50

I figured it out. After sleeping on it a light bulb came on and I got it. (Wife was not impressed when I got up at 3 AM and ran downstairs to my office) LOL
Was not thinking that it would return the id of the value selected. As a result was getting wrong info to my coding.
Live and learn.

I wrote code to take the value returned - the id - and based upon the value returned did what I needed it to do.

Basically I was asking, in my coding, the wrong question.
I now have it check to see what is returned and since I am hiding/showing fields added code to check and make sure the div is either shown or hidden based upon value selected.



Alan
Calgary, Alberta, Canada - Using Appgini 5.50 -

peteraj
Posts: 27
Joined: 2016-02-05 12:25

Re: Use value in combo box to hide/show other fields - need help

Post by peteraj » 2016-03-18 12:22

Hi Alan,

Did it work? If so, could you share the solution, please?

Regards
Peter

User avatar
shasta59
AppGini Super Hero
AppGini Super Hero
Posts: 231
Joined: 2013-01-08 19:40
Location: Calgary, Alberta, Canada

Re: Use value in combo box to hide/show other fields - need help

Post by shasta59 » 2016-03-21 22:30

Peter

When I get a chance I will share. It was so simple I am surprised I missed it. A forest for the trees issue. I will try to post it tonight.

Alan
Calgary, Alberta, Canada - Using Appgini 5.50 -

User avatar
shasta59
AppGini Super Hero
AppGini Super Hero
Posts: 231
Joined: 2013-01-08 19:40
Location: Calgary, Alberta, Canada

Re: Use value in combo box to hide/show other fields - need help

Post by shasta59 » 2016-03-21 23:01

Hello

Using AppGini 5.50
What you need to do is use an EventListener
You also need to ensure all fields you are going to 'listen' to have an id

Code: Select all

function yourfunctionname(){  //this is your function name - call it what you want
	document.getElementById("elementid").addEventListener("blur",nextfunction, true); //elementid is the id of the field you watching, when it blurs then it runs the next function. This is actually watching a div element - found this easiest to do what I want
	
	function nextfunction(){ // this is called by the bluring of the above div element - means user left field
		if($j('#fieldid').val() == (17)){ //this value is the value of what is entered in the field referenced - as I only had one value to trap for I put it in. But you could have a call which gets the id and compares it to an array or whatever
			
		$j('#fieldtohide').hide(); //this tells it to hide this field if the value == 17
		} else {
			$j('#fieldtohide').show(); //otherwise it tells it to show it
		
	
	}
	}
		
}  //the code below here is for firefox browsers. They do not like blur and this resolves it with the focusout routine
$j(document).ready(function(){ 
	$j('#fieldtohide').hide(); // I hid the field when the document was ready.
	setTimeout(function() { $j('#divname').focusout(); }, 100);
	});

Okay, what this does is the following:

When a user selects, in this case only, one specific value to be in the #fieldid field and leaves the div to go on to another div to fill in more values in the form, it runs nextfunction and looks at the value. If the value matches 17 it then hides this field.

Why? I had one group which did not want to participate in a certain function and thought they would get away with it by not saying anything directly. By doing this method I prevented their registrants from seeing another data entry field to select options which were really only for those who wanted to participate. (Basically one group said unless you lived in certain boundaries you could not do X.) This hiding ensured their members could not benefit from the program fully.

It was interesting because once this became known the person with this restrictive policy resigned from the sports group and the president and new person was all for the program.

I guess a few members complained they could not do X and when I was asked I explained why. Needless to say I then turned the code off.

I hope it all works as I had to dredge it up from an old document after I turned it off and stripped it out. As I also compact my code for faster loading I had not make it look pretty again.

If there is a problem let me know and I will look at it to see what I missed in typing it in above. Hope nothing was missed.

Alan
Calgary, Alberta, Canada - Using Appgini 5.50 -

User avatar
shasta59
AppGini Super Hero
AppGini Super Hero
Posts: 231
Joined: 2013-01-08 19:40
Location: Calgary, Alberta, Canada

Re: Use value in combo box to hide/show other fields - need help

Post by shasta59 » 2016-03-22 00:28

Correction to above

This is put into the your_templateDV.html file at the end of the other code which is there and before the closing script tag

Here is correct code - slight mistake - also another instruction I forgot to add which goes higher up in template.

You also need to add in the code where the actual combo box is shown is onfocusout="yourfunctionname()"

This is the combo box we want to watch - this is found :

<div class="col-xs-11" onfocusout="yourfunctionname()">
<%%COMBO(boxnameyouwantwatch)%%>

Code: Select all

function yourfunctionname(){  //this is your function name - call it what you want
   document.getElementById("elementid").addEventListener("blur",nextfunction, true); //elementid is the id of the field you watching, when it blurs then it runs the next function. This is actually watching a div element - found this easiest to do what I want
   
   function nextfunction(){ // this is called by the bluring of the above div element - means user left field
      if($j('#fieldid').val() == (17)){ //this value is the value of what is entered in the field referenced - as I only had one value to trap for I put it in. But you could have a call which gets the id and compares it to an array or whatever
         
      $j('#fieldtohide').hide(); //this tells it to hide this field if the value == 17
      } else {
         $j('#fieldtohide').show(); //otherwise it tells it to show it
      
   
   }
   }
   }  //the code below here is for firefox browsers. They do not like blur and this resolves it with the focusout routine
$j(document).ready(function(){ 
   $j('#fieldtohide').show(); // I make sure the field shows when the document was ready.
   setTimeout(function() { $j('#divname').focusout(); }, 100);  //I found the value of 100 seemed to work everytime in firefox
   });

I hope this is now clear as mud.
Calgary, Alberta, Canada - Using Appgini 5.50 -

peteraj
Posts: 27
Joined: 2016-02-05 12:25

Re: Use value in combo box to hide/show other fields - need help

Post by peteraj » 2016-04-06 16:18

Thank you very much! :-) I will try it as soon as I get some time

/Peter

Post Reply