Using a form downloaded through AJAX

Using a form downloaded through AJAX

I have just started using JQuery, so am a beginner. I wanted to make use of the ajax features to dynamically load different content into part of the page.
 
I am using ajax to load an html <form> from the server into a <div>. The content of the form that is loaded depends on what the user selects. The form itself does not use jquery, it is simply an html form contained in a <table>. The user may change the selection on the main page and then a different form is loaded dynamically. Each time a form is loaded, it is given a unique form name and id attribute. That all seems to work fine.
 
My problem is that when the form is filled in and submitted using javascript document.forms[id].submit(), the form seems to submit OK but there is no data submitted with the form, even though there are <input> fields defined on the form and there are data in the fields.
 
When I run the form directly in an html page, without loading through via ajax, it seems to work OK.
 
Is there some special initialization that I have to do on the form to get it to work when loaded through ajax?
 
Below is an example of the html that is generated dynamically and loaded through jquery ajax into a <div> on the page. The 6-digit number is unique every time the html is reloaded. The fields ii and action are normally hidden, I displayed them on the form as input fields to check they really contained values.
 
Any help would be much appreciated.
 
John
 
  1.  <table>
     <tbody id="oblig_explanation_formFRM396236" >
      <tr>
       <td colspan="2">
        <table class="formtable">
         <form name="obligexplanformFRM396236" id="obligexplanformFRM396236" action="impact.asp" method="post">
          <tr>
           <td>
            ii=<input type="text" name="ii" value="43" />
            action=<input type="text" name="action" value="addexplanation" />
           </td>
          </tr>
          <tr>
           <td colspan="2">id=43</td>
          </tr>
          <tr>
           <td class="fieldname">Explanation</td>
           <td>
            <textarea name="frmexplan" rows="10" cols="85">asdfa</textarea>
           </td>
          </tr>
          <tr>
           <td />
           <td>
            <input type="hidden" name="xxSUB" id="xxSUB" value="" />
            <button
             class="spansubmitbutton"
             width="100"
             onclick="
              document.getElementById('xxSUB').value='xxSUB';
              document.forms['obligexplanformFRM396236'].submit();
              return false;
              "
             onmouseover="
              this.className='spansubmitbuttonhover';
              "
             onmouseout="
              this.className='spansubmitbutton';
              "
             >
              Submit
            </button>
            
            
           </td>
          </tr>
         </form>
        </table>
       </td>
      </tr>
     </tbody>
    </table>


















































 
 
 
 
 
 
 
 
 
The jquery that loads the form is:
 
 
 
 
  1.  <script>
      // clickmode controls if the user selects by hovering or by clicking
       var clickmode = false;
       
      // called when the user selects an item, click is true if clicked
       function selectImpact(selectedRow, ii, click)
       {
        // un-hilite hovered-over row
        $(".rowhovered").removeClass("rowhovered");
        
        // check selection mode and exit if in click mode
        // and not clicked
        if( !click && clickmode )
        {
         $(selectedRow).addClass("rowhovered");
         return false;
        }
        
        // set clickmode ON if user clicked
        if (click) { setclickmode(); }
        
        // un-hilite the previously-selected row    
        $(".rowselected").removeClass("rowselected");
        
        // hilite the new selected row
        $(selectedRow).addClass("rowselected");
        
        '// get time string to use to overcome cacheing
        '// of the response by browser (is there a better way?)
        var ddxx = new Date();
        var ttxx = ddxx.getTime();
        
        '// kick off the jquery request
        $.get(
          "ImpactDivOnly.asp?ii=" + ii + "&ttxx=" + ttxx
          , ttxx
          , function( data )
          {
           // when successful, load the form into the display area
           $( "#impact_display_area" ).html( data );
           
          }
          , "html"
         );
        
       }
       
       function setclickmode()
       {
        $("#clickmodebtn").addClass("modebuttonselected");
        $("#hovermodebtn").removeClass("modebuttonselected");
        clickmode=true;
       }
       
       function sethovermode()
       {
        $("#hovermodebtn").addClass("modebuttonselected");
        $("#clickmodebtn").removeClass("modebuttonselected");
        clickmode=false;
       }
      </script>