show/hide advanced search form

A

Anonymous

Guest
Hello:

I am trying to get an "Advanced Search" form going and it just isn't working. I have search google to death and find more about text field searchs and now struggle with this. The idea is to click a command button and the bottom portion of the form opens up and displays the options. I have the javascript in place ( hide/show ) but I just can't get my tables into the area. Currently I have 3 tables across at 30% each ( I might make 2 at 45% ) that go to 100% when the screen size is 480px. I can figure out the php for that part the fields. Whether 1, 2 or 3, the tables should be centered to make it look better. I know I need another media query but don't care just yet. Also, for some reason a box appears in the advanced area that I do not know where it came from. The advanced search options could have many rows of these tables so flexibility would be great. Here is my link to see what it looks like and also included is the source. Please help.

http://www.pepelepew1962.x10.mx/search.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>

<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>

<meta
http-equiv="Content-Language"
content="en"
/>

<meta
name="viewport"
content="width=device-width; initial-scale=1.0"
/>

<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>

<script language="javascript">
function toggle_it(itemID){
// Toggle visibility between none and inline
if ((document.getElementById(itemID).style.display == 'none'))
{
document.getElementById(itemID).style.display = 'inline';
} else {
document.getElementById(itemID).style.display = 'none';
}
}
</script>



<style type="text/css">


table { border: 1px solid white; width: 100%; }

#tabler1
{
border: 1px solid cyan;
width: 30%;
float: left;
}

#tabler2
{
border: 1px solid yellow;
width: 30%;
float: left;
}

#tabler3
{
border: 1px solid blue;
width: 30%;
float: left;
}





@media (max-width:480px)
{

#tabler1
{
border: 1px solid cyan;
width: 100%;
float: left;
}

#tabler2
{
border: 1px solid yellow;
width: 100%;
float: left;
}

#tabler3
{
border: 1px solid blue;
width: 100%;
float: left;
}

}


</style>



<title>
Test Page
</title>

</head><body>

<div id="headerSandbag"></div>

<div id="pageWrapper">
<h1>
Web <span>Intersect<span></span></span>
</h1>

<div id="messages">
This is a message area!
</div>

<ul id="mainMenu">
<li><a href="/" class="current">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Log In</a></li>
</ul>

<div id="eMailNotice">
<a href="#mails" class="hasMail">
EMAILS ( 44 )
</a>
</div>

<hr />

<img src="728x090_uap.gif" width="728" height="90" class="advert"/>

<h2>Home</h2>

<div id="contentWrapper"><div id="content">
<form method="POST" action="--WEBBOT-SELF--">
<div class="subSection">
<hr/>
<br>
<br>
<table width="100%" border="1" bordercolor="#FF0000" cellpadding="2">
<tr>
<td> <input type="text" name="firstName"/>
<p> <input type="text" name="lastName"/></p>
<p> <input type="checkbox" name="option1" value="Milk"> Milk</p>
<p> <input type="checkbox" name="option1" value="Butter">
Butter</p>
<p> <input type="checkbox" name="option1" value="Cheese"> Cheese</p>
<p><br/></td>
</tr>
</table>

<input type="submit"/>
<br>
<br>
<br>
<table border="1" width="100%" bordercolor="#008000" id="table1">
<tr>
<td>
<input type=button OnClick="toggle_it('pr1')" VALUE="ADVANCED SEARCH">
</td>
</tr>
<tr >
<td colspan="2">

<table width="100%" id="pr1" name="police_response1" style="display:none;">
<tr>
<td align="right">Replace with the 3 tables:
<p><input name="fielder1" type="textbox" class="style7" value='' size='12'></p>
<p><input name="fielder2" type="textbox" class="style7" value='' size='12'></p>
<br />
</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<br>
<br>
<br>

<div id="tabler1">
<table>
<tr>
<th colspan="2">Table1</th>
</tr>
<tr>
<td>&nbspFIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td>&nbspFIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td>&nbspFIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
</table>
</div>

<div id="tabler2">
<table>
<tr>
<th colspan="2">Table2</th>
</tr>
<tr>
<td>&nbspFIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td>&nbspFIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td>&nbspFIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
</table>
</div>

<div id="tabler3">
<table>
<tr>
<th colspan="2">Table3</th>
</tr>
<tr>
<td>&nbspFIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td>&nbspFIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
<tr>
<td>&nbspFIELD TEXT1</td>
<td>
<select size="1" name="D1">
<option value="NONE">NONE</option>
<option value="ONE">ONE</option>
<option value="TWO">TWO</option>
<option>THREE</option>
</select>
</td>
</tr>
</table>
</div>

<div style="clear:both;"></div>
<br>
<input type="submit"/>
<br>
<br>
</div>
</form>

</div></div>

<div id="extras">


<div class="subSection">

<hr />

<p>
Morbi lacinia orci sed mauris facilisis, sed dignissim dolor tempus. Cras malesuada consequat purus a semper. Donec eu lectus nec turpis elementum rutrum. Nunc ultricies eros sit amet ultrices semper. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut ut sapien sit amet felis egestas tincidunt. Duis adipiscing eu leo et porttitor. Cras ut congue felis. Quisque ut tristique erat, et lobortis urna. Aliquam dictum, ante sit amet scelerisque semper, erat tellus pellentesque massa, vitae mollis diam leo et diam. Praesent lorem eros, tempor ut consectetur a, vehicula vel purus. Proin eleifend velit orci, blandit faucibus lectus venenatis non.
</p>
</div>

</div>

<hr />

<div id="footer">
Footer
</div>

</div>

</body></html>
 
rather than giving id="pr1" to table tag, add one span or div tag and copy your search table in that and assign "pr1" id to it, also remove id="pr1", style="display:none;" from table tag and apply it to span or div tag

or else replace your search table code by this

Code: 
<span id="pr1" style="display:none;">
<table width="100%" name="police_response1" >
<tr> 
<td align="right">Replace with the 3 tables:
<p><input name="fielder1" type="textbox" class="style7" value='' size='12'></p>
<p><input name="fielder2" type="textbox" class="style7" value='' size='12'></p>
<br />
</td>
</tr> 
</table> 
</span>

may this work for you
 
Hello:

Ok, I kind of have something working now. If you click the "ADVANCE SEARCH" button the table opens up and now has 3 boxes. Each box has a mini description of what I would like. So the first box says that this area/content should be replaced with the much lower Table1. The next box to be replaced with Table2 and finally box 3 is to be replaced with Table3. I have 10px as right margins on the divs only to show a separation visually. I know tables are NOT to be used for forms, but the exact form code will also be used to display mysql data on a later page.

http://www.pepelepew1962.x10.mx/search.html
 
You must log in or register to reply here.
Back
Top