Using Jquery, How do I submit a form that was created with AJAX?

schmidtm

New Member
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:\[code\]<form name="addinv" id="addinv" action="admin_process.php" method="post"> <fieldset> <legend>Add Inventory</legend> <input type="hidden" name="actiontotake" id="actiontotake" value="http://stackoverflow.com/questions/3798862/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="http://stackoverflow.com/questions/3798862/Add Home" tabindex="15"/></td> </tr> </table> </fieldset> </form>\[/code\]Jquery handler:\[code\]$(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; }); });\[/code\]2nd Form (via PHP & AJAX call):\[code\]<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="http://stackoverflow.com/questions/3798862/none" /> <input type="hidden" name="inventory_id" id="inventory_id" value="http://stackoverflow.com/questions/3798862/<?php echo $newid; ?>"> <input type="button" name="addnewpicturesbutton" id="addnewpicturesbutton" value="http://stackoverflow.com/questions/3798862/Add Pictures to new home"> </fieldset> </form>\[/code\]
 
Back
Top