Utilisation de Jquery, Comment soumettre un formulaire créé avec AJAX?

Question

J'ai une forme en 2 parties.

Le 1er formulaire est soumis via $ .post et (si tout va bien), est remplacé par un formulaire généré dynamiquement à partir de php. L'idée derrière cela étant que le 1er formulaire crée une entrée et le nombre d'images liées pour ledit objet. Un nouveau formulaire est généré pour télécharger lesdites images.

Mon problème est que mon formulaire nouvellement généré n'est pas traité. Si vous soumettez le formulaire via l'ancienne fonction onClick = "", les champs de fichiers générés dynamiquement sont ignorés.

Je suis un peu nouveau sur Jquery/AJAX, donc je ne fais peut-être pas cela correctement, mais comment puis-je faire attention à mon 2ème formulaire (généré dynamiquement)?

1er Forme:

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

gestionnaire 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; 
     }); 
    }); 

2ème formulaire (via PHP & appel 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

utilisation de la méthode .live() pour soumettre votre 2ème forme:

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

.live() attach un gestionnaire à l'événement pour tous les éléments qui correspondent au sélecteur de courant, maintenant ou dans l'avenir .

Answer 2

Vous devez rafraîchir le formulaire bi ndings après avoir chargé le nouveau. Appelez le

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

dans le rappel pour la première fonction.

Answer 3

Je ne suis pas entièrement sûr, mais je soupçonne que la seconde forme n'était pas présente lors de la construction du DOM. Si vous essayez:

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

Je pense qu'il devrait fonctionner.