Отправить FormData в php из формы, созданной функцией javascript
Я создал одностраничное приложение, используя javascript/jquery/ajax и php одностраничное приложение с кнопкой добавления документа.
Как только я нажму кнопку добавления документа, динамическая форма, созданная функцией javascript, отобразит динамическая форма, созданная функцией javascript
Данные формы должны быть отправлены в отдельный php-код, как только я нажму кнопку «Добавить документ», но я не могу отправить данные формы, и страница обновится.
//function that will create a form
function addDocument(obj){
var category=obj.value;
var btnId=obj.id;
console.info(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, но это также работает.
Не могли бы вы рассказать мне, что делать или дать какой-то альтернативный способ создать мое одностраничное приложение.
FormData будет отправлен в отдельный php-код для mysql db.
Вы имеете в виду, что это то, что вы хотите, чтобы произошло. Прямо сейчас, я предполагаю, вы нажимаете кнопку, и ничего не происходит?
Единственный вопрос, который вы задаете, касается альтернативного способа создания одностраничного приложения. Вам нужно конкретно указать, что он делает в настоящее время и что вы хотели бы, чтобы он делал.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Если вы динамически добавляете форму в дом, вам нужно изменить обработчик отправки на что-то вроде этого.
$(function () {
$(document).on('submit', '#document', function (e) {
//do stuff
});
}
Подробнее здесь jQuery по событию
Я склонен всегда использовать $(document).on, потому что большая часть контента, который я создаю, является динамичным и никогда не выходит из строя! Удачного кодирования!
Я пробовал ваш код много раз, и результат был таким же, как и вы, но с небольшим изменением вы можете достичь того, чего хотите
в форме тега поместите этот атрибут:
<form onsubmit = "yourFunction(event)" class='file' method='POST' action='' id='document' enctype='multipart/form-data'>
затем сделайте свою функцию в коде js и не забудьте поставить event.preventDefault(); в этом
function yourFunction(event){
event.preventDefault();
//...
}
Я надеюсь, что это поможет вам.
Что конкретно происходит, когда вы отправляете?