ajaxForm Plugin submitting form normally without ajax

Question

I have two scenarios:

First: i have an HTML form on a page on which i'm using ajaxForm plugin to upload a file through ajax and it works fine.

Second: I am generating another HTML form through php and ajax on which i'm trying to use the same plugin but it submits the form normally and echoes out the result in the browser.

Is it that ajaxForm doesn't work on dynamically generated forms?? I know that is just stupid to even ask but my current situation seems to make me believe that.

Please help...

First Form: This is a STATIC form written on HTML Page. AJAXFORM works fine on this...

  <form action="brand_add.php" method="post" enctype="multipart/form-data" name="brands_form" id="brands_form">
 <input type="hidden" name="brand_timeVal" id="brand_timeVal" />
 <table>
 <tr><td><label>Title<label></td></tr>
 <tr><td><input type="text" id="brand_title" name="brand_title" autocomplete="off" class="large inputTexts" placeholder="e.g. Adidas, Puma, SS, BDM, Cosco, Head, Spalding etc..." /></td></tr>
 <tr><td><label>Description<label></td></tr>
 <tr><td><textarea class="inputTexts" id="brand_desc" name="brand_desc"></textarea></td>              </tr>
<tr><td><label>Brand Image<label></td></tr>
<tr><td><input type="file" name="brand_img" id="brand_img" onchange="sub(this,this.id)">    </td></tr>
<tr><td><input type="submit" class="saveButton" value="Save" id="brand_save_btn" onclick="timing(this.id,'brand_timeVal');"><button type="button" onclick="clearBox(); return false" class="cancelButton" style="margin-left:5px;">Cancel</button></td></tr>
</table>
</form>

Second Form: This is dynamically generated through ajax request. AJAXFORM doesn't work.

 <?php

 $response .= "<div class='update_box_header'><span class='breadcrumb'><a href='brands.php'>Brands</a></span> / Update Brand</div>
 <div class='update_box_form'>
 <form action='#' method='post' enctype='multipart/form-data' name='brands_form_update' id='brands_form_update'>
<input type='hidden' name='brand_timeVal_update' id='brand_timeVal_update' />
<input type='hidden' name='brand_update_id' value='".$id."' />
<input type='hidden' name='brand_update_file_toggler_value' value='1' />
<table>
<tr><td><label>Title<label></td></tr>
<tr><td><input type='text' id='brand_title_update' name='brand_title_update' class='large inputTexts' value='".$row1['name']."' /></td></tr>
<tr><td><label>Description<label></td></tr>
<tr><td><textarea class='inputTexts' id='brand_desc_update' name='brand_desc_update'>".$row1['description']."</textarea></td></tr>
<tr><td><label>Brand Image<label></td></tr>

<tr><td id='brand_img_field'><img src='assets/brands/banners/".$img_path."' border='0' width='100' height='50' /></td></tr>
<tr><td><label>Upload New Image<label></td></tr>
<tr><td><input type='file' accept='image/*' name='brand_img_update' id='brand_img_update' onchange='sub(this,this.id)'></td></tr>
<tr><td><label>Status<label></td></tr>
<tr><td><select name='brand_life_update' id='brand_life_update'>";
        if($row1['status'] == 1){
$response .= "<option value='1' selected>Active</option><option value='0'>Inactive</option>";
             }
        else if($row1['status'] == 0) {
$response .= "<option value='1'>Active</option><option value='0' selected>Inactive</option>"; 
            }

  $response .= "</select></td></tr>
 <tr><td><input type='submit' class='saveButton' value='Save' id='brand_update_btn' onclick='timing(this.id,'brand_timeVal_update');'><button type='button' onclick='clearUpdateBox(); return false' class='cancelButton' style='margin-left:5px;'>Cancel</button></td></tr>
 </table>
 </form>
 </div>";


 ?> 

Answer 1

Post your javascript code.

---

A blind guess is : you are trying to setup your ajaxForm before it is actually present in the page.

If you want to run ajaxForm on '#brands_form_update', you have to request for it, insert it in the document, then call ajaxForm. This should give something like :

// $.get(...) sends the request
// $(..).append inserts the form inside the document
// $('#brands_form_update').ajaxForm() sets up the form
$.get('myDynamicForm.php', { ...data...}, function(html){
    $('*mySelector*').append(html);
    $('#brands_form_update').ajaxForm();
});