Question

.I have a div tag that is also divided into two divs. here is the code:

<div>
<div id="search">
<form id="try" method="post">
Batch: <input id="batch" name="batch" type="text"/>Dept: <input id="dept" name="dept" type="text"><input type="submit"/>
</div>
<div id="receiver">

</div>
</div>

I have placed a search option in the div named “search” using post method. what i want to do is that when i click the submit button the page to receive the values will appear on the div named “receiver”.

is this possible? if it is, please help..

Answer 1

The ways you have for this are:

1 – The simplest – instead of a div – use an IFrame like this

<div id="search">
  <form id="try" method="post" target="receiver" action="url-to-server-Page">
     Batch: <input id="batch" name="batch" type="text"/>
     Dept: <input id="dept" name="dept" type="text" />    
     <input type="submit"/>
  </form>
  </div>
  <iframe name="receiver" id="receiver"></iframe>
</div>

The disadvantage in this case is that the search-result that come in this case from url-to-server-page – is a complete and independent HTML page that is nested in your search page.
It is not effected by styles of the parent page, and the communication between them for JavaScript operations is rather combersome.

2 – with some JavaScript skills you can use AJAX.
There are many libraries on the net that can help you do it in very few lines of code.
jQuery is the simplest, although it’s the one I like least…
http://jquery.com/

3 – use a full round-trip

  <div id="search">
    <form id="try" method="post" target="receiver" action="url-to-server-Page">
       Batch: <input id="batch" name="batch" type="text"/>
       Dept: <input id="dept" name="dept" type="text" />    
      <input type="submit"/>
    </form>
    <div id="receiver">
        <?php if (isset($_POST['batch']) && isset($_POST['dept'])){
                  //display search results here.
              }
        ?>
    </div>
 </div>