title: How to retrieve a form using AJAX, JSON and PHP onchange of value in a select box?
body: <p>I Have a select box, on selectinga value in it I have to display a form in which there is a Date field which include a javascript calendar functionalty. I tried it with normal AJAX and PHP combination, but I dont get the Calendar in it, So I just need to know How I can make it happen using JSON and AJAX and PHP?</p>
  
  <p>Thanks</p>
  
  <p>Every Help Is Appreciated.... </p>
  
  <p><strong>THE CODE</strong></p>
  
  <p>This is The Javascript I am Using to AJAX function:</p>
  
  <pre><code>&lt;script&gt;
  function Inint_AJAX() {
  try { return new ActiveXObject("Msxml2.XMLHTTP");  } catch(e) {} //IE
  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {} //IE
  try { return new XMLHttpRequest();          } catch(e) {} //Native Javascript
  alert("XMLHttpRequest not supported");
  return null;
  };
  function dochange(path,val) {
  var req = Inint_AJAX();
  req.onreadystatechange = function () {
   if (req.readyState==4) {
        if (req.status==200) {
              document.getElementById('docfields').innerHTML="";
              if(req.responseText != ''){
             document.getElementById('docfields').innerHTML=req.responseText; //retuen value
              }else{
              document.getElementById('docfields').innerHTML="&lt;br&gt;&amp;nbsp;\t&lt;font size='2'&gt;&lt;b&gt;No Fields Available&lt;/b&gt;&lt;/font&gt;";
              }
        }
   }
  };
  req.open("GET", path+"getDocFields.php?doctype_id="+val); //make connection
  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=iso-8859-1"); // set Header
  req.send(null); //send value
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>Below Is the HTML form which I need to display with Calendar object (tcal) instantiated in the script tag:</p>
  
  <pre><code>&lt;form onsubmit="" action="" method="post" name="newdoc"&gt;
           &lt;table border="0" style="border: medium none;" id="docfield"&gt;
            &lt;tbody&gt;
            &lt;tr&gt;
              &lt;td style="border-right: medium none;"&gt;
                  Date
              &lt;/td&gt;
           &lt;td style="border-right: medium none;"&gt;
              &lt;input type="text" value="" maxlength="10" name="Test" style="width: 100px;" id="date"&gt;
          &lt;script&gt;
           new tcal ({  
        'formname': 'newdoc',  
        'controlname': 'Test'
           });
       &lt;/script&gt;
          &lt;/td&gt;
       &lt;/tr&gt;
      &lt;/tbody&gt;
   &lt;/table&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I am not getting the calendar displayed...</p>