Submit Handlers

CF Foundry typically uses two different jQuery .on('submit') handlers for modal forms, depending on if the form includes a file form field. In both cases, the preventDefault() function is called to prevent the form in the modal from being handled via the standard HTML form submission process. Additionally, both

Standard Submit Handler

The standard handler uses the jQuery .post() and .serialize() to submit the form data to a specific .cfm file that acts as the controller to process the data. Typically we return a simple true/false (0/1) results that can be used to trigger fail/success messages in the associated modal, providing direct user feedback. An example of this standard handler is shown below.

$('#accessForm').on('submit', function(e) {
    e.preventDefault();
    $.post('inc/handlers/accessUpdate.cfm',$("#accessForm").serialize(),function(data,status){ 
        if(data == 1) {
            //we successfully forwarded the candidate
            $('#successMessageAccess').show(); 
        } else {
            //login failed - post failure and reload login form
            $('#failureMessageAccess').show();
        }
    }); 
    return false;
});

File Field Submit Handler

The file field handler uses the same .on('sumbit') jQuery listener function, but instead of the jQuery .post(), the data submission to the controller file is handled via an .ajax() call. The "async" (asynchronous processing) is disabled to prevent the submission of the form data in the background while javascript/page execution continues. We desire a synchronous controller call so we can get success/failure feedback to be displayed in the modal. Additionally, instead of serializing the data using the standard jQuery .serialize() call, we use the FormData() object to create the key/value pairs for the form fields. FormtData() will support the multipart/form-data encoding type, including the file form field whereas the normal jQuery .serialize() wont. An example of this file field handler is shown below.

$('#newPhotoForm').on('submit', function(e) {
    e.preventDefault();
    $('#pleaseWaitMessage').show(); 
    var postData = new FormData($("#newPhotoForm")[0]);	
    $.ajax({
        url: 'inc/handlers/uploadphoto2.cfm',
        type: 'POST',
        async:false,
        data: postData,
        processData:false,
        contentType:false,
        success: function(data) {	
            $("#myPic").load(location.href+" #myPic>*","");
            $('#pleaseWaitMessage').hide();
            $('#successMessageNewPhoto').show(); 
        },
        failure: function(data) {
            $('#pleaseWaitMessage').hide();
            $('#failureMessageNewPhoto').show();
        }
    });
    }); 
    return false;
});

For more on the preventDefault() function, click here.