Create Array from HTML to send via AJAX

Question

Im having a unusually hard time with this. If I have form that looks like this

HTML

<form id='logForm' method='post' action='seatingProcess.php'>

<span class='close' style='display:none' id='255' desk='9-4' deskval='2-3' changeType='REMOVE'></span>
<span class='close' style='display:none' id='255' desk='7-4' deskval='5-3' changeType='ADD'></span>
<span class='close' style='display:none' id='255' desk='8-4' deskval='8-3' changeType='CHANGE'></span>

<div class='btn btn-primary' type='submit' id='submit'>Submit</div>
</form>

What I want to happen is, when i click the button to submit the form, I want to have an array of the different elements in the span created so it can be sent via AJAX to process in PHP. How do you recommend I do this?

Also, this information will be dynamically created in this form based on user action. They will all be span's but will contain more or less the same attributes with a value attached to them. The idea is for php to receive the arrays and depending on what the attribute "changeType" says, it will generate the SQL script to perform that action. I may need help with this as well.

All I have for javascript. I dont have anything about making the array, thats what I need help with.The HTML above is an example output, but ill post one of the functions that generates the information. :

Javascript

    function remDeskId(){
    userObject = $dropObject.find('div.dragTest');
    userObjectChange = 'REMOVESEAT';
    userObjectID = userObject.attr('data-info');
    userObjectDeskID = userObject.attr('data-id');
    userObjectDeskIDVal = 0;
    $('form#logForm').append("<span class='close' style='display:none' id='"+userObjectID+"' desk='"+userObjectDeskID+"' deskval='"+userObjectDeskIDVal+"' changeType='"+userObjectChange+"'></span>");

    userObject.attr({"data-id":""}); //remove desk number for new user location
    userObject.appendTo('#userPool');

}

$('#submit').click(function(){
        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        //var formData = {

       // };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'seatingProcess.php', // the url where we want to POST
            data        : $('#logForm').serialize(), // our data object

        })
            // using the done promise callback
            .done(function(data) {

                // log data to the console so we can see
                console.log(data); 

                // here we will handle errors and validation messages
            });

        // stop the form from submitting the normal way and refreshing the page
        event.preventDefault();
    });

Thanks in advance

Answer 1

You can iterate through the spans and create an array.

var spans = $('#logForm span');
var data = [];

 $.each(spans, function(i, item){
     var newItem = {};
     newItem.id = $(item).attr('id');
     newItem.desk = $(item).attr('desk');
     newItem.deskval = $(item).attr('deskval');
     newItem.changeType = $(item).attr('changeType');

     data.push(newItem);
 });