Use html attribute as javascript variable

Asked

Viewed 227 times

1

I’m developing a PHP system that uses an extension for dynamic forms, where I can click a button to add fields (EX: A request can have multiple items, where the items are the fields added dynamically).

The extension I use (I don’t think it’s necessary to mention, since the problem isn’t with it) has in its configuration a parameter where I can specify the field limit that can be added dynamically, can be infinite or not.

When the extension is rendered, it generates a snippet of javascript code, where in this snippet, there is a variable that contains a JSON with the previously established parameters, among them the parameter "limit", which is the parameter I want to change at runtime.

So far so good... The problem is that such a variable that contains JSON, has a random suffix in the name, for example dynamicform_5ed2807a or dynamicform_7fg2802c.

The name of this variable I can find out, because there is a div with the fixed class dynamicform-wrapper containing the attribute data-dynamicform, and the value of this attribute is exactly the variable name.

Therefore, I tried to do as follows, without success:

var x = $(this).attr('data-dynamicform');
console.log(x.limit); // Note que limit é o nome da 'key' que eu quero pegar o valor

In the example above, it returns Undefined, and should return an integer number, which is the field limit.

EDIT
Following link from Jsfiddle: https://jsfiddle.net/wuoo6Lpm/

How can I solve this problem?
Thank you very much!

javascript jquery html

  • you can show how the HTML of that element is data-dynamicform? If that’s a JSON you need to do var x = JSON.parse($(this).attr('data-dynamicform'));

  • Hello. Actually the html attribute looks like this: data-dynamicform="dynamicform_5ed2807a". JSON is the variable I want to access, which has the same attribute name.

  • So what do you expect to return with x.limit?

  • I hope to return the value of limit, which is in the javascript variable of the same name. See: var dynamicform_5ed2807a = {"widgetContainer":"dynamicform_wrapper","widgetBody":".container-encaminhamentos","widgetItem":".item-encaminhamento","limit":4}

  • Ah, I see. And this variable is created as? via PHP? can you change the way it is created?

  • It is created with random name, so I need to access it by the data-dynamicform attribute, because its value is the same variable name.

  • But can you control this Javascript in PHP? you can change to be for example dynamicforms.dynamicform_5ed2807a = {"widgetCont... ? Without var, but adding a new property to an object.

  • No, because in case of updating the extension in PHP, I lose all the changes I made. And it is updated via dependency manager.

  • ok... and this var is in the global scope at least?

  • Yes. It looks like this: https://jsfiddle.net/wuoo6Lpm/

Show 5 more comments

1 answer

1


If this variable that is generated by PHP is in the global scope you can access via object window with square brackets (square brackets).

You can access it like this:

var chave = $(this).attr('data-dynamicform');
var x = window[chave];
console.log(x.limit);

jsFiddle: https://jsfiddle.net/Lzmoh983/

  • It worked! Thank you very much Sergio!!

  • @jflizandro great! I asked many questions to better understand the problem :)

Browser other questions tagged javascript jquery html

You are not signed in. Login or sign up in order to post.