在不同的div中显示表单结果

Question

im just wondering how to use javascript (i think it will be javascript but not sure) to have the results of the search action be displayed inside another div, just like sites such as ebay, or even stackoverflow. heres a snippet of my html

<div id="searchsign">
   <div style="width: 65%; float:left;height:100%;">
      <form id="searchdivebay" action="searchdivebay.php" method="get">
         <div class="searchbox"><input type="text" name="searchbox" id="searchboxinput"/></div>
         <div class="searchbtn"><input type ="submit" name="searchbutton" value="Search DiveBay"/></div>
      </form>
   </div>
   <div style="width: 35%; float:right;height:100%;">
      <ul class="signreg">
         <li><i>Existing user?</i> <a href="#">SIGN IN</a></li>
         <li><i>or, New user? </i><a href="#">REGISTER</a></li>
      </ul>
   </div>   
</div>

<div id="main">
   <div style="height:2px; background-color:blue; top: 0px;"></div>
      <div id="showsearch">

      </div>

and yeah, basically i want to have the result of the searchdivebay.php form action be displayed inside the "showsearch" div at the bottom of the code. the script works and i could post the code for that if necessary. but to the point, what is the javascript (if any) to have this functionality?

Answer 1

The simplest way is to use an inline frame and refer to it as target in the from. The inline frame can be wrapped inside a div if needed, of course. Example:

<form id="searchdivebay" action="searchdivebay.php" method="get"
   target="results">
...
</form>
...
<iframe name="results" width="500" height="200">
</iframe>

Answer 2

It looks like you will want to use some JQuery like below (which will of course require that you actually include the JQuery library):

function fetchData(){
  var url = 'searchdivebay.php';
  // The jQuery way to do an ajax request
  $.ajax({            
    type: "GET",
    url: url,
    data: "", // Your parameters here. looks like you have none
    success: function(html){
      // html contains the literal response from the server
      $("#showsearch").html(html);
    }
  });
}

Hope this helps!