title: Ajax Response as HTML
body: <p>When the submit button is clicked on <code>page1.php</code> the response is printed as HTML format for a moment but it gets automatically deleted.</p>
  
  <p>I want to display the response of <code>page2.php</code> in <em>page1</em> in the <code>id="output"</code> element.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Here is the content of <code>page1.php</code></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      function func(tosearch) {
          alert("search");
  
          $.ajax({
              type: 'post',
              url: 'page2.php',
              data: {
                  'tosearch' : tosearch
              },
              success: function(result) {
                  print(result);
              }
          });
      }
  
      function print(result) {
          document.getElementById("output").innerHTML=result;
      }
  &lt;/script&gt;
  
  &lt;form method="post" action="page1.php"&gt;
      &lt;input type="text" name="search" placeholder="Search.."&gt;&lt;br&gt;&lt;br&gt;
      &lt;input type="submit" name="submit" onclick="func()"&gt;
  &lt;/form&gt;
  &lt;p id="output"&gt;table here!!&lt;/p&gt;
  </code></pre>
  
  <p>Content of <code>page2.php</code></p>
  
  <pre><code>&lt;?php echo "&lt;table align='center'&gt;"
      ."&lt;tr&gt;"
      ."&lt;td&gt;"."Mr XYZ"."&lt;/td&gt;"
      ."&lt;td&gt;"."MALE"."&lt;/td&gt;"
      ."&lt;td&gt;"."987558745"."&lt;/td&gt;"
      ."&lt;td&gt;"."xyz@gmail.com"."&lt;/td&gt;"
      ."&lt;/tr&gt;";
  ?&gt;
  </code></pre>