4

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?

  • Hey would you mind showing your form code? It would be clear if you would do that but your question is some what related to this. drupal.stackexchange.com/questions/158303/… – Eliyah May 20 '15 at 6:45
  • @AlyssaGono I just answered the question with my method for solving the problem. – Yamaha32088 May 20 '15 at 12:19
3

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.