6

I have a button: 

<button class="btn btn-info continue">
    <i class="ace-icon fa fa-check bigger-110"></i>
    Continue                                        
</button>

Onclick:

$(".continue").click(function(e) {
    currForm = $(this).parents('form');
    e.preventDefault();
});

I can get the id pretty easily: currForm.attr('id');, but can I set the value of this id as a variable.

Something like php's variable variables:

$a = 'hello';
$$a = 'world';
echo $hello;

Edit: I don't want to change element's id. I want to get this ID and use it as a name for a javascript variable. For example, the element I provided above is in a form that has ID='example_id'. currForm.attr('id') will give me example_id and I want to set a variable example_id and assign a value to it.

var example_id = 'some value';

Ivanka Todorova
  • 9,964
  • 16
  • 66
  • 103
  • Your explanation is a little foggy. You can set the id via currForm.attr('id', 'your new id'); – Tyr Sep 24 '14 at 14:38
  • Oh, sorry! I edited my question. You can take a look now. – Ivanka Todorova Sep 24 '14 at 14:41
  • my first though was -> eval() ... – Cracker0dks Sep 24 '14 at 14:42
  • 4
    There should be no reason for you to create dynamic variables like that. This sounds like an [XY Problem](http://meta.stackoverflow.com/questions/66377/what-is-the-xy-problem). What are you actually trying to do? Why aren't you using an object property instead of a variable. –  Sep 24 '14 at 14:44
  • 3
    ...and FYI, you can use `this.form` to get the form so that you don't need to create a jQuery object and use `.parents()`. And then `this.form.id` will give you the ID. This will be many, many times faster than what you're currently doing. –  Sep 24 '14 at 14:46
  • Actually, you're right. Using an object is better. Didn't think of that. – Ivanka Todorova Sep 24 '14 at 14:46
  • 2
    @squint is correct. You should not need to do this. Please explain the actual purpose of your code. Also `$(this).closest('form')` is better than using `parents()` – iCollect.it Ltd Sep 24 '14 at 14:47
  • 1
    ...you should also be aware that you can associate data directly with elements using the `.data()` method. This seems to be what you're after since you were hoping to name the variable after the element's ID. I don't particularly like to use `.data()` for various reasons, but it may be suitable for whatever it is you need. –  Sep 24 '14 at 16:21

6 Answers6

6

Here's 3 options for you.

eval (not recommended)

You can use the Javascript function eval to achieve what you want. But be aware, this is not recommended (I emphasized it twice, hope you understood!).

Don't use eval needlessly!

eval() is a dangerous function, which executes the code it's passed with the privileges of the caller. If you run eval() with a string that could be affected by a malicious party, you may end up running malicious code on the user's machine with the permissions of your webpage / extension. More importantly, third party code can see the scope in which eval() was invoked, which can lead to possible attacks in ways to which the similar Function is not susceptible.

It would be used like that :

eval('var ' + varName + ' = "something";');

Window object notation (Better than eval, still not really recommended)

This method consists of using the object notation provided by JavaScript on the global window object. This is polluting the global window scope and can be overridden by other JS files, which is bad. If you want to know more about that subject, this is a good question: Storing a variable in the JavaScript 'window' object is a proper way to use that object?.

To use this technic, you would do something like:

window[varName] = something;
alert(window[varName]);

Using an object (recommended)

The best solution would be to create your own variable scope. For instance, you could create on the global scope a variable and assign an object to it. You can then use the object notation to create your dynamic variables. It works the same way as the window does :

var globalScope = {};

function awesome(){
    var localScope = {};
    globalScope[varName] = 'something';
    localScope[varName] = 'else';

    notSoAwesome();
}

function notSoAwesome(){
    alert(globalScope[varName]); // 'something';
    alert(localScope[varName]); // undefined
}
Karl-André Gagnon
  • 33,662
  • 5
  • 50
  • 75
2

You can do it using javascript object:

var currForm = $(this).parents('form');//form id="hello"

var obj = {};

obj[currForm.attr('id')] = 30;

console.log(obj.hello)
Ragnar
  • 4,393
  • 1
  • 27
  • 40
1

You can use and object to store your variables in:

var variables = {};

to add a variable just type:

variables[name] = value;

and to access the value:

variables[name]

Check it out here: jsFiddle

Button 2 reads the value of variables[formid] and button 1 sets formid to submitted

Johan Karlsson
  • 6,419
  • 1
  • 19
  • 28
0

Your best option for archieving what you really want is using eval(), like this:

eval("var " + currForm.attr('id');

Check this link ->

Dynamic Variables in Javascript

Schroed
  • 194
  • 10
0

Try one of the following:

$(this).attr(example_id, "value")

Or

window[ currForm.attr(id)] = 12;

Or

window[ this.id ] = 12;
neelsg
  • 4,802
  • 5
  • 34
  • 58
Chaolei
  • 1
  • 1
-1

Use eval (but not recommended):

var id = 'that_id';
eval(id+" = 'other id';");
alert(that_id); // results: 'other id'
Tyr
  • 2,810
  • 1
  • 12
  • 21