Submit FormData to php from a form created by javascript function

Question

I have created a single page application using javascript/jquery/ajax and php single page application w/ add document button

Once I click the add document button, a dynamic form created by a javascript function will display dynamic form created by javascript function

The FormData must be submited to a separate php code once I click the Add Document button, but I can't submit the FormData and the page will refresh.

//function that will create a form
function addDocument(obj){
        var category=obj.value;
        var btnId=obj.id;
        console.log(obj.id);
            $('.centercon').html("<div class='maincontent'></div>"+
            "<div class='filecontent'><h1></h1></div>");

            $('.filecontent').html("<i class='fa fa-folder-o'></i>"+category+"/..."+
            "<form class='file' method='POST' action='' id='document' enctype='multipart/form-data'>"+
            "<input type='hidden' name='category' value='"+category+"'/>"+
            "<input type='hidden' name='buttonID' value='"+btnId+"'/>"+
            "<button class='btn btn-success adddocument' type='submit'>Add Document</button>"+
            "<div class='row'><div class='col-lg-4'><input type='text' class='form-control' name='docuName' placeholder='Document Name'></div>"+
            "<div class='col-lg-4'><input type='text' name='designate' class='form-control' placeholder='Designation'></div>"+
            "<div class='col-lg-4'><input type='text' name='addInfo' class='form-control' placeholder='Additional Details'></div></div>"+
            "<input type='file' class='form-control fileInput' name='document' placeholder='Additional Details' onchange='readURL(this);'><hr>"+
            " <img id='previewDocument' src='#' width='100%' alt='Preview Document'/></form>");
        }

//function for submitting a FormData once the Add Document button was pressed
$("#document").on('submit',(function(e) {
                e.preventDefault();  
                $.ajax({
                    url: "/main.php",   	
                    type: "POST",      				
                    data:  new FormData(this), 		
                    contentType: false,       		
                    cache: false,					
                    processData:false,  			
                    success: function(data)  		
                    {

                            
                    }	        
               });
            }));

I have tried to submit a form directly using only php and it is works. I also tried to create a separate page with the form and the function to submit the FormData but it also works.

Can you please tell me what do or give some alternative way to create my single page application.

Answer 1

If you're dynamically adding the form to the dom, you'll want to change your submit handler to something like this.

$(function () {
    $(document).on('submit', '#document', function (e) {
        //do stuff
    });
}

See more here jQuery on event