CODEWITHSUNDEEP
javascriptjquery
djb212
djb212

Reputation: 13

Using jQuery to gather data from HTML attributes

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.

Upvotes: 1

Views: 133

Answers (3)

David Hughes
David Hughes

Reputation: 370

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/

Upvotes: 0

Satinder singh
Satinder singh

Reputation: 10208

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);
    });
});

Upvotes: 0

1252748
1252748

Reputation: 15369

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

Upvotes: 2

Related Questions