title: display a changed form on previous form submit
body: <p>I'm trying to display another form when currently displaying form values are submitted to server using ajax </p>
  
  <p>This is my html &amp; ajax code</p>
  
  <pre><code>&lt;script&gt;
  function getproblem(){
  var city=document.getElementById('city').value;
  var serve=document.getElementById('service').value;
  var service;
  var url='insert.php';
  var xmlhttp=ajax();
  if(xmlhttp){
  xmlhttp.open("POST",url);
  xmlhttp.setRequestHeader('Content-Type',
  'application/x-www-form-urlencoded');
  xmlhttp.onreadystatechange = function()
  {
  if (xmlhttp.readyState == 4 &amp;&amp;
  xmlhttp.status == 200) { 
  service=xmlhttp.responseText;
  var div=document.getElementById('form').innerHTML;
  div.innerHTML='';
  div.innerHTML=service; 
  }
  }
  xmlhttp.send("city="+city+"&amp;service="+serve);
  }
  }
  function ajax(){
  var XMLHttpRequestObject = false;
  if (window.XMLHttpRequest) {
  XMLHttpRequestObject = new XMLHttpRequest();
  } else if (window.ActiveXObject) {
  XMLHttpRequestObject = new
  ActiveXObject("Microsoft.XMLHTTP");
  }
  return XMLHttpRequestObject;
  }
  &lt;/script&gt;
  &lt;link rel="stylesheet" src="runnable.css" /&gt;
  &lt;!-- Load jQuery from Google's CDN --&gt;
  &lt;!-- Load jQuery UI CSS  --&gt;
  &lt;link rel="stylesheet"    href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /&gt;
  
  &lt;!-- Load jQuery JS --&gt;
  &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
  &lt;!-- Load jQuery UI Main JS  --&gt;
  &lt;script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;!-- Load SCRIPT.JS which will create datepicker for input field  --&gt;
  &lt;script src="script/script.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  function populate(selector) {
  var select = $(selector);
  var hours, minutes, ampm;
  for(var i = 600; i &lt;= 1100; i += 30){
      hours = Math.floor(i / 60);
      minutes = i % 60;
      if (minutes &lt; 10){
          minutes = '0' + minutes; // adding leading zero
      }
      ampm = hours % 24 &lt; 12 ? 'AM' : 'PM';
      hours = hours % 12;
      if (hours === 0){
          hours = 12;
      }
      select.append($('&lt;option&gt;&lt;/option&gt;')
          .attr('value', i)
          .text(hours + ':' + minutes + ' ' + ampm)); 
    }
   }
  
   &lt;/script&gt;
   &lt;/head&gt;
   &lt;body &gt;
   &lt;div id="form"&gt;
   &lt;form method="post" &gt;
   &lt;select name="city" id="city"      onChange="configureDropDownLists(this,document.getElementById('service'))"&gt;
   &lt;option selected="selected" value=""&gt;-- --City-- --&lt;/option&gt;
   &lt;option value="jhansi"&gt;Jhansi&lt;/option&gt;
   &lt;option value="lucknow"&gt;Lucknow&lt;/option&gt;
   &lt;/select&gt;
   &lt;select id="service"&gt;
   &lt;option selected="selected" value=""&gt;-- --Service-- --&lt;/option&gt;
   &lt;/select&gt;
   &lt;button onclick="getproblem()" name="proceed" &gt;NEXT&lt;/button&gt;
   &lt;/form&gt;
   &lt;/div&gt;
   &lt;p id="a"&gt;&lt;/p&gt;
   &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>This is my php file </p>
  
  <pre><code>&lt;?php
  include_once('db.php');
  $db=new db();
  $sql=$db-&gt;database_initialise();
  $city=$_POST['city'];
  $service=$_POST['service'];
  $service_id=mt_rand();
  $query="insert into `service` (`id`,`city`,`service_type`)      values('$service_id','$city','$service')";
  $result=$sql-&gt;query($query);
  if($result===true){
  $ui=uigenerator($service_id,$service);
  echo $ui;
  }
  else
  echo "Sorry An error occured";
  function uigenerator($ssid,$service){
  $ui='&lt;form method="post" action="next.php?ssid='.$ssid.'"  onload="populate(#timeSelect)"&gt;&lt;input type="text" id="problem" value="What\'s    Your Problem" onfocus="document.getElementById(\'problem\').value=\'\' " /&gt;';
  if($service=='AC Repair/Service'||$service=='Washing Machine Repair'||$service='Refrigerator Repair/Service'|| $service=='Television Repair'){
      $ui=$ui.'&lt;input type="text" value="Brand" id="brnd" onfocus="document.getElementById(\'brnd\').value=\'\'"&gt;';
      if($service=='Washing Machine Repair')
          $ui=$ui.'&lt;select id="type" name="type"&gt; &lt;option selected="selected" value=""&gt;-- Type --&lt;/option&gt;&lt;option value="Semi-automatic"&gt;Semiautomatic&lt;/option&gt;&lt;option value="Automatic"&gt;Automatic&lt;/option&gt;&lt;/select&gt;';
      else if ($service=="Television Repair")
          $ui=$ui.'&lt;select id="type" name="type"&gt;&lt;option selected="selected" value=""&gt;-- Type --&lt;/option&gt;&lt;option value="CRT"&gt;Flat screen&lt;/option&gt;&lt;option value="LCD"&gt;LCD&lt;/option&gt;&lt;option value="LED"&gt;LED&lt;/option&gt;&lt;/select&gt;';
  }
  $ui=$ui.'&lt;input type="text" id="datepicker"  value="Date" onfocus="document.getElementById(\'datepicker\').value=\'\'" /&gt; &lt;select id="timeSelect"&gt;&lt;option selected="selected" value=""&gt;Time&lt;/option&gt;&lt;/select&gt;&lt;input type="submit" name="next" value="Proceed" /&gt;&lt;/form&gt;';
  return $ui;
  }
  </code></pre>
  
  <p>when form is submitted and details are logged in database then the new form should be displayed and previous one should be removed.</p>
  
  <p>the problem is that the new form is not shown instead the old form with reset values is shown </p>
  
  <p>Actually when i looked in console to debug it and put the <code>responsetext</code> in another element then it was shown but then the page was automatically refreshed to the starting page</p>