title: create frame like structure in php/html?
body: <p>I need to create a page having two, frame like structure. On left I always want to show a small form with around 10 entries which after clicking the submit button perform some processing and shows result. I need to have access to the left part at all times. The right part is for processing data, accessing database and display results. 
  Earlier I created a page with frames but has some issues with chrome and the fact that fame is depricated, I want to swich to some other structure. 
  I am comfortable with php and html. Someone suggested me ajax but I am zero in that. </p>
  
  <p>How can I accomplish frame like structure having two parts that load different files? 
  Thanks </p>
  
  <hr>
  
  <p>The reason I dont want to use frame is given below: </p>
  
  <p>I have a testframe.php file that loads testinpform.php into right
  frame containing code to create 3 buttons. when I load the
  testframe.php, It shows all the the buttons in the right frame and all
  the buttons work as desired for the first time. once a button is
  clicked, none of the buttons work  after that click. When I move to
  some other page using some other link and come back, then these
  buttons start working again.</p>
  
  <p>This beavior is shown only by Chrome browser.
  If I do not use frame and just load testinpform.php, all the buttons
  work as desired.</p>
  
  <p>In firefox, the same code work pefectly fine with or without frame.</p>
  
  <p>So, Is this a problem of chrome or I need to add something in my code
  to make it work in all browsers.</p>
  
  <p>My code is as follows.</p>
  
  <p>testframe.php</p>
  
  <pre><code>&lt;?php
  function generateFrames() {
  echo "&lt;FRAMESET  COLS=\"360,*\"&gt;\n";
  echo "&lt;FRAME noresize NAME=\"input\" SRC=\"otherfile.php?page=left\"&gt;\n";
  echo "&lt;FRAME NAME=\"output\" SRC=\"testinpform.php?page=right\"&gt;\n";
  echo "&lt;/FRAMESET&gt;";
  }
  
  if($page=="left") {
  echo "&lt;BODY BGCOLOR=\"#FFFFFF\"&gt;";
  echo "&lt;FONT FACE=\"Arial,Verdana,Helvetica\" COLOR=\"FF0000\" SIZE=\"3\"&gt;PHP Tester&lt;/FONT&gt;";
  echo "&lt;FORM METHOD=\"get\" ACTION=\"processForm.php?page=right\"TARGET=\"output\"&gt;\n";
  echo "&lt;TABLE BORDER=\"0\" CELLSPACING=\"0\" CELLPADDING=\"0\"&gt;\n";
  echo "&lt;TR&gt;&lt;TD&gt;&lt;TEXTAREA NAME=\"input\" COLS=\"100\" ROWS=\"40\"
  WRAP=\"virtual\"&gt;".$input."&lt;/TXTAREA&gt;&lt;/TD&gt;&lt;/TR&gt;\n";
  echo "&lt;TR&gt;&lt;TD ALIGN=\"center\"&gt;&lt;INPUT TYPE=\"submit\"
  VALUE=\"Execute\"&gt;&lt;/TD&gt;&lt;/TR&gt;&lt;/TABLE&gt;&lt;/FORM&gt;\n";
  echo "&lt;/BODY&gt;";
  }
  
  else if ($page=="right") {
  echo "&lt;BODY BGCOLOR=\"#FFFFFF\"&gt;";
  if(empty($input)) {
  echo "Ready to parse...";
  }
  else {
  $input=stripSlashes($input);
  eval($input); 
  }
  echo "&lt;/BODY&gt;"; 
  }
  
  else {
  generateFrames();
  }
  ?&gt;
  </code></pre>
  
  <hr>
  
  <h2>testinpform.php</h2>
  
  <pre><code>&lt;?php
  $filenames =  array("file1.txt", "file2.txt", "file3.txt");
  $namesToshow = array("file1", "file2", "file3");
  $numfiles = count($filenames);
  
  for ($i = 0; $i&lt; $numfiles; $i++)
   {
   echo"&lt;form enctype=multipart/form-data method=GET
   action='viewResult.php' target='_blank' &gt;";
   echo"&lt;input type='hidden' name='filetoview' value= $filenames[$i] &gt;";
   echo"&lt;input type='submit' value= $namesToshow[$i] &gt;";
   echo'&lt;/FORM&gt;';
    }
  
   echo"&lt;a href= abc.com&gt;click here to go to next page and then come back using the back button&gt;";
   ?&gt;
  </code></pre>
  
  <p>Thanks </p>
  
  <hr>
  
  <p>@Silvertiger 
  Thanks for your reply. 
  I am looking at your code and try to customize it according to my need. </p>
  
  <p>I am giving the simplest  example for my case. </p>
  
  <p>frame.php contains the code suggested by @silvertiger. </p>
  
  <p>In the left part, I want to include  "inputform.php" that has (for example) following code:</p>
  
  <pre><code>&lt;form name="secondForm" method="POST" enctype="multipart/form-data" action = 'process.php' target = "output"&gt;      
  &lt;input type="hidden" name="organism" value="human" &gt;
  Enter the input in the text box:&lt;br /&gt;
  &lt;textarea name="textArea" cols="40" rows="6" &gt;Enter your query here&lt;/textarea&gt; &lt;br /&gt;
  &lt;input type="submit" value="submit" class="html-text-box"&gt; 
  &lt;/form&gt;
  </code></pre>
  
  <p>When I call frame.php and press the submit button, the input form pass all the data to process.php which will show its result on the right half. </p>
  
  <p>process.php file is:</p>
  
  <pre><code>&lt;?php
  $organism= $_POST['organism'];
  $textArea = $_POST['textArea'];
  print ("\n$organism, $textArea");
  ?&gt;
  </code></pre>
  
  <p>What changes do I need in the frame.php file below: </p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
          &lt;title&gt;Some Page&lt;/title&gt;
          &lt;script type="text/javascript" src="includes/jquery-1.5.1.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              function loadform1() {
                  jQuery.ajax({ // create an AJAX call...
                      data: jQuery('#myform1').serialize(), // get the form data
                      type: 'POST', // GET or POST
                      url: 'process.php', // the file to call
                      success: function(response) { // on success..             
                          $('#displaydata').html(response); // update the DIV
                      }
                  // might need to add a return false here so the page won't reload
                  });
              };            
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div style="float:left;width:50%;"&gt;
              &lt;form id="myform1" name="myform1" onsubmit="loadform1()"&gt;
                  &lt;div style="float:left; width: 150px;"&gt;Criteria 1&lt;/div&gt;
                  &lt;div style="float:left; margni-right: 20px;"&gt;
                      &lt;input type="text" name="criteria1" value="" /&gt;
                  &lt;/div&gt;
                  &lt;div style="clear:both; height: 30px;"&gt;&lt;/div&gt;
                  &lt;div style="float:left; width: 150px;"&gt;Criteria 2&lt;/div&gt;
                  &lt;div style="float:left; margni-right: 20px;"&gt;
                      &lt;input type="text" name="criteria2" value="" /&gt;
                  &lt;/div&gt;
                  &lt;div style="clear:both; height: 30px;"&gt;&lt;/div&gt;
                  &lt;input type="submit" value="Show Form 1 results" /&gt;
  
              &lt;/form&gt;            
       &lt;div style="clear:both; height: 30px;"&gt;&lt;hr&gt;&lt;/div&gt;         
          &lt;/div&gt;
  
          &lt;div id="displaydata" style="float:left;width:50%; text-indent: 30px;"&gt;
          &lt;?php include('defaultpage.php'); ?&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Thanks a lot.</p>