Question

I am wondering if it is possible to make a submit form button take multiple actions. Currently I am using custom made form that will be sent to a Google Spreadsheet using AJAX. I am also using the Blueimp Jquery File Upload plugin. What I am hoping for is that onsubmit all relevant information can be sent to the Google Spreadsheet and the uploaded image sent to my server. I am open to any potential solution that does not involve Blueimp Jquery Upload and am using Google Spreadsheets to allow accessibility to the data for multiple collaborators.

I apologize for any details left out as I am not well versed in file uploads, but please ask and I will do my best to present any and all relevant information.

Google Spreadsheet submit code:

// Handle form submission
$('form').submit(function(e) {
    var button = $('input[type=submit]', this),
        data = $(this).serialize();`

    e.preventDefault();
    if (validate($(this))) {
        button.button('loading');
        $.ajax({
            type: 'POST',
            url: formUrl,
            data: data,
            complete: function() {
                button.button('reset');
                window.location = 'index.html#new';
            }
        });
    }

    function validate(form) {
        $('.control-group').removeClass('error');
        $('input, textarea', form).each(function() {
            var tag = $(this)[0].tagName.toLowerCase(),
                type = $(this).attr('type');

            // Validate radio buttons
            if (tag === 'input' && type === 'radio') {
                var name = $(this).attr('name');
                if ($('[name="' + name + '"]:checked').length < 1) {
                    $(this).parent().parent().parent().addClass('error');
                }
            }

            // Validate text fields
            if ((tag === 'input' && type === 'text') || tag === 'textarea') {
                if ($(this).val() === '' && !$(this).parent().hasClass('radio')) {
                    $(this).parent().parent().addClass('error');
                }
            }
        });

        if ($('.control-group.error').length < 1) return true;
        $('.control-group.error').length

        $('html, body').animate({
            scrollTop: $('.control-group.error').offset().top - 20
        }, 500);

        return false;
    }
});

Answer 1

If you have a form submission button (or any other input for that matter):

<button href="#" id="formButton" type="button">Submit</button>

Using JavaScript, you create a click event on the button to do the form submission:

$('#formButton').click(submitMultipleForms());

And then in your function you can then submit the forms. Each form should have an id:

function submitMultipleForms() {
       $("#form1").submit(function() { //Handler for form1 
                                     });
       $("#form2").submit(function() { //Handler for form2
                                     });
}