jQuery call function from a string [duplicate]

Question

Is it possible to call a function by using the strings ?

(i.e) I have a variable var target = 'next';. Using this string I want to call the jquery method next() . Should i use target + '()' (this is bit foolish) to call next() ?

I know it can be done using conditional statements. Since it is a string got from users, but it is difficult to use conditional statements for all that.

In my jQuery plugin, users will pass the value prev, siblings etc as options, so that the respective jQuery methods will be executed.

How do I implement this ?

Answer 1

You can use the bracket notation to access the member with a string containing the identifier:

var target = 'next';
$("foobar")[target]();    // identical to $("foobar").next()

Answer 2

If you're wanting to use jQuery, the answer is quite elegant. Because jQuery is an object (which can be accessed like an array) - you can use $("selector")[target]().

Examples:

const target = 'next';
jQuery("selector")[target]();

This will work if you know that you can trust the input. However, if you're not sure of this, you should check that the function exists before trying to run it otherwise you'll get an error.

const target = 'doesNotExist';
const fn = jQuery('selector')[target];
if (jQuery.isFunction(fn)) {
  fn[target]();
}

Answer 3

In my case I needed to get the value from a rel attribute and then parse it as a function, this worked for me.

$jq('#mainbody form').submit(function(e){
    var formcheck = $jq(this).attr('rel');
    if (typeof window[formcheck] === 'function'){
        formok = window[formcheck]();
        e.preventDefault();
    }
});
function maincheck(){
    alert("Checked");
    return false;
}

and the form

<div id="mainbody">
<form action="mainpage.php" method="post" rel="maincheck">
<input type="hidden" name="formaction" value="testpost">
<label>Field 1 <input type="text" name="field1" value="<?=$_POST['field1'];?>"></label><br>
<label>Field 2 <input type="text" name="field2" value="<?=$_POST['field2'];?>"></label><br>
<input type="submit" value="Submit Form">
</form>
</div>