How to pass parameters to event

Forms
1

Hi,

I want to call a generic function on a 'change' event, and want to pass parameters with it.

Following does not seem to work

function myShowHideSection(myEvent) {
    console.log("function: myShowHideSection");
    console.log("Field_0015: " + fd.field('Field_0015').value);
    
    console.log(myEvent.data.param1);
    console.log(myEvent.data.param2);
    
    if(fd.field('Field_0015').value == 'neen') {
         $('.sectionCorrespondentieAdres').show();
    }
    else {
         $('.sectionCorrespondentieAdres').hide();
    }
}

// Calling showHideSection when the user changes the field
fd.field('Field_0015').$on('change',{param1: "Hello", param2: "World"},myShowHideSection);

// Calling showHideSection on form loading
myShowHideSection();

because the $on function expects a function and not parameters
Anybody a solution for this?

kind regards,
Bart

2

Dear @bartplessers,
An interesting question. How about a workaround like this?

fd.field('Field_0015').$on('change', function(value) {
    var myEvent = {param1: "Hello", param2: "World"};
    myShowHideSection(myEvent);
});
3

Hi Nikita,

thanx for reply, however this is not a real solution.
The main purpose for this question is how I could implement a generic function with parameters that shows/hides a section based on the value of another field.
So, if a fieldName matches a fieldValue, than show the section with sectionName

With you suggestion, I could come to something like

fd.spRendered(function() {

    function myShowHideSection(fieldName, fieldValue, sectionName) {
        console.log("function: myShowHideSection");
       
        
        console.log("fieldName: " + fieldName);
        console.log("fieldValue: " + fieldValue);
        console.log("sectionName: " + sectionName);
        
        if(fd.field(fieldName).value == fieldValue) {
             $('.' + sectionName).show();
        }
        else {
             $('.' + sectionName).hide();
        }
    }


    var fieldName = 'Field_0015';


    // Calling showHideSection when the user changes the field 
    fd.field(fieldName).$on('change', function() {
        var fieldName = 'Field_0015';
        var fieldValue = 'neen';
        var sectionName = 'sectionCorrespondentieAdres';
        myShowHideSection(fieldName, fieldValue, sectionName);
    });
    
    // Calling showHideSection on form loading
    var fieldName = 'Field_0015';
    var fieldValue = 'neen';
    var sectionName = 'sectionCorrespondentieAdres';
    myShowHideSection(fieldName, fieldValue, sectionName);

However, as you can see, I have to define fieldName, fieldValue and sectionName on 2 different places which can lead to errors.

2021-03-09_13-27-24
2021-03-09_13-27-24516×578 25.1 KB

Do you maybe have a solution where I can define my parameters and passing them to the generic myShowHideSection function

Thus something like

var fieldName = 'Field_0015';
var fieldValue = 'neen';
var sectionName = 'sectionCorrespondentieAdres';


// Calling showHideSection when the user changes the field 
fd.field(fieldName).$on('change', myShowHideSection(fieldName, fieldValue, sectionName) );

// Calling showHideSection on form loading
myShowHideSection(fieldName, fieldValue, sectionName);

but this seems not to work.

thanx in advance!
B

4

Dear @bartplessers ,
What's the issue here again? I've just defined the variables inside the function as an example, if you have the variables defined outside of the change event's function, you can use it like this:

// Calling showHideSection on form loading
var fieldName = 'Field_0015';
var fieldValue = 'neen';
var sectionName = 'sectionCorrespondentieAdres';
myShowHideSection(fieldName, fieldValue, sectionName);

// Calling showHideSection when the user changes the field 
fd.field(fieldName).$on('change', function() {
    myShowHideSection(fieldName, fieldValue, sectionName);
});
5

@Nikita_Kurguzov ,
indeed. Willdo! I'm not a big fan of global variables, but I was blinded by my own complexity :slight_smile:

Thanx for helping me out!

grtz
B

6

ok, for the record, here the full code:

    // --------------------------------------------------------------------------------------
    // function showSection(fieldName, fieldValue, sectionName)
    // --------------------------------------------------------------------------------------
    function showSection(fieldName, fieldValue, sectionName) {
        logTxt("---------------------------------------------------");
        logTxt("FUNCTION: showSection(" + fieldName + ", " + fieldValue + ", " + sectionName + ")" );
        logTxt("  fieldName: " + fieldName);
        logTxt("  fieldValue: " + fieldValue);
        logTxt("  sectionName: " + sectionName);
        
        if(fd.field(fieldName).value == fieldValue) {
             $('.' + sectionName).show();
        }
        else {
             $('.' + sectionName).hide();
        }
    }



    // --------------------------------------------------------------------------------------
    // function logTxt(content)
    // --------------------------------------------------------------------------------------
    function logTxt(content) {
    	var newDate = new Date();
    	var dateString = newDate.toISOString()
    	var str= "[ICTS " + dateString + "] " + content;

        //log to console
        console.log(str);

        // log to html
        // var str= '\r\n' + str;
    	// document.getElementById("myLog").innerText += str;
    };



    // --------------------------------------------------------------------------------------
    // function logRaw(content)
    // --------------------------------------------------------------------------------------
    function logRaw(content) {
    	var newDate = new Date();
    	var dateString = newDate.toISOString()
    	var str= "[ICTS " + dateString + "] ";
    	console.log(content);
    };



    // --------------------------------------------------------------------------------------
    // MAIN ACTIONS
    // --------------------------------------------------------------------------------------

    var fieldName = 'myChoice';
    var fieldValue = 'ja';
    var sectionName = 'mySection';

    // Calling showHideSection on form loading
    showSection(fieldName, fieldValue, sectionName);

    // Calling showHideSection when the user changes the field 
    fd.field(fieldName).$on('change', function(){showSection(fieldName, fieldValue, sectionName); });
    
        
});