将多个动态表单存储到对象中并使用jquery post方法发布和上传
Posted
技术标签:
【中文标题】将多个动态表单存储到对象中并使用jquery post方法发布和上传【英文标题】：Store multiple dynamic form into object and post and upload using jquery post method 【发布时间】：2017-06-28 23:39:33 【问题描述】：我有一个动态表单，当用户按下选项卡或转到下一个选项卡时，用户在表单 1 中输入数字时会创建一个动态表单，它将在表单 1 下方创建一个动态表单，用户可以输入数据和日期并附加文件.
每次用户在表单 1 中输入一个数字并按 Tab 键时，表单 1 下方都会有一个动态表单 2，用户可以输入数据，并且应该保持直到用户填写表单 1 的所有字段及其表单 2 附件数据.
我已经设法使用 jquery 创建了它的动态过程，但我面临的问题是我无法保存此动态表单数据，正如您所见，我尝试获取数组数据，但当我尝试获取数组数据时它们为空使用控制台查看检查。
我想以这种方式保存这些数据：form 1 : textfield 1 -> hasmany -> form 2 (textfield, date, file) 然后将此数据发布到 php 文件以保存和上传文件。
任何想法或解决方案如何做到这一点？
jQuery 部分：
$(function ()
$('#general').change(function ()
extracted('general', 'general : ');
);
$('#in_uni_level').change(function ()
extracted('in_uni_level', 'in uni level : ');
);
$('#in_section_level').change(function ()
extracted('in_section_level', 'in section level : ');
);
$('#in_country_level').change(function ()
extracted('in_country_level', 'in country level : ');
);
function extracted(selection, Gtitle)
var brief = [];
var contributor = [];
var datepick = [];
var file = [];
$('#dynamic_table').find('[name=brief]').each(function ()
brief.push(this.value);
);
$('#dynamic_table').find('[name=contributor]').each(function ()
contributor.push(this.value);
);
$('#dynamic_table').find('[name=datepick]').each(function ()
datepick.push(this.value);
);
$('#dynamic_table').find('[name=file]').each(function ()
file.push(this.value);
);
console.log(brief, contributor, datepick, file);
// $("#dynamic_table").empty();//clear dynamic table data each time focus change
console.log($('#' + selection).val());
var count = $('#' + selection).val();
if (count > 0)
var nextStep = $(document.createElement('tbody'));
var Dynamic_form_header =
'<tr>' +
'<th>' + Gtitle + '</th>' +
'<th></th>' +
'<th></th>' +
'<th></th>' +
'</tr>' +
'<tr>' +
'<th>Short Brief</th>' +
'<th>Contributers count</th>' +
'<th>date</th>' +
'<th>Related doc</th>' +
'</tr>';
var Dynamic_form_body = '';
for (var i = 0; i < count; i++)
Dynamic_form_body +=
'<tr>' +
'<td><input type="text" name="brief[]" id="brief" ' +
'</td>' +
'<td><input type="text" name="contributor[]" id="contributor"' +
'</td>' +
'<td><input type="text" name="datepick[]" class="datepicker"' +
'</td>' +
'<td><input type="file" name="file[]" id="doc"' +
'</td>' +
'</tr>';
nextStep.html(Dynamic_form_header + Dynamic_form_body);
nextStep.appendTo("#dynamic_table");
// default
$('#dynamic_table').live('click', function ()
$('.datepicker').datepicker();
);
$("#Submit_form").click(function ()
$.post("Requests/spc.php", //Required URL of the page on server
// Data Sending With Request To Server
Save_Form: true,
brief: brief,
contributor: contributor,
datepick: datepick,
file: file,
,
function (response) // Required Callback Function
//======== disable loading for onclick event ==========
$("#loading_gif").hide();
$("#add_user_btn").removeAttr('disabled');
//======== disable loading for onclick event ==========
//$("#Response").text(response);
if (response == "save")
$("#Response").text("ارسال دعوتنامه با موفقیت صورت گرفت.").css(color: 'green');
);
);
);
HTML 部分：
<form id="form" method="post" action=""
enctype="multipart/form-data">
<table class='styled-table' cellspacing='0'
border='1'>
<tr>
<td>
<label for="general">general</label>
<div class="cleaner h10"></div>
<label for="in_uni_level">in uni level</label>
<div class="cleaner h10"></div>
<label for="in_section_level">in section level</label>
<div class="cleaner h10"></div>
<label for="in_country_level">in country level</label>
<div class="cleaner h10"></div>
</td>
<td>
<input type="text" id="general"
name="general"/>
<div class="cleaner h10"></div>
<input type="text" id="in_uni_level"
name="in_uni_level"/>
<div class="cleaner h10"></div>
<input type="text" id="in_section_level"
name="in_section_level"/>
<div class="cleaner h10"></div>
<input type="text" id="in_country_level"
name="in_country_level"/>
<div class="cleaner h10"></div>
</td>
</tr>
</table>
<div class="cleaner h30"></div>
<table class='styled-table' id="dynamic_table"
cellspacing='0' border='1'>
</table>
</form>
<button id="Submit_form">Submit</button>
快照：
【问题讨论】：
【参考方案1】：您遇到的问题是您没有在第二个表单上为每个字段调用 change 函数，因此它可以捕获数据以将其推送到数组中。我稍微更改了您的代码，但似乎正在做您想做的事情。我还加了一个小提琴。
此外，您可能不想每次都在 change 上使用 push 值，因为如果用户返回编辑字段会怎样。它会将其添加到数组中而不是替换它。
您还必须在这里处理一些您没有实现的多维数组，因为如果用户在第一种形式中选择超过 1 个，您将必须存储 x 数量的数组以与原始请求相关联.
$(function ()
var brief = [];
var contributor = [];
var datepick = [];
var file = [];
$('#general').change(function ()
extracted('general', 'general : ');
);
$('#in_uni_level').change(function ()
extracted('in_uni_level', 'in uni level : ');
);
$('#in_section_level').change(function ()
extracted('in_section_level', 'in section level : ');
);
$('#in_country_level').change(function ()
extracted('in_country_level', 'in country level : ');
);
$(document).on('change', '#brief', function ()
brief.push(this.value);
);
$(document).on('change', '#contributor', function ()
contributor.push(this.value);
);
$(document).on('change', '#datepick', function ()
datepick.push(this.value);
);
$(document).on('change', '#file', function ()
file.push(this.value);
);
function extracted(selection, Gtitle)
$('#dynamic_table').find('[name=brief]').each(function ()
brief.push(this.value);
);
$('#dynamic_table').find('[name=contributor]').each(function ()
contributor.push(this.value);
);
$('#dynamic_table').find('[name=datepick]').each(function ()
datepick.push(this.value);
);
$('#dynamic_table').find('[name=file]').each(function ()
file.push(this.value);
);
console.log(brief, contributor, datepick, file);
// $("#dynamic_table").empty();//clear dynamic table data each time focus change
console.log($('#' + selection).val());
var count = $('#' + selection).val();
if (count > 0)
var nextStep = $(document.createElement('tbody'));
var Dynamic_form_header =
'<tr>' +
'<th>' + Gtitle + '</th>' +
'<th></th>' +
'<th></th>' +
'<th></th>' +
'</tr>' +
'<tr>' +
'<th>Short Brief</th>' +
'<th>Contributers count</th>' +
'<th>date</th>' +
'<th>Related doc</th>' +
'</tr>';
var Dynamic_form_body = '';
for (var i = 0; i < count; i++)
Dynamic_form_body +=
'<tr>' +
'<td><input type="text" name="brief[]" id="brief" ' +
'</td>' +
'<td><input type="text" name="contributor[]" id="contributor"' +
'</td>' +
'<td><input type="text" name="datepick[]" class="datepicker"' +
'</td>' +
'<td><input type="file" name="file[]" id="doc"' +
'</td>' +
'</tr>';
nextStep.html(Dynamic_form_header + Dynamic_form_body);
nextStep.appendTo("#dynamic_table");
// default
$('#dynamic_table').on('click', function ()
$('.datepicker').datepicker();
);
);
https://jsfiddle.net/eqrbsgs8/
【讨论】：
感谢回复 我想在提交按钮上获取数据，但我还没有放入表单，所以我认为多维数组的问题会消失 完成您的代码并编辑问题，以便我们看到所有内容 你添加到我的代码中的部分出现错误：Uncaught TypeError: $(...).on is not a function以上是关于将多个动态表单存储到对象中并使用jquery post方法发布和上传的主要内容，如果未能解决你的问题，请参考以下文章
Angular with Jquery - 如何将 jQuery 包含到工厂中并在多个控制器之间使用/共享该工厂？