coldfusioncfform

How to submit a CFInput type=file within a CFDiv container


I am submitting a file in a cfdiv container, but the value of the file is not submitting to the processing page. If I submit the file outside of the cfdiv, it sees the file value. However, if the file is inside a cfdiv or div container, the form field is undefined. I have also added the enctype="multipart/form-data" to the cfform, but it is still not working.

UPDATE:

This is the first page (index.cfm)

<div  name="loadcontainer" id="loadcontainer">
    <cfinclude template="homepage.cfm">
</div>

The homepage.cfm

<cfform name="school_create"   id="school_create" 
      action="pro_create_school.cfm"    
      enctype="multipart/form-data"  
      method="post">

    <cfinput size="50" type="file" id="school_logo" name="school_logo">
    <button  type="submit">Save</button>
</cfform>

When the save button is clicked, it doesn't see the form.school_logo value in the action processing page.

I have also tried using a normal form and input, instead of a cfform/cfinput, but the form is being loaded into another tab when submitted, instead of the div container.


Solution

  • I was able to Submit the form both the <cfinput type="file"..../> and other form field in the form with ajax.

    <script>
                            function validateForm() {
                                var x = document.forms["add_academic_year"]["start_year"].value;
                                var y = document.forms["add_academic_year"]["end_year"].value;
                                if (x == null || x == "" || y == null || y == "") {
                                    alert("Start Year and End Year Must be Selected");
                                    return false;
                                }
                                if (y <= x) {
                                    alert("End Year must be greater than Start Year ");
                                    return false;
                                }
    
                console.log("submit event");
                var fd = new FormData(document.getElementById("add_academic_year"));
                $.ajax({
                  url: "pro_academic_year.cfm",
                  type: "POST",
                  data: fd,
                  enctype: 'multipart/form-data',
                  processData: false,  // tell jQuery not to process the data
                  contentType: false   // tell jQuery not to set contentType
                }).done(function( response ) {
                    // display response in DIV
                    $("#loadcontainer").html( response.toString());
                })
               .fail(function(jqXHR, textStatus, errorMessage) {
                    // display error in DIV
                    $("#outputf").html(errorMessage);
                })            
                return false;
    
                            }
                            </script>