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

Navigation
2

I'm not able to add a data-state as I did with the remaining 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');
        });

It does not recognize the state, and I think it's doing something wrong. I wanted to put the status in pending. Is there an event that does it? I searched the deferred area but did not get the idea. Thank you.

    
asked by anonymous 12.12.2014 / 13:08

2 answers

1

There is no such thing as a state attribute in HTML standards as value , name and type , so jQuery saves what you want internally.

That is, what you are doing will work , but I suggest that these inputs be created using data- fields, ie : 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');

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

Note that these data- fields that jQuery inserts are not compatible with native JavaScript, meaning 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 it will not work.

To do this in pure JavaScript you can do with setAttribute .

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: link

    
12.12.2014 / 13:18
2

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

1st using jQuery.attr() 

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

2nd using jQuery.data() 

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

Documentation jQuery.data ()

    
12.12.2014 / 13:13
MySQL returning null wrongly - MYSQLI PHP Monetary unit with JSON