Dynamically create javascript values with given data-attributes?

Question

I have build an dynamic ajax function that saves data-xxx-values of elements to process the data. However I want to shorten this code which takes values depending on the ajax-request I want to process:

var data_form = $(element).attr('data-form');
var data_index = $(element).attr('data-index');
var data_hide_error = $(element).data('hide-error');
var data_disable_blur = $(element).data('disable-blur');
var data_hide_success = $(element).data('hide-success');

in a way that I only have one or two lines of code where I check which data-values are given in the element and if there is one data-value, I want to create a variable with that exact name.

For example: I click on this anchor <a href="#" data-index="1" data-form="#registerForm">send</a> and my function would create the variables var data_index = 1; and var data_form = '#registerForm'; automatically.

How could I achieve this?

Please elaborate. Your question is not clear. Also you have $(element).attr('data-form'); when $(element).data('form'); will suffice — mplungjan
– mplungjan, Commented Nov 2, 2016 at 13:18
I know, that was just an example. Also I stated my question very precisely. I want to save the data-attribute-values in a javascript variable if there is a data-attribute-value of a specific data-attribute. And this variable should have the same name as the data-attribute. — AlexioVay
– AlexioVay, Commented Nov 2, 2016 at 13:20
You can use $(element).data(); to get all data- attributes from element as object — Andrey
– Andrey, Commented Nov 2, 2016 at 13:21

mplungjan · Accepted Answer · 2016-11-02 13:22:53Z

2

Perhaps you meant this: Using .data() will return all data-attributes in one object to use in the function that you call

$(function() {
  $("a").on("click",function(e) {
    e.preventDefault();
    console.log($(this).data())
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<a href="#" data-index="1" data-form="#registerForm">send</a>

answered Nov 2, 2016 at 13:22

mplungjan

180k29 gold badges183 silver badges246 bronze badges

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

1 Comment

AlexioVay Over a year ago

Thank you! I didn't know this.

Collectives™ on Stack Overflow

Dynamically create javascript values with given data-attributes?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related