Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 13 of 13
  1. #1
    New Coder
    Join Date
    Jan 2012
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts

    javascript select divs

    Hello guys, I am working with javascript and currently have the below code set up.

    This works well, however I would like to change the "select box" to a "search box"-

    When the user enters a search string, the matching DIV appears. If there is no matching DIV then "sorry nothing found" appears.

    Is this possible at all?



    Code:
    <!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">
    </head>
    <body>
    <script type="text/javascript">
    function show(obj) {
    no = obj.options[obj.selectedIndex].value;
    count = obj.options.length;
    for(i=1;i<=count;i++)
    document.getElementById('fleet'+i).style.display = 'none';
    if(no>0)
    document.getElementById('fleet'+no).style.display = 'block';
    }
    </script>
    
    
    <form name="myForm">
    <select onchange="show(this)">
    <option value="1">Please Choose</option>
    <option value="2">120</option>
    <option value="3">121</option>
    <option value="4">122</option>
    
    </select>
    </form>
    
    
    
    <div id="fleet1" style="display:block">Please Choose	<br>
    </div>
    
    
    
    <div id="fleet2" 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">
             <?php include("php/fleet/includes/table.php"); ?>
    <?php
       $path = $_SERVER['DOCUMENT_ROOT'];
       $path .= "/php/fleet/120.php";
       include_once($path);
    ?></tr></table>
    </td>
    </tr>
    </table></div>
    
    
    
    <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">
             <?php include("php/fleet/includes/table.php"); ?>
    <?php
       $path = $_SERVER['DOCUMENT_ROOT'];
       $path .= "/php/fleet/121.php";
       include_once($path);
    ?></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">
             <?php include("php/fleet/includes/table.php"); ?>
    <?php
       $path = $_SERVER['DOCUMENT_ROOT'];
       $path .= "/php/fleet/122.php";
       include_once($path);
    ?></tr></table>
    </td>
    </tr>
    </table></div>
    </body>
    </html>
    demo can be seen here:
    http://www.nctfleetlist.co.uk/div.php

  • #2
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    this seems to work. if you are planning on adding alot of fleets to the table I would suggest renaming your divs to match their fleet number, then it will become alot simpler, but if there are just a few, this should do...

    Code:
    <!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">
    </head>
    <body>
    <script type="text/javascript">
    var showndiv=false;
    function show() {
    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>
    
    
    <form name="myForm">
    <input type="text" id="tb">
    <input type="button" value="please choose" onclick="show()">
    </form>
    
    
    
    <div id="fleet1" style="display:block"><br>
    </div>
    
    
    <div id="fleet2" 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">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></div>
    
    
    <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>
    Last edited by xelawho; 01-05-2012 at 03:41 PM.

  • #3
    New Coder
    Join Date
    Jan 2012
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts
    That is fantastic, exactly what I was looking for! Thank you so much for your time and effort, I appreciate it!

    Just a quick niggle; when the user enters text that is not found (I believe it has been labelled "default" - the text "Sorry, nothing found" is displayed. If the user then searches again and the div is found, the default text remains. Is it easy enough to hide this text once a correct search term has been found? -

    Before replying I did try and create a "clear" button, which I hoped would 'hide' the default text, while showing the correct div.
    I also looked at the "else if" code ...

    Code:
    } else { 
                hide();
                $('#fleet1').show();
    and doing a loop...

    Code:
    for(x=1; x<totalContents; x++) {
        if(document.getElementById('fleet3'+x).style.display=='block') {
            document.getElementById('fleet1'+x).style.display='none';
        } else {
            document.getElementById('fleet'+x).style.display='block';
        }
    }
    Still struggling, is there a simpler way to do this?

    Many thanks

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    sorry I didn't notice that. there is a simpler way - at the start of the show() function, just change the if statement to this:
    Code:
    if (showndiv){document.getElementById(showndiv).style.display = 'none';
    document.getElementById('fleet1').innerHTML="";
    }

  • #5
    New Coder
    Join Date
    Jan 2012
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Cool, that worked but only if I press the "please choose" button twice, (once displays the correct div with the default text and when pressed again the default text is cleared) and notoriously it works flawlessly every time the search is used after the first time

    Which is weird; why would it not work as it should? ( I have tested with Chrome and IE)


    If you have the time for another quick look the link is below. Don't worry if not, you have done more than enough!!


    http://www.nctfleetlist.co.uk/div3.php

    Cheers

  • #6
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    ah, I get it. good thing you're doing the testing on this one

    so, just take this line out of the if statement:
    Code:
    document.getElementById('fleet1').innerHTML="";
    and put it before it (ie, at the start of the function)

    and then I think you're good to go.

  • Users who have thanked xelawho for this post:

    mulder (01-06-2012)

  • #7
    New Coder
    Join Date
    Jan 2012
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts
    That's done it!

    Thanks so much for your help, time and effort! I hope you win the 'most helpful member' award, all the best

  • #8
    New Coder
    Join Date
    Jan 2012
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Hello, me again!

    Just wondering, when the above is finished it will contain over 300+ hidden divs thus taking the load time of the page to unrealistic levels.

    Is there a way of making it so either;

    a) when a user clicks "search" a new page opens and the function displays the correct div
    or

    b) display a link that, when clicked performs an 'include' function that will display the page that contains the function and divs.

    Thanks in advance.

  • #9
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    I would think carefully about either of those options before going too far down that road.

    If I understand what you're proposing, it will mean making 300+ pages of nearly identical content. And possibly the time saved in initial page load will be eaten up as the user has to navigate back and forth between separate pages.

    Here's what I would be doing:

    Presumably you have all of this information in a database already. Connect the database to the page. On page load (or whenever you decide) the database dumps just the relevant details (Fleet, Registration, Chassis, Body, Seating and Brand) of each available item into the page's "memory" then when the user chooses that fleet number the code constructs one div (the same div, really) and just fills in the relevant blanks.

    The page load is much quicker because there will be 1/300th of the html.

    It sounds complicated, but it's not, and if you have that database it will probably be the most efficient way to do this (in terms of setup, modifying details later and load times).

    That's what I think anyway, without having done speed testing on any of this. Below is a small example with the "database" hardcoded. Let me know what you reckon.

    Code:
    <!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">
    </head>
    <body>
    <script type="text/javascript">
    function show() {
    theval=document.getElementById('tb').value;
    for (var i=0; i<fleets.length; i++) {
    if (fleets[i][0]==theval){
    document.getElementById("message").style.display = 'none';
    document.getElementById('fleet').innerHTML=fleets[i][0]
    document.getElementById('reg').innerHTML=fleets[i][1]
    document.getElementById('chassis').innerHTML=fleets[i][2]
    document.getElementById('body').innerHTML=fleets[i][3]
    document.getElementById('seating').innerHTML=fleets[i][4]
    document.getElementById('brand').innerHTML=fleets[i][5]
    document.getElementById("table").style.display = 'block';
    return;
    		} 
    	} 
    	document.getElementById("table").style.display = 'none';
    	document.getElementById("message").style.display = 'block';
    }
    
    fleets=[["120","W599 PTO","M920","OPTARE","B33F","Network Green" ],
    		["121","W601 PTO","M920","OPTARE","B33F","Network Green"],
    		["122","W602 PTO","M920","OPTARE","B33F","Network Green"]
    		]
    		 
    </script>
    
    
    <form name="myForm">
    <input type="text" id="tb">
    <input type="button" value="please choose" onclick="show()">
    </form>
    
    
    
    <div id="message" style="display:none">Sorry, not found.<br>
    </div>
    
    
    <div id="table" 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" id="fleet" width="14%" bgcolor="#FFFFFF"> 
      <FONT class="font"></FONT></TD> 
               <TD valign="middle" id="reg" align="center" width="16%" bgcolor="#FFFFFF"> 
             <FONT class="font"></FONT> 
        </TD> 
    	<TD valign="middle" id="chassis" align="center" width="19%" bgcolor="#FFFFFF">  
               <FONT class="font"></TD> 
               <TD valign="middle" id="body" align="center" width="19%" bgcolor="#FFFFFF"> 
             <FONT class="font"></font>
    
        </TD> 
    <TD valign="middle" align="center" id="seating" width="12%" bgcolor="#FFFFFF"> 
             <FONT class="font"></font>
        </TD> 
    	<TD valign="middle" align="center" id="brand" width="19%" bgcolor="#FFFFFF"> 
             <font class="font"><font color="#348017"></a></a></font> 
        </TD>  
    </tr></table>
    </td>
    </tr>
    </table></div>
    </body>
    </html>
    Last edited by xelawho; 01-11-2012 at 03:35 PM.

  • #10
    New Coder
    Join Date
    Jan 2012
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts
    yes that could work well; certainly in its "hardcoded" form. I have to admit the info is not in a database already, but that can be done; if i remember rightly, is it something like...

    Code:
    <?php  
    $host   = 'localhost'; 
    $dbUser = 'username';   
    $dbPass = 'password'; 
    $db = 'db_name'; 
    mysql_connect("$host", "$dbUser", "$dbPass") or die(mysql_error());
    mysql_select_db("$db") or die(mysql_error());
    
    $result = mysql_query("SELECT fleet,reg,chassis,body,seating,brand" ) or die(mysql_error());   
    while($row = mysql_fetch_array( $result )) {	
    print "what would I put here?";
    }
    ?>
    I'm a bit ruff around the edges with mysql

  • #11
    New Coder
    Join Date
    Jan 2012
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts
    OK, i have set up a few records in mysql and have coded the html to display the record of fleet 120. How do I now merge what you posted earlier with the "hardcode" with the actual db code below:

    Code:
    <html>
    <body>
    <?php
    $username="xxx";
    $password="xxx";
    $database="xxx";
    
    mysql_connect(localhost,$username,$password);
    @mysql_select_db($database) or die( "Unable to select database");
    $query="SELECT * FROM fleet WHERE fleet = 120"; 
    $result=mysql_query($query);
    
    $num=mysql_numrows($result);
    
    mysql_close();
    ?>
    <table border="0" cellspacing="2" cellpadding="2">
    <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>
    
    <?php
    $i=0;
    while ($i < $num) {
    
    $f1=mysql_result($result,$i,"fleet");
    $f2=mysql_result($result,$i,"reg");
    $f3=mysql_result($result,$i,"chassis");
    $f4=mysql_result($result,$i,"body");
    $f5=mysql_result($result,$i,"seating");
    $f6=mysql_result($result,$i,"brand");
    ?>
    
    <tr>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $f2; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $f3; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $f4; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $f5; ?></font></td>
    <td><font face="Arial, Helvetica, sans-serif"><?php echo $f6; ?></font></td>
    </tr>
    
    <?php
    $i++;
    }
    ?>
    </body>
    </html>

  • #12
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    I don't know much about php, but I think you can do it this way. If not, post back and maybe someone who understands php better can help you out...

    Code:
    <script type="text/javascript">
    
    var fleets = [];
    
    
    <?php
    $username="xxx";
    $password="xxx";
    $database="xxx";
    
    mysql_connect(localhost,$username,$password);
    @mysql_select_db($database) or die( "Unable to select database");
    $query="SELECT * FROM fleet WHERE fleet = 120"; 
    $result=mysql_query($query);
    
    while($row = mysql_fetch_array($result))
    {
    	$fleet = $row['fleet'];
    	$reg = $row['reg'];
    	$chassis = $row['chassis'];
    	$body = $row['body'];
    	$seating = $row['seating'];
    	$brand = $row['brand'];
    ?>
    // switch to JavaScript code for simplicity
    obj={fleet:"<?php echo $fleet;?>",
    	reg:"<?php echo $reg;?>",	
    	chassis:"<?php echo $chassis;?>",
    	bod:"<?php echo $body;?>",	
    	seating:"<?php echo $seating;?>",	
    	brand:"<?php echo $brand;?>"	
    	}
    fleets.push(obj);
    	}
    <?php
    }
    ?> 
    
    
    function show() {
    theval=document.getElementById('tb').value;
    for (var i=0; i<fleets.length; i++) {
    if (fleets[i].fleet==theval){
    document.getElementById("message").style.display = 'none';
    document.getElementById('fleet').innerHTML=fleets[i].fleet;
    document.getElementById('reg').innerHTML=fleets[i].reg;
    document.getElementById('chassis').innerHTML=fleets[i].chassis
    document.getElementById('body').innerHTML=fleets[i].bod;
    document.getElementById('seating').innerHTML=fleets[i].seating;
    document.getElementById('brand').innerHTML=fleets[i].brand;
    document.getElementById("table").style.display = 'block';
    return;
    		} 
    	} 
    	document.getElementById("table").style.display = 'none';
    	document.getElementById("message").style.display = 'block';
    }
    		 
    </script>
    
    
    <form name="myForm">
    <input type="text" id="tb">
    <input type="button" value="please choose" onclick="show()">
    </form>
    
    
    
    <div id="message" style="display:none">Sorry, not found.<br>
    </div>
    
    
    <div id="table" 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" id="fleet" width="14%" bgcolor="#FFFFFF"> 
      <FONT class="font"></FONT></TD> 
               <TD valign="middle" id="reg" align="center" width="16%" bgcolor="#FFFFFF"> 
             <FONT class="font"></FONT> 
        </TD> 
    	<TD valign="middle" id="chassis" align="center" width="19%" bgcolor="#FFFFFF">  
               <FONT class="font"></TD> 
               <TD valign="middle" id="body" align="center" width="19%" bgcolor="#FFFFFF"> 
             <FONT class="font"></font>
    
        </TD> 
    <TD valign="middle" align="center" id="seating" width="12%" bgcolor="#FFFFFF"> 
             <FONT class="font"></font>
        </TD> 
    	<TD valign="middle" align="center" id="brand" width="19%" bgcolor="#FFFFFF"> 
             <font class="font"><font color="#348017"></a></a></font> 
        </TD>  
    </tr></table>
    </td>
    </tr>
    </table></div>
    </body>
    </html>
    </body>
    </html>

  • Users who have thanked xelawho for this post:

    mulder (01-13-2012)

  • #13
    New Coder
    Join Date
    Jan 2012
    Posts
    33
    Thanks
    12
    Thanked 0 Times in 0 Posts
    The above didn't work; however I have now found a solution to what I wanted; Using a form of lightbox script, when clicking on a link a new window opens loading the page that contains the hidden divs.

    For anyone in the future wanting to know the solution search online for "greybox"

    Code:
    <!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">
    <script type="text/javascript">
            var GB_ROOT_DIR = "./greybox/greybox/";
        </script>
    
        <script type="text/javascript" src="greybox/greybox/AJS.js"></script>
        <script type="text/javascript" src="greybox/greybox/AJS_fx.js"></script>
        <script type="text/javascript" src="greybox/greybox/gb_scripts.js"></script>
        <link href="greybox/greybox/gb_styles.css" rel="stylesheet" type="text/css" media="all" />
    
        <script type="text/javascript" src="greybox/static_files/help.js"></script>
        <link href="greybox/static_files/help.css" rel="stylesheet" type="text/css" media="all" />
    </head>
    <body>
    <a href="div3.php" title="Search" rel="gb_page_center[720, 300]">Search</a> 
    </body>
    </html>
    Thank you so much for your help, wouldn't have ever got this far without you. It is appreciated!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •