Running a javascript function from a string / data parameter

Question

I am trying to run a javascript function which is stored in a data attribute.

e.g.

<form data-success="test">...</form>
$('form').on('submit', function(e){
 e.preventDefault();
 var successFunction = $(this).data('success');
 // Run success function here
});
function test(){
 alert('run');
};

Is this possible or is there a better solution?

• Adrien Gorrell: Please be a little bit clearer. I don't see any reason for this to happen given your example.
• Indi: eval("string function") is your friend but not recommended.

Answer 1

Why are you storing application logic in your DOM in the first place? Why not store the function in your backing business logic in JavaScript?

This will prove to be a maintainability issue. Do not do this, instead store your functions in code and separate the logic of your presentation from what happens when it runs.

The simplest way is to classify your form and run a function accordingly, a better approach could be using something like an MV* pattern but let's not diverge. Here is the simplest solution I could think of without storing data attributes. This still does not do proper separation of concerns but it is a lot simpler than a data attibute.

...

JavaScript with jQuery:

/now we select by class, and not just any form
$('.successForm').on('submit', function(e){
  e.preventDefault();
 test();
});
function test(){
  alert('run');
};

^{THAT said, it can be done. eval($(this).data("success")) - please don't do this though, this bit is just here for completeness}

• JJJ: You don't necessarily need eval: window[$(this).data("success")]()
• Matt Pawley: I am creating a private system and it has a load of forms that do pretty much the same thing except the success function differs per form.
• Benjamin Gruenbaum: @Juhana That's clever, but pretty much the same in my opinion, you're still taking a string of code and evaluating it.
• Benjamin Gruenbaum: @MattPawley If it's a whole system please do not use data attributes. Have JavaScript objects backing the system. Selecting based on classes is a primitive approach to differentiate the function based on the form class. I hate to suggest a library, but have you considered something like KnockoutJS or AngularJS to handle the basic parts of separation of concerns for you? If this is something that has to repeat a lot of times in your code, the command pattern in Knockout might really help you.
• Benjamin Gruenbaum: This is why we can't have nice things :(