1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:10 pm May 13, 2026

Forum Moderators: open

Message Too Old, No Replies

opening search results page on submit using divs

javascript, divs, search opens new page to view results

         

mulder

8:45 pm on Jan 9, 2012 (gmt 0)

10+ Year Member



Hello all, hope you are well!

I have the below code, which is a search function that, when a user inputs some data into the search box, the javascript looks for matching hidden divs and makes said divs show if a correct match is found.

I would like this function to open a new page and show the resulting div once the user presses the "search" button. - as I understand it, the script and all hidden divs would need to be on the new page and a "getElementByID" function used to pass the search data to the new page... I am wondering if anyone can help me out with this? the code and a demo page can be found below... 


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<LINK rel="stylesheet" type="text/css" href="<?php
  $path = $_SERVER['DOCUMENT_ROOT'];
  $path .= "/php/fleet/includes/website.php";
  include_once($path);
?>/php/font.css"></style>
</head>
<body>
<script type="text/javascript">
var showndiv=false;
function show() {
document.getElementById('fleet1').innerHTML="";
if (showndiv){document.getElementById(showndiv).style.display = 'none';

}
theval=Number(document.getElementById('tb').value);
switch (theval){
case 120:
showndiv='fleet2'
break;
case 121:
showndiv='fleet3'
break;
case 122:
showndiv='fleet4'
break;
default:
document.getElementById('fleet1').innerHTML="Sorry, nothing found"
return;
}
document.getElementById(showndiv).style.display = 'block';
}

</script>
<script type="text/javascript">
/////////////////////////////////////////////////////
// Between the quotation marks, list the id values of each div.

var IDvaluesOfEachDiv = "fleet2 fleet3 fleet4";

/////////////////////////////////////////////////////
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/[,\s"']/g," ");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/^\s*/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/\s*$/,"");
IDvaluesOfEachDiv = IDvaluesOfEachDiv.replace(/ +/g," ");
var IDlist = IDvaluesOfEachDiv.split(" ");

function ShowAllDivs() {
for(var i=0; i<IDlist.length; i++) { 
  document.getElementById(IDlist[i]).style.display = "";
  }
}

function HideAllDivs() {
for(var i=0; i<IDlist.length; i++) { 
  document.getElementById(IDlist[i]).style.display = "none";
  }
}
</script>

<form name="myForm">
<input type="text" id="tb">
<input type="button" value="Search" onclick="show()">
</form>

<div id="fleet1" style="display:block">
</div>


<div id="fleet2" style="display:none" class="fleetdiv"><br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
     <TR>
    <TD>
     <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
     <TR>
      <TH class="titlebg" bgcolor="#336699" width="16%">

       <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
      </TH>
       <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
       </TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

       </TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
       </TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
       </TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
       </TH>
     </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
 <FONT class="font">120<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=120"> <img 

src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD> 
      <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
     <FONT class="font">W599 PTO</FONT> 
  </TD> 
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
      <FONT class="font">M920</TD> 
      <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
     <FONT class="font">OPTARE</font>

  </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
     <FONT class="font">B33F</font>
  </TD> 
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
     <font class="font"><a href="http://www.nctfleetlist.co.uk/main/netgreen.php"><font color="#348017">Network 

Green</a></a></font> 
  </TD> 
</tr></table>
</td>
</tr>
</table>
<table align="right">
<TR>
<TD>
<a href="javascript:HideAllDivs()" class="font"><nobr>X Close</nobr></a></div></td></tr>
</table>



<div id="fleet3" style="display:none"><br>
<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
     <TR>
    <TD>
     <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
     <TR>
      <TH class="titlebg" bgcolor="#336699" width="16%">

       <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>
      </TH>
       <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
       </TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>

       </TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
       </TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
       </TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">

         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>
       </TH>
     </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
 <FONT class="font">121<a href="http://www.nctfleetlist.co.uk/photos/search.php?keywords=121"> <img 

src="http://www.nctfleetlist.co.uk/images/camera.png" border="0"></a></FONT></TD> 
      <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
     <FONT class="font">W601 PTO</FONT> 
  </TD> 
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
      <FONT class="font">M920</TD> 
      <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
     <FONT class="font">OPTARE</font>

  </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
     <FONT class="font">B33F</font>
  </TD> 
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
     <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> 
  </TD> 
</tr></table>
</td>
</tr>
</table></div>

<div id="fleet4" style="display:none"><br>

<table valign="top" align="center" border="0" width="690" style="border-collapse: collapse" cellpadding="0" cellspacing="0" 

bgcolor="#336699">
<TR border="0" bordercolor="#FFFFFF">
<TD valign="top">
     <TR>
    <TD>
     <TABLE cellpadding="4" cellspacing="1" border="0" width="100%" class="sortable">
     <TR>
      <TH class="titlebg" bgcolor="#336699" width="16%">
       <FONT size="2" class="tabletop" color="#FFFFFF"><B>Fleet</B></FONT>

      </TH>
       <TH class="titlebg" bgcolor="#336699" width="17%" align="center">
         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Registration</B></FONT>
       </TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">
         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Chassis</B></FONT>
       </TH>
<TH class="titlebg" bgcolor="#336699" width="19%" align="center">

         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Body</B></FONT>
       </TH>
<TH class="titlebg" bgcolor="#336699" width="13%" align="center">
         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Seating</B></FONT>
       </TH>
<TH class="titlebg" bgcolor="#336699" width="15%" align="center">
         <FONT size="2" class="tabletop" color="#FFFFFF"><B>Brand</B></FONT>

       </TH>
     </TR>
<TR> 
<TD align="left" width="14%" bgcolor="#FFFFFF"> 
 <FONT class="font">122</FONT></TD> 
      <TD valign="middle" align="center" width="16%" bgcolor="#FFFFFF"> 
     <FONT class="font">W602 PTO</FONT> 
  </TD> 
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
      <FONT class="font">M920</TD> 
      <TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
     <FONT class="font">OPTARE</font>

  </TD> 
<TD valign="middle" align="center" width="12%" bgcolor="#FFFFFF"> 
     <FONT class="font">B33F</font>
  </TD> 
<TD valign="middle" align="center" width="19%" bgcolor="#FFFFFF"> 
     <font class="font"><a href="/main/netgreen.php"><font color="#348017">Network Green</a></a></font> 
  </TD> 
</tr></table>
</td>
</tr>
</table></div>
</body>
</html>



[nctfleetlist.co.uk ]

daveVk

11:48 pm on Jan 10, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I would like this function to open a new page

Do you mean request a new page from the server ?

If so then the matching is probably best left to the server (php) and little/no js is needed.

What is the motivation to change from current approach ?

mulder

12:13 pm on Jan 11, 2012 (gmt 0)

10+ Year Member



With the current approach all hidden divs are loading with each page, slowing load times. I would rather the divs load on an "as needed" basis.
I have since thought of other options to try and achieve this... Mainly using an "onclick" call to load an include file when pressed.

However I am struggling with this also, so any help on either opening a new page, or including the file (only calling it when needed) would be greatly appreciated.

daveVk

10:19 pm on Jan 11, 2012 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



To get div content from server as needed, change show as below, I have used the jQuery library to keep reply short.

function show() {
var theval=document.getElementById('tb').value;
$('#fleet1').html('loading');
$('#fleet1').load('/getFleet.php?fleet='+encodeURIComponent(theval));
}

This requires getFleet.php on the server, which on the basis of the fleet value returns the appropriate div content.

Note that this approach hides the fleet data from search bots and users with javascript disabled, for better or worse.
 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

  1. Home
  2. Forums Index
  3. Browser Side / JavaScript and AJAX 8:10 pm May 13, 2026