Hide / Show based on selection

Questions and discussion about developing processes and programming in PHP, JavaScript, web services & REST API.
Forum rules: Please search to see if a question has already asked before creating a new topic. Please don't post the same question in multiple forums.
 Reply
User avatar

Hide / Show based on selection

By ebryant
-  Sun Feb 24, 2019 8:33 pm #823076
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);
User avatar

Re: Hide / Show based on selection

By amosbatto
-  Tue Feb 26, 2019 1:25 am #823094
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);
User avatar

Re: Hide / Show based on selection

By programerboy
-  Wed Feb 27, 2019 1:13 am #823119
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
User avatar

Re: Hide / Show based on selection

By amosbatto
-  Wed Feb 27, 2019 10:09 pm #823139
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.
User avatar

Re: Hide / Show based on selection

By ebryant
-  Thu Feb 28, 2019 10:07 am #823161
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

By mhasgari
-  Thu Oct 14, 2021 10:21 am #829563
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

By mhasgari
-  Sat Oct 16, 2021 11:02 am #829565
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");'];
 Reply
 Return to “Developing processes & programming”
Powerful 1XBet Clone Script: Start Your Betting Platform in No Time

A 1xbet clone script is a pre-designed software so[…]

READ MORE
Effortless Online Betting Business: Start with a Ready-Made 4Rabet Clone Script

4rabet clone script is enabling entrepreneurs to e[…]

READ MORE
Streamline Your Crypto Casino Launch: Parimatch clone script a Customizable Solutions for Entreprene

Parimatch clone script is enabling entrepreneurs t[…]

READ MORE
Top Features of Cryptocurrency Wallet in 2024.

In the world of cryptocurrency, a wallet is an app[…]

READ MORE
VIEW MORE TOPICS