# 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.

```javascript
$('#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.

```javascript
$('#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](/cf-coding-practices/jquery-how-tos-and-hints.md#preventing-default-html-form-submit-action).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cffoundry.technology/cf-coding-practices/submit-handlers.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.