Grab Data from non form elements and send as POST using AJAX

Question

I am looking for an alternative solution to the way my form is being submitted right now. The problem is that the validation function does not work because I gave the submit button on the form an attribute of onclick=return(false) and added the following AJAX code to listen for the submit button being pressed.

jQuery("#edit-submit-order").click(function() {
        var orderForm = jQuery("#order-form-form").serialize();
        var orderTable = JSON.stringify(hot.getData());
        var extraOrderTable = JSON.stringify(hot2.getData());
        var formType = jQuery("input:radio[name=form-type]:checked").val();

        jQuery.ajax({
            type : "POST",
            url : '/sites/all/modules/order_form/post-order.php',
            data : orderForm + "&orderTable=" + orderTable + "&extraOrderTable=" + extraOrderTable + "&formType=" + formType + "&orderTotal=" + parseFloat(updatePricing()).toFixed(2).replace(/\d(?=(\d{3})+\.)/g, '$&,'),

            success : function(result) {
                if (result) {
                    jQuery('#order-form-form').empty();
                    jQuery('#order-form-form').append(result);
                    //jQuery("#order-form-form").html("<div class='success'>Submitted Order Form Successfully</div>");
                } else {
                    jQuery(".message").html("<div class='error'>" + result.message + "</div>");
                }
                jQuery(".message").children().fadeOut(5000);
            }
        });
    });

The orderTable and extraOrderTable are the elements I need to send with the POST request. They are part of an HTML table I am using called Hands on Table. It is a very nice excel like table editor. The getData() command returns an array of all values in the tables.

Ideally I would like to remove the onclick=return(false) from my submit button and have the order form submit using Drupal's AJAX method, making sure to validate the fields I marked as required but also submitting the table data in a single POST request. Can this be done or is the solution I have already made the best way to do it?

Answer 1

Hopefully this answer will help someone else looking for the same thing. I found a solution and it works great.

The way that I solved it was by creating two hidden elements with id's in my form. One hidden element for each table that I have in my form.

Below is how I created the hidden form element

$form['orderTable'] = array(
        '#type' => 'hidden',
        '#attributes' => array('id' => 'orderTable')
);

Below is how I created the container that holds the table and is used to generate the table from the Java Script file.

$form['middle']['order-table'] = array(
        '#type' => 'container',
        '#attributes' => array(
            'id' => array(
                'testing-table',
            ),
        ),
    );

The Excel like table that I used Handsontable has an excellent method called afterChange this gets fired after something on the form changes. So what I did is create another Java Script function that gets fired each time inside of the afterChange function.

 function updateHiddenFields() {
    var orderTable = JSON.stringify(hot.getData());
    jQuery("#orderTable").val(orderTable);
}

What this does if your not familiar with Java Script is turn the data from Handsontable into a JSON string and places it in the value field of the hidden element. By doing it this way all of the data is accessible when the form is submitted just like I wanted and I was able to use the validation function.