Question

我有两份表格。

第一个表单是通过$ .post提交的，并且（如果一切顺利），由php动态生成的表单替换。这背后的想法是第一种形式创建条目和所述项目的相关图像的数量。生成新表单以上传所述图像。

我的问题是我新生成的表单没有得到处理。如果通过旧的onClick =“”函数提交表单，则会忽略动态生成的文件字段。

我对Jquery / AJAX很新，所以我可能没有正确地做到这一点，但是如何让Jquery关注我的第二个（动态生成的）表单呢？

第一表格：

<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 &amp; 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处理程序：

$(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;
        });
    });

第二表格（通过PHP和AJAX电话会议）：

<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>

Answer 1

我不完全确定，但我怀疑在构建DOM时第二种形式不存在。如果您尝试：

$('#formID').live('submit',
function() {
  // do whatever
}
);

我认为应工作。

Answer 2

使用.live()方法提交第二张表单：

$('#addnewpicturesbutton').live('click', function() {
      $("#actiontotake").val("Add Picture");
      AddPic();
      return false;
});

.live（）将处理程序附加到事件对于所有匹配的元素当前选择器，现在或在将来

Answer 3

加载新表单绑定后，您需要刷新表单绑定。致电

$("#addnewpicturesbutton").click(
    function(){
        $("#actiontotake").val("Add Picture");
        AddPic();
        return false;

在第一个函数的回调中。

使用Jquery，如何提交使用AJAX创建的表单？

3 个答案: