Passing checkbox values to function

Question

I'm trying to get the values of all selected checkboxes and radio buttons from .js and pass it to a .jsx function by clicking on a button. The .jsx function contains 10 functions.

What i'm trying to achieve is that i take the strings from the arrays as function calls. Like

[value1, value2, value3....] to value1(); value2(); value3();

This is my code in the .js and .jsx:

//---------------------This is the .js part-----------------------------  

$("#button").on('click', function () {
        var csInterface = new CSInterface();
        var selected = new Array();
    
        $("input[type=checkbox]:checked").each(function () {
            selected.push(this.value);
        });
    
        $("input[type=radio]:checked").each(function () {
            selected.push(this.value);
        });
    
        if (selected.length > 0) {
            csInterface.evalScript("secondFunction(" + selected + ")");
        }   
    });

   //---------------------This is the .jsx part----------------------------- 
    
    function secondFunction(selected){
       
    //the functions below in this function have to be executed one after another
    
      function value1{...};
      function value2{...};
      function value3{...};
    };

Aurélien B. · Accepted Answer · 2020-09-01 11:20:53Z

2

Not sure if this is a proper way to do but, as far as I understand you want to be able to call a certain function from your "secondFunction" according to its parameter (array).

I guess you could do it by creating a function handler as a javascript object, like this :

EDIT : I edited the code so it looks a bit more like what you provided, so it is easier for you to understand. I also replace the isArray check method.

const secondFunction = (selectedArray) => {
    // So that function works if we provide a string instead of an array
    selectedArray = Array.isArray(selectedArray) ? selectedArray : [selectedArray];

    // Object containing all your functions with function name as key
    const functionsHandler = {
        opt1 : () => {
            console.log('opt1');
        },
        opt2 : () => {
            console.log('opt2');
        },
        opt3 : () => {
            console.log('opt3');
        },
        opt4 : () => {
            console.log('opt4');
        },
        opt5 : () => {
            console.log('opt5');
        }
    };

    selectedArray.forEach((selectedItem) => {
        // Check if the function we want is defined in our object
        if(functionsHandler.hasOwnProperty(selectedItem))
            functionsHandler[selectedItem]();
    })
}


$("#button").on('click', function () {
    // var csInterface = new CSInterface();
    var selected = new Array();

    $("input[type=checkbox]:checked").each(function () {
        selected.push(this.id);
    });

    $("input[type=radio]:checked").each(function () {
        selected.push(this.id);
    });

    if (selected.length > 0) {
        // csInterface.evalScript("secondFunction(" + selected + ")");
        secondFunction(selected);
    }   
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type="checkbox" id="opt1" name="opt1" class="options" />
<label for="opt1">opt1</label>

<input type="checkbox" id="opt2" name="opt2" class="options" />
<label for="opt2">opt2</label>

<input type="checkbox" id="opt3" name="opt3" class="options" />
<label for="opt3">opt3</label>

<input type="checkbox" id="opt4" name="opt4" class="options" />
<label for="opt4">opt4</label>

<input type="checkbox" id="opt5" name="opt5" class="options" />
<label for="opt5">opt5</label>

<button id="button">Click me</button>

edited Sep 1, 2020 at 11:20

answered Sep 1, 2020 at 0:57

Aurélien B.

5172 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Mr Heisenberg Over a year ago

Thank you for your answer. I don't fully understand your code. Just to be sure i made myself clear: I have 10 checkboxes. Each should fire a function in jsx after a button has been clicked. Normally this is easy by having 10 functions in jsx by something like: let opt1 = document.getElementById('opt1'); let opt2 = document.getElementById('opt2'); ... if (opt1.checked) { csInterface.evalScript('opt1()'); } if (opt2.checked) { csInterface.evalScript('opt2()'); } But i have to have one function in jsx containing 10 functions to be fired.

Aurélien B. Over a year ago

@MrHeisenberg I edited my answer with a snippet so you can have a better understanding about what I am talking about. If it is still not what you are trying to achieve feel free to comment.

Mr Heisenberg Over a year ago

What a wonderful piece of code. Thanks again! Maybe you got me wrong or i don´t understand it again. I need to execute functions in another function in another file. I edited my original post again. I see you having a hard time with me. Many thanks for your efforts.

Aurélien B. Over a year ago

I am really not understanding what you're trying to do that my code does not 🤔. To be able to call your 10 functions in your jsx from your "secondFunction" with a string as parameter (or array) you need to place them in an object as I did. If it is not what you're trying to achieve, please provide a more verbose example, or maybe someone will have a better luck than me at helping you aha.

Mr Heisenberg Over a year ago

Would you mind commenting your code which part hast to go in which file? I am somewhat confused today lol. As i write this i remember that the Photoshop API doesn´t understand ES6 / arrow functions. Have to google this.

Collectives™ on Stack Overflow

Passing checkbox values to function

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related