ProcessMaker Forum | BPM Workflow Simplified

workflow simplified
https://forum.processmaker.com/

Hide / Show based on selection

https://forum.processmaker.com/viewtopic.php?f=44&t=736404

Page 1 of 1

Hide / Show based on selection

Posted: Sun Feb 24, 2019 8:33 pm
by ebryant
I'm trying to hide / show fields based on selection from dropdown. Only the HEO shows when selected.
Below is the code I'm using:
Code: Select all
// HIDE OR SHOW HEO
function showOrHideHEOOps() {
  if ($('#Title').getValue() === 'HEO') {
       $("#HeoHire").show();
  }
  else {
       $("#HeoHire").hide();
       $("#ClassifiedTitle").hide();
       $("#FacultyHire").hide();
  }    
}

// HIDE OR SHOW FAC
function showOrHideFACOps() {
  if ($('#Title').getValue()[0] === 'FAC') {
       $("#FacultyHire").show();
  }
  else {
       $("#HeoHire").hide();
       $("#ClassifiedTitle").hide();
       $("#FacultyHire").hide();
  }    
}

// HIDE OR SHOW CLS
function showOrHideCLSOps() {
  if ($('#Title').getValue()[0] === 'CLS') {
       $("#ClassifiedTitle").show();
  }
  else {
       $("#HeoHire").hide();
       $("#ClassifiedTitle").hide();
       $("#FacultyHire").hide();
  }    
}

// INITIALIZE
showOrHideFACOps();
showOrHideHEOOps();
showOrHideCLSOps();


// UPDATE ON CHANGE
$('#Title').setOnchange(showOrHideFACOps);
$('#Title').setOnchange(showOrHideCLSOps);
$('#Title').setOnchange(showOrHideHEOOps);

Re: Hide / Show based on selection

Posted: Tue Feb 26, 2019 1:25 am
by amosbatto
Is "title" the ID of your dropdown box?
You should only have 1 setOnchange() per field. You have 3 for the "title" field.

Your code should look something like this:
Code: Select all
// HIDE OR SHOW 
function showOrHide(newVal, oldVal) {
  if (newVal == 'HEO') {
       $("#HeoHire").show();
  }
  else {
       $("#HeoHire").hide();
       $("#ClassifiedTitle").hide();
       $("#FacultyHire").hide();
  } 

  if (newVal == 'FAC') {
       $("#FacultyHire").show();
  }
  else {
       $("#HeoHire").hide();
       $("#ClassifiedTitle").hide();
       $("#FacultyHire").hide();
  }   
 
  if (newVal == 'CLS') {
       $("#ClassifiedTitle").show();
  }
  else {
       $("#HeoHire").hide();
       $("#ClassifiedTitle").hide();
       $("#FacultyHire").hide();
  }    
}

// INITIALIZE
showOrHide( $("#title").getValue(), '' );


// UPDATE ON CHANGE
$('#Title').setOnchange(showOrHide);

Re: Hide / Show based on selection

Posted: Wed Feb 27, 2019 1:13 am
by programerboy
Hi,
I have write a function for show and hide fields and you can use it in your forms:
Code: Select all
//show and hide function
//newValue: new value of field
//inputId: id of field
//inputValue: compare value/values
//inputsHide: the fields that must hide
//inputsShow: the fields that must show
//otherFunctions: call other functions on event
function show_hide_field(newValue, inputId, inputValue, inputsHide, inputsShow, otherFunctions){
	var evaluate = 1;
	if($.isArray(newValue)){
		for(var i=0; i<newValue.length;i++){
			if($.type(inputValue[i]) == 'string' && inputValue[i].indexOf('*') != -1){
				var temp = inputValue[i].split('*');
				var tempEvaluate = 0;
				for(var j=0; j<temp.length;j++){
					if(newValue[i] == temp[j]){
						tempEvaluate = 1;
						break;
					}
				}
				evaluate = tempEvaluate;
			}
			else if(newValue[i] != inputValue[i])
				evaluate = 0;
			if(evaluate == 0)
				break;
		}
	}
	else{
		if($.type(inputValue) == 'string' && inputValue.indexOf('*') != -1){
			var temp = inputValue.split('*');
			var tempEvaluate = 0;
			for(var j=0; j<temp.length;j++){
				if(newValue == temp[j]){
					tempEvaluate = 1;
					break;
				}
			}
			evaluate = tempEvaluate;
		}
		else if(newValue != inputValue)
			evaluate = 0;
	}
	
	if(evaluate == 1){
		for(var i=0; i<inputsHide.length;i++){
			$('#'+inputsHide[i]).hide();
			$('#'+inputsHide[i]).disableValidation();
		}
		for(var i=0; i<inputsShow.length;i++){
			$('#'+inputsShow[i]).show();
			$('#'+inputsShow[i]).enableValidation();
		}
	}
	else{
		for(var i=0; i<inputsHide.length;i++){
			$('#'+inputsHide[i]).show();
			$('#'+inputsHide[i]).enableValidation();
		}
		for(var i=0; i<inputsShow.length;i++){
			$('#'+inputsShow[i]).hide();
			$('#'+inputsShow[i]).disableValidation();
		}
	}
	
	if(otherFunctions == undefined)
		otherFunctions = [];
	for(var i=0; i<otherFunctions.length;i++){
		eval(otherFunctions[i]+'("call");');
	}
}


//example1 for set show and hide
function myInput5(type){
	if(type == undefined)
		type = 'all';
	
	//the field for set event
	var a4 = 'myInput5';
	//fields must hide
	var b4 = ['myInput6'];
	//fields must show
	var c4 = [];
	
	if(type == 'all'){
		$("#"+a4).setOnchange(function(newValue, oldValue) {
			show_hide_field(newValue, a4, 0, b4, c4);
		});
	}
	
	show_hide_field($('#'+a4).getValue(), a4, 0, b4, c4);
}


//example2 for set show and hide
function myInput1(type){
	if(type == undefined)
		type = 'all';
	
	//the field for set event
	var a5 = 'myInput1';
	//fields must hide
	var b5 = [];
	//fields must show
	var c5 = ['myInput2', 'myInput3'];
	
	if(type == 'all'){
		$("#"+a5).setOnchange(function(newValue, oldValue) {
			show_hide_field([newValue, $("#myInput4").getValue()], a5, [1, 2], b5, c5);
		});
	}
	
	show_hide_field([$('#'+a5).getValue(), $("#myInput4").getValue()], a5, [1, 2], b5, c5);
}

$("document").ready( function(){
	myInput5();
	myInput1();
});
Thanks

Re: Hide / Show based on selection

Posted: Wed Feb 27, 2019 2:32 pm
by ebryant
Thank you Amos B. Batto and Programerboy.

Amos unfortunately, only one CLS works properly.

Programerboy, I'll try your code next

Re: Hide / Show based on selection

Posted: Wed Feb 27, 2019 10:09 pm
by amosbatto
Turn on your web browser's debugger (press F12 on most web browsers) and see if you have JavaScript errors under the "Console" tab of the debugger.

If you can't figure it out, post the .json file for your Dynaform.

Re: Hide / Show based on selection

Posted: Thu Feb 28, 2019 10:07 am
by ebryant
Hello Amos,

I finally used the below code:
Code: Select all
// HIDE OR SHOW 
function showOrHide(newVal, oldVal){
  if(newVal == 'HEO') {
    $("#HeoHire").show();
    $("#ClassifiedTitle").hide();
    $("#FacultyHire").hide();
    $("#FunctionTitle").hide();
  }
  else if(newVal == 'FAC'){
    $("#FacultyHire").show();
    $("#HeoHire").hide();
    $("#ClassifiedTitle").hide();
    $("#FunctionTitle").hide();
  }
  else if(newVal == 'CLS'){
    $("#ClassifiedTitle").show();
    $("#FacultyHire").hide();
    $("#HeoHire").hide();
    $("#FunctionTitle").hide();
  }
  else if(newVal == 'FUN'){
    $("#FunctionTitle").show();
    $("#HeoHire").hide();
    $("#ClassifiedTitle").hide();
    $("#FacultyHire").hide();
  }
  else{
    $("#HeoHire").hide();
    $("#ClassifiedTitle").hide();
    $("#FacultyHire").hide();
    $("#FunctionTitle").hide();
  }
}
// INITIALIZE
showOrHide( $("#title").getValue(), '' );


// UPDATE ON CHANGE
$('#Title').setOnchange(showOrHide);
Your code was lacking the Else If

Thanks again

Re: Hide / Show based on selection

Posted: Thu Oct 14, 2021 10:21 am
by mhasgari
programerboy wrote: ↑Wed Feb 27, 2019 1:13 am Hi,
I have write a function for show and hide fields and you can use it in your forms:
Code: Select all
//show and hide function
//newValue: new value of field
//inputId: id of field
//inputValue: compare value/values
//inputsHide: the fields that must hide
//inputsShow: the fields that must show
//otherFunctions: call other functions on event
function show_hide_field(newValue, inputId, inputValue, inputsHide, inputsShow, otherFunctions){
	var evaluate = 1;
	if($.isArray(newValue)){
		for(var i=0; i<newValue.length;i++){
			if($.type(inputValue[i]) == 'string' && inputValue[i].indexOf('*') != -1){
				var temp = inputValue[i].split('*');
				var tempEvaluate = 0;
				for(var j=0; j<temp.length;j++){
					if(newValue[i] == temp[j]){
						tempEvaluate = 1;
						break;
					}
				}
				evaluate = tempEvaluate;
			}
			else if(newValue[i] != inputValue[i])
				evaluate = 0;
			if(evaluate == 0)
				break;
		}
	}
	else{
		if($.type(inputValue) == 'string' && inputValue.indexOf('*') != -1){
			var temp = inputValue.split('*');
			var tempEvaluate = 0;
			for(var j=0; j<temp.length;j++){
				if(newValue == temp[j]){
					tempEvaluate = 1;
					break;
				}
			}
			evaluate = tempEvaluate;
		}
		else if(newValue != inputValue)
			evaluate = 0;
	}
	
	if(evaluate == 1){
		for(var i=0; i<inputsHide.length;i++){
			$('#'+inputsHide[i]).hide();
			$('#'+inputsHide[i]).disableValidation();
		}
		for(var i=0; i<inputsShow.length;i++){
			$('#'+inputsShow[i]).show();
			$('#'+inputsShow[i]).enableValidation();
		}
	}
	else{
		for(var i=0; i<inputsHide.length;i++){
			$('#'+inputsHide[i]).show();
			$('#'+inputsHide[i]).enableValidation();
		}
		for(var i=0; i<inputsShow.length;i++){
			$('#'+inputsShow[i]).hide();
			$('#'+inputsShow[i]).disableValidation();
		}
	}
	
	if(otherFunctions == undefined)
		otherFunctions = [];
	for(var i=0; i<otherFunctions.length;i++){
		eval(otherFunctions[i]+'("call");');
	}
}


//example1 for set show and hide
function myInput5(type){
	if(type == undefined)
		type = 'all';
	
	//the field for set event
	var a4 = 'myInput5';
	//fields must hide
	var b4 = ['myInput6'];
	//fields must show
	var c4 = [];
	
	if(type == 'all'){
		$("#"+a4).setOnchange(function(newValue, oldValue) {
			show_hide_field(newValue, a4, 0, b4, c4);
		});
	}
	
	show_hide_field($('#'+a4).getValue(), a4, 0, b4, c4);
}


//example2 for set show and hide
function myInput1(type){
	if(type == undefined)
		type = 'all';
	
	//the field for set event
	var a5 = 'myInput1';
	//fields must hide
	var b5 = [];
	//fields must show
	var c5 = ['myInput2', 'myInput3'];
	
	if(type == 'all'){
		$("#"+a5).setOnchange(function(newValue, oldValue) {
			show_hide_field([newValue, $("#myInput4").getValue()], a5, [1, 2], b5, c5);
		});
	}
	
	show_hide_field([$('#'+a5).getValue(), $("#myInput4").getValue()], a5, [1, 2], b5, c5);
}

$("document").ready( function(){
	myInput5();
	myInput1();
});
Thanks

It would be nice if there was a description of the last argument of the main function, I mean the "otherFunctions" argument, or some examples of how to do that...
Is it possible to set text of a label in the form, according the selected option of a Radio, using this argument for example? If it is so, how it would be?

Re: Hide / Show based on selection

Posted: Sat Oct 16, 2021 11:02 am
by mhasgari
mhasgari wrote: ↑Thu Oct 14, 2021 10:21 am
programerboy wrote: ↑Wed Feb 27, 2019 1:13 am Hi,
I have write a function for show and hide fields and you can use it in your forms:
Code: Select all
//show and hide function
//newValue: new value of field
//inputId: id of field
//inputValue: compare value/values
//inputsHide: the fields that must hide
//inputsShow: the fields that must show
//otherFunctions: call other functions on event
function show_hide_field(newValue, inputId, inputValue, inputsHide, inputsShow, otherFunctions){
	var evaluate = 1;
	if($.isArray(newValue)){
		for(var i=0; i<newValue.length;i++){
			if($.type(inputValue[i]) == 'string' && inputValue[i].indexOf('*') != -1){
				var temp = inputValue[i].split('*');
				var tempEvaluate = 0;
				for(var j=0; j<temp.length;j++){
					if(newValue[i] == temp[j]){
						tempEvaluate = 1;
						break;
					}
				}
				evaluate = tempEvaluate;
			}
			else if(newValue[i] != inputValue[i])
				evaluate = 0;
			if(evaluate == 0)
				break;
		}
	}
	else{
		if($.type(inputValue) == 'string' && inputValue.indexOf('*') != -1){
			var temp = inputValue.split('*');
			var tempEvaluate = 0;
			for(var j=0; j<temp.length;j++){
				if(newValue == temp[j]){
					tempEvaluate = 1;
					break;
				}
			}
			evaluate = tempEvaluate;
		}
		else if(newValue != inputValue)
			evaluate = 0;
	}
	
	if(evaluate == 1){
		for(var i=0; i<inputsHide.length;i++){
			$('#'+inputsHide[i]).hide();
			$('#'+inputsHide[i]).disableValidation();
		}
		for(var i=0; i<inputsShow.length;i++){
			$('#'+inputsShow[i]).show();
			$('#'+inputsShow[i]).enableValidation();
		}
	}
	else{
		for(var i=0; i<inputsHide.length;i++){
			$('#'+inputsHide[i]).show();
			$('#'+inputsHide[i]).enableValidation();
		}
		for(var i=0; i<inputsShow.length;i++){
			$('#'+inputsShow[i]).hide();
			$('#'+inputsShow[i]).disableValidation();
		}
	}
	
	if(otherFunctions == undefined)
		otherFunctions = [];
	for(var i=0; i<otherFunctions.length;i++){
		eval(otherFunctions[i]+'("call");');
	}
}


//example1 for set show and hide
function myInput5(type){
	if(type == undefined)
		type = 'all';
	
	//the field for set event
	var a4 = 'myInput5';
	//fields must hide
	var b4 = ['myInput6'];
	//fields must show
	var c4 = [];
	
	if(type == 'all'){
		$("#"+a4).setOnchange(function(newValue, oldValue) {
			show_hide_field(newValue, a4, 0, b4, c4);
		});
	}
	
	show_hide_field($('#'+a4).getValue(), a4, 0, b4, c4);
}


//example2 for set show and hide
function myInput1(type){
	if(type == undefined)
		type = 'all';
	
	//the field for set event
	var a5 = 'myInput1';
	//fields must hide
	var b5 = [];
	//fields must show
	var c5 = ['myInput2', 'myInput3'];
	
	if(type == 'all'){
		$("#"+a5).setOnchange(function(newValue, oldValue) {
			show_hide_field([newValue, $("#myInput4").getValue()], a5, [1, 2], b5, c5);
		});
	}
	
	show_hide_field([$('#'+a5).getValue(), $("#myInput4").getValue()], a5, [1, 2], b5, c5);
}

$("document").ready( function(){
	myInput5();
	myInput1();
});
Thanks

It would be nice if there was a description of the last argument of the main function, I mean the "otherFunctions" argument, or some examples of how to do that...
Is it possible to set text of a label in the form, according the selected option of a Radio, using this argument for example? If it is so, how it would be?
I found it out!
...with declaring a variable like this, and passing as the sixth parameter to the main function...
Code: Select all
var d1 = ['if ($("#projectType").getControl()[0].checked == true) $("#titledAsProj").setText("Project"); else if ($("#projectType").getControl()[1].checked == true) $("#titledAsProj").setText("Activity");'];
All times are UTC-04:00
Page 1 of 1
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/