Dynamic Page with FORM help

Dynamic Page with FORM help

I have a page that dynamically changes a div using the below function.  On one of the pages create.html that load into the div is a simple submit form that posts data to a PHP page. When navigating to this page directly (i.e.  pageurl.com/create.html) the ajax function works dynamically and uses the ajax form class to call form.js, but when I perform the same activity when the create.html page is loaded dynamically in the main div it does not use the form.js to process the request and reverts back to a normal POST????  Any advice would be appreciated.
 
 
 
 
 
LoadPage function
  1. function loadXMLDoc(url)
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
     xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("main").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    }
 
Buttons to change page dynamically:
 
  1. <button type="button" onclick="loadXMLDoc('services.html')">Get Services</button></br></br>
    <button type="button" onclick="loadXMLDoc('create.html')">Create Printer</button></br></br>
 
Create.html form
 
  1. <body>
  2. <div class="form-style-5" id="create_form">
    <form action="test.php" method="post" class="ajax">
    <fieldset>
    <legend><span class="number">1</span>Enter Printer Info</legend>
    <input type="text" name="pname" required="true" placeholder="Printer Name *">
    <input type="text" name="ip" required="true" placeholder="Printer IP *">
    <input type="submit" id="submit" value="Create Printer Test" />
    </form>
    <script src="scripts/form.js"></script>
  3. </div>

  4. <br>
    <div class="result">Last Action</div>
    <div class="form-style-1" id="loaddiv">
    </div>

  5. </body>
 
 
 
 
 
 
form.js
 
  1. $('form.ajax').on('submit', function(){
      var that = $(this),
      url = that.attr('action'),
      type = that.attr('method'),
      data = {};
      
     that.find('[name]').each(function(index, value) {
      var that = $(this),
       name = that.attr('name'),
       value = that.val();
       
      data[name] = value;
     });
     
     $.ajax({
      url: url,
      type: type,
      data: data,
      beforesend: false,
      headers: {
       "X-Requested-With":"XMLHttpRequest"
       },
      success: function(response) {
         console.log(response);
                     
      }
     });
     return false;
      });