从javascript函数创建的表单提交FormData到php
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从javascript函数创建的表单提交FormData到php相关的知识,希望对你有一定的参考价值。
我使用javascript / jquery / ajax和php single page application w/ add document button创建了一个单页面应用程序
单击添加文档按钮后,由javascript函数创建的动态表单将显示dynamic form created by javascript function
单击“添加文档”按钮后,表单数据必须提交到单独的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,但它也有效。
你能告诉我做什么或提供一些替代方法来创建我的单页应用程序。
答案
如果您正在将表单动态添加到dom,则需要将提交处理程序更改为此类。
$(function () {
$(document).on('submit', '#document', function (e) {
//do stuff
});
}
在这里查看更多jQuery on event
另一答案
我多次尝试你的代码,结果和你收到的一样,但是只需做一点改变就可以达到你想要的效果
在标签表单中放置此属性:
<form onsubmit="yourFunction(event)" class='file' method='POST' action='' id='document' enctype='multipart/form-data'>
然后在js代码中创建yourFunction,并且不要忘记放入event.preventDefault();在里面
function yourFunction(event){
event.preventDefault();
//...
}
我希望它会对你有所帮助。
以上是关于从javascript函数创建的表单提交FormData到php的主要内容,如果未能解决你的问题,请参考以下文章
无法在 Firefox 上从 Javascript 提交表单
HTML: JavaScript: 阻止表单提交和调用 Javascript 函数