从 javascript 函数创建的表单向 php 提交表单数据

Question

我使用 javascript/jquery/ajax 和 php single page application w/ add document button

创建了一个单页应用程序

单击添加文档按钮后，由 javascript 函数创建的动态表单将显示 dynamic form created by javascript function

单击“添加文档”按钮后，必须将 FormData 提交到单独的 php 代码，但我无法提交 FormData，页面将刷新。

//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)    
                    {

                            
                    }         
               });
            }));

我曾尝试仅使用 php 直接提交表单，并且成功了。我还尝试使用表单和提交 FormData 的函数创建一个单独的页面，但它也有效。

能否请您告诉我要做什么或提供一些替代方法来创建我的单页应用程序。

Answer 1

如果您要将表单动态添加到 dom，您需要将提交处理程序更改为类似这样的内容。

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

在这里查看更多内容jQuery on event

Answer 2

我试了很多次你的代码，结果和你收到的一样，但只要稍加改动，你就可以实现你想要的

在标签表单中放置此属性：

<form onsubmit="yourFunction(event)" class='file' method='POST' action='' id='document' enctype='multipart/form-data'>

然后在 js 代码中创建你的函数，不要忘记输入 event.preventDefault();在里面

function yourFunction(event){
    event.preventDefault();
   //...
}

希望对你有所帮助

从 javascript 函数创建的表单向 php 提交表单数据

Submit FormData to php from a form created by javascript function

javascript

php

ajax

jquery

form-data