How can I add a tagname(data-state) to my Hidden input with attr?

Question

I am not able to add a data attribute(data-state) as I did with the other tag(value, type, name, etc) as shown in the following image:

 $(".clicka").on("click", function () {
        $('#calendartable .tdfull').each(function (k) {
            if ($(this).data("id")) {
                $('<input/>').attr({
                    type: 'hidden',
                    name: 'disponibilidade[' + k + ']',
                    value: $(this).data("id"),
                    state: $(this).data("pending"),
                }).appendTo('form');
            }
            $('<input/>').attr({
                type: 'hidden',
                name: 'disponibilidade[' + k + '].titulo',
                value: $(this).data("start") + ' - ' + $(this).data("end"),
                state: $(this).data("pending"),
            }).appendTo('form');
            $('<input/>').attr({
                type: 'hidden',
                name: 'disponibilidade[' + k + '].inicio',
                value: $(this).data("start"),
                state: $(this).data("pending"),
            }).appendTo('form');
            $('<input/>').attr({
                type: 'hidden',
                name: 'disponibilidade[' + k + '].fim',
                value: $(this).data("end"),
                state: $(this).data("pending"),
            }).appendTo('form');
        });

He doesn’t recognize the state, and I think he’s doing something wrong. I wanted to put the state in "pending". Is there any event that does? I searched for deferred but did not get the idea. Thank you.

Answer 1

To add an attribute you can do it in two different ways.

1º using jQuery.attr()

$('.elemento').attr('data-state', 'valor');

2º using jQuery.data()

$('.elemento').data('state', 'valor');

Documentation jQuery.date()

Answer 2

There is no attribution state in HTML standards as exists value, name and type, then jQuery keeps what he wants but internally.

That is to say, what you’re doing will work, but I suggest that these inputs are created using fields data-, that is to say: data-state.

An example would be:

        $('<input/>').attr({
            type: 'hidden',
            name: 'disponibilidade[' + k + '].fim',
            value: $(this).data("end"),
            'data-state': $(this).data("pending"),
        }).appendTo('form');

or using the jQuery method: .data():

        $('<input/>').attr({
            type: 'hidden',
            name: 'disponibilidade[' + k + '].fim',
            value: $(this).data("end")
        }).data('state', $(this).data("pending")).appendTo('form');

For later reading this value you can use the methods .attr('data-state') or .data('state').

Notice that these fields data- jQuery inserts are not compatible with native Javascript, that is to say that they may not be visible in HTML even though they are saved and can be read. But if you try to fetch via getAttribute won’t work.

To do this in pure Javascript can do with setAttribute.

I leave an example where I mix native JS with jQuery to make the code shorter, but the getter and Setter of the fields date is only in native JS.

Example:

var input = document.createElement('input');
input.setAttribute('data-state', $(this).data("pending"));
$(input).attr({
    type: 'hidden',
    name: 'disponibilidade[' + k + '].fim',
    value: $(this).data("end")
}).appendTo('form');

Example: http://codepen.io/anon/pen/GgZmBz