使用jquery，我如何提交使用AJAX創建的表單？

第一種形式是通過$ .post和（如果一切正確）提交的，由php中的一個動態生成的表單替換。這背後的想法是，第一種形式爲所述物品創建條目和相關圖像的數量。生成一個新表單來上傳所述圖像。

我的問題是我的新生成的表單沒有得到處理。如果通過舊的onClick =「」函數提交表單，動態生成的文件字段將被忽略。我很新的jquery/AJAX，所以我可能沒有做到這一點，但我怎麼能讓jquery注意我的第二個（動態生成的）表單？

1表格：

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

來源

2010-09-26 mcfrosty

使用.live()方法來提交您的第二個表格：

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

.live（）處理程序附加到事件爲當前選擇現在或將來匹配這，所有的元素。

來源

2010-09-26 17:10:15 NAVEED

你需要梳洗形式bi在你加載新的之後。致電

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

在第一個函數的回調中。

來源

2010-09-26 17:06:49

我不完全確定，但我懷疑這是DOM構建時第二種形式不存在。如果你嘗試：

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

我認爲它應該工作。

來源

2010-09-26 17:08:23

使用jquery，我如何提交使用AJAX創建的表單？

回答

相關問題