Using jQuery to gather data from HTML attributes

Question

I'm trying to put together a web form to mark an indeterminate number of employees as either present or absent. The page itself contains an arbitrary number of divs of the form:

<div class="employee" empID="9" presence="0">

The divs themselves contain the options, with 'presence' being changed to 1 or 2 using jQuery depending on the option selected.

When the 'submit' button is pressed, I'd like to convert this data into a parsable array of pairs of 'empID' and 'presence'. I've tried doing this with jQuery as follows:

$('.cic-button').click(function(){
        var submitData = {employees:[]};
        $('firedrill-employee').each(function(){
            submitData.push({
                employeeID: $(this).attr('empID'),
                presence: $(this).attr('presence')
            });
        });
    });

However, when this is done, the submitData variable is failing to populate. Any idea why? Am I going about this in the correct manner? Is what I'm trying to do even possible?

Many thanks.

I'd recommend not making up random attributes but instead using HTML5's custom data attributes. Ex: <div class="employee" data-empid="9" data-presence="0"> — j08691
– j08691, Commented Jan 20, 2015 at 18:44
What is $('firedrill-employee')? There's no such HTML tag. If that's supposed to be a class, you need . at the beginning. — Barmar
– Barmar, Commented Jan 20, 2015 at 18:46

1252748 · Accepted Answer · 2015-01-20 18:55:54Z

2

You have a few errors. Make the class that you iterate over the collection of "employee" not "firedrill-employee" and don't forget the dot to indicate it's a class. Reference the employees array withing the submitData object. You can't just push an element into an object.

$('.cic-button').click(function () {
    var submitData = {
        employees: []
    };
    $('.employee').each(function () {
        submitData.employees.push({
            employeeID: $(this).data('empID'),
            presence: $(this).data('presence')
        });
    });
    console.log(submitData);
});

Fiddle

answered Jan 20, 2015 at 18:55

1252748

15.5k35 gold badges118 silver badges244 bronze badges

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

Comments

Satinder singh · Accepted Answer · 2015-01-20 19:07:42Z

0

Js fiddle

$('.cic-button').click(function () {

    var submitData = [];

    $('.employee').each(function () {
        var self = $(this);
        // Create and obj 
        var obj = new Object(); // {};
        obj["employeeID"] = self.attr("empID");
        obj["presence"] = self.attr("presence");

        //push that object into an array
        submitData.push(obj);

        console.log(obj);
        console.log(submitData);
    });
});

answered Jan 20, 2015 at 19:07

Satinder singh

10.2k18 gold badges64 silver badges102 bronze badges

Comments

David Hughes · Accepted Answer · 2015-01-20 19:12:37Z

0

You need to specify the employee array as such:

$('.cic-button').click(function(){
    var submitData = {employees:[]}; // employees is an array within submitData...
    $('.firedrill-employee').each(function(){
        submitData.employees.push({ // ...so amend code here to push to the array, not submitData
            employeeID: $(this).attr('empID'),
            presence: $(this).attr('presence')
        });
    });
    console.log(submitData);    
});

See example JSFiddle - http://jsfiddle.net/yng1qb6o/

edited Jan 20, 2015 at 19:12

answered Jan 20, 2015 at 18:50

David Hughes

3701 silver badge12 bronze badges

6 Comments

charlietfl Over a year ago

what does specify the employee array as such mean? Seems like all you did was fix a syntax error ... but didn't say that

Artur Filipiak Over a year ago

It seems to me, that he need to loop $('.employee'), not $('.firedrill-employee') (according to the question and the code he posted)

David Hughes Over a year ago

@charlietfl - The original code attempted to push to an object (submitData), not an array (submitData.employees).

David Hughes Over a year ago

@phillip100 - Original code used a selector for firedrill-employee, I assume the HTML provided in the question was just an example so I kept the selector in his JS.

charlietfl Over a year ago

so instead of expecting people to be code diff tools, a simple explanation would help. Not a big deal but not always easy to spot differences

|

Collectives™ on Stack Overflow

Using jQuery to gather data from HTML attributes

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related