使用jQuery，我如何提交与AJAX创建的窗体？ [英] Using Jquery, How do I submit a form that was created with AJAX?
本文介绍了使用jQuery，我如何提交与AJAX创建的窗体？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个2部分的形式。
第1形式是通过$。员额，并提交（如果一切顺利的权利），改为从PHP动态生成的形式。这之中的第一个表单创建一个条目，相关的图像表示，项目的数量背后的理念。一种新的形式生成上传图像说。
我的问题是，我的新生成的形式是没有得到处理。如果通过旧的onClick提交表单=功能，动态生成的文件字段将被忽略。
我是pretty的新jQuery的/ AJAX，所以我可能无法正确这样做，但我怎么能得到jQuery来关注我的第二个（动态生成）的形式？
1号形式：
＆LT;表格名称=addinvID =addinv行动=admin_process.php方法=邮报＆GT;
＆LT;字段集＆GT;
＆LT;传奇＆gt;添加库存和LT; /传说＆GT;
＆LT;输入类型=隐藏名称=actiontotakeID =actiontotake值=无/＆GT;
＆LT;表格的宽度=400的边界=0＆GT;
＆LT;标题＆GT;
补充库存表单布局表
＆LT; /字幕＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;价格＆LT; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称=价格ID =价格的tabindex =1/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;制造商＆LT; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称=制造ID =制造的tabindex =2/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;型号：LT; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称=模式ID =模式的tabindex =3/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;序列号＆LT; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称=SNID =SN的tabindex =4/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;年＆LT; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称=年ID =年的tabindex =5/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;尺寸（尺寸）＆LT; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称=维度ID =尺寸的tabindex =6/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;卧室＆LT; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称=床ID =床的tabindex =7/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;浴室＆LT; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称=整体卫浴ID =整体卫浴的tabindex =8/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;范围类型＆lt; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称=范围ID =范围的tabindex =9/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;屋面类型＆lt; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称=偏袒ID =偏袒的tabindex =10/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;屋顶类型＆lt; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称=屋顶ID =屋顶的tabindex =11/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;炉类型＆lt; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称=炉ID =炉的tabindex =12/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;功能和放大器;放大器;优点＆LT; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT; textarea的名字=fandbID =fandb的tabindex =13＆GT;＆LT; / textarea的＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD＆GT;＆LT;强＆GT;图片＆LT数量; / STRONG＆GT;＆LT; / TD＆GT;
＆LT; TD＆GT;＆LT;输入类型=文本名称=picnumID =尺寸的tabindex =14/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆其中; TR＆GT;
＆LT; TD合并单元格=2ALIGN =中心＆GT;＆LT;输入名称=addinventorybuttonID =addinventorybutton类型=提交值=添加首页的tabindex =15/＆GT;＆LT; / TD＆GT;
＆LT; / TR＆GT;
＆LT; /表＆gt;
＆LT; /字段集＆GT;
＆LT; /形式GT;
jQuery的处理程序：
$（文件）。就绪（
功能（）{
$（＃addinventorybutton）。点击（
功能（）{
$（＃actiontotake）VAL（添加首页）。
。VAR DTA = $（＃addinv）序列化（）;
$。员额（admin_process.php，DTA，功能（数据）{
$（＃DIV表）HTML（数据）;
}）;
返回false;
}）;
$（＃addnewpicturesbutton）。点击（
功能（）{
$（＃actiontotake）VAL（添加图片）。
AddPic（）;
返回false;
}）;
}）;
第二个表（通过PHP和放大器; AJAX调用）：
＆LT;表格名称=addpicturesID =addpicturesENCTYPE =多部分/表单数据的方法=邮报行动=admin_process.php＆GT;
＆LT;字段集＆GT;＆LT;传奇＆gt;添加相关的图像和LT; /传说＆GT;
＆LT; PHP
为（$ i = 0; $ I＆LT; $图片; $ I ++）
{
回声（＆LT;输入类型=文件NAME =PIC$我。/＆GT;＆LT; BR /＆GT; \ N）;
}
？＆GT;
＆LT;输入类型=隐藏名称=actiontotakeID =actiontotake值=无/＆GT;
＆LT;输入类型=隐藏名称=inventory_idID =inventory_id值=＆LT; PHP的echo $ NEWID;＆gt;中＆GT;
＆LT;输入类型=按钮NAME =addnewpicturesbuttonID =addnewpicturesbutton值=图片添加到新家＆GT;
＆LT; /字段集＆GT;
＆LT; /形式GT;
解决方案
使用的生活（）方法来提交你的第二个表格：
$（'＃addnewpicturesbutton）。住（点击，函数（）{
$（＃actiontotake）VAL（添加图片）。
AddPic（）;
返回false;
}）;
.live（）附加处理程序事件 为相匹配的所有元素 目前的选择，现在还是 未来的。
I have a 2 part form.
The 1st form is submitted via $.post and (if all goes right), is replaced by a dynamically generated form from php. The idea behind this being that the 1st form creates an entry and the number of related images for said item. A new form is generated to upload said images.
My problem is that my newly generated form is not getting processed. If submit the form via the old onClick="" function, the dynamically generated file fields are ignored.
I'm pretty new to Jquery/AJAX, so I may not be doing this correctly, but how can I get Jquery to pay attention to my 2nd (dynamically generated) form?
1st Form:
<form name="addinv" id="addinv" action="admin_process.php" method="post">
<fieldset>
<legend>Add Inventory</legend>
<input type="hidden" name="actiontotake" id="actiontotake" value="none" />
<table width="400" border="0">
<caption>
Add Inventory Form Layout Table
</caption>
<tr>
<td><strong>Price</strong></td>
<td><input type="text" name="price" id="price" tabindex="1" /></td>
</tr>
<tr>
<td><strong>Manufacturer</strong></td>
<td><input type="text" name="mfg" id="mfg" tabindex="2" /></td>
</tr>
<tr>
<td><strong>Model</strong></td>
<td><input type="text" name="model" id="model" tabindex="3" /></td>
</tr>
<tr>
<td><strong>Serial Number</strong></td>
<td><input type="text" name="sn" id="sn" tabindex="4" /></td>
</tr>
<tr>
<td><strong>Year</strong></td>
<td><input type="text" name="year" id="year" tabindex="5" /></td>
</tr>
<tr>
<td><strong>Size (Dimensions)</strong></td>
<td><input type="text" name="dimensions" id="dimensions" tabindex="6" /></td>
</tr>
<tr>
<td><strong>Bedrooms</strong></td>
<td><input type="text" name="beds" id="beds" tabindex="7" /></td>
</tr>
<tr>
<td><strong>Bathrooms</strong></td>
<td><input type="text" name="baths" id="baths" tabindex="8" /></td>
</tr>
<tr>
<td><strong>Range Type</strong></td>
<td><input type="text" name="range" id="range" tabindex="9" /></td>
</tr>
<tr>
<td><strong>Siding Type</strong></td>
<td><input type="text" name="siding" id="siding" tabindex="10" /></td>
</tr>
<tr>
<td><strong>Roof Type</strong></td>
<td><input type="text" name="roof" id="roof" tabindex="11" /></td>
</tr>
<tr>
<td><strong>Furnace Type</strong></td>
<td><input type="text" name="furnace" id="furnace" tabindex="12" /></td>
</tr>
<tr>
<td><strong>Features & Benefits</strong></td>
<td><textarea name="fandb" id="fandb" tabindex="13"></textarea></td>
</tr>
<tr>
<td><strong>Number of Pictures</strong></td>
<td><input type="text" name="picnum" id="dimensions" tabindex="14" /></td>
</tr>
<tr>
<td colspan="2" align="center"><input name="addinventorybutton" id="addinventorybutton" type="submit" value="Add Home" tabindex="15"/></td>
</tr>
</table>
</fieldset>
</form>
Jquery handler:
$(document).ready(
function(){
$("#addinventorybutton").click(
function(){
$("#actiontotake").val("Add Home");
var dta = $("#addinv").serialize();
$.post("admin_process.php",dta,function(data){
$("div#form").html(data);
});
return false;
});
$("#addnewpicturesbutton").click(
function(){
$("#actiontotake").val("Add Picture");
AddPic();
return false;
});
});
2nd Form (via PHP & AJAX call):
<form name="addpictures" id="addpictures" enctype="multipart/form-data" method="post" action="admin_process.php">
<fieldset><legend>Add Associated Images</legend>
<?php
for($i=0;$i<$pics;$i++)
{
echo("<input type='file' name='pic".$i."' /><br />\n");
}
?>
<input type="hidden" name="actiontotake" id="actiontotake" value="none" />
<input type="hidden" name="inventory_id" id="inventory_id" value="<?php echo $newid; ?>">
<input type="button" name="addnewpicturesbutton" id="addnewpicturesbutton" value="Add Pictures to new home">
</fieldset>
</form>
解决方案
use .live() method to submit your 2nd form:
$('#addnewpicturesbutton').live('click', function() {
$("#actiontotake").val("Add Picture");
AddPic();
return false;
});
.live() attach a handler to the event for all elements which match the current selector, now or in the future.
这篇关于使用jQuery，我如何提交与AJAX创建的窗体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
