Board index   FAQ   Search  
Register  Login
Board index php forum :: HTML HTML Basics

show/hide advanced search form

Discussing Html . Code , Software , other

Moderators: macek, egami, gesf

show/hide advanced search form

Postby pepelepew1962 » Sun Jul 28, 2013 4:09 pm

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><!-- image replacement --></span></span>
</h1>

<div id="messages">
This is a message area!
<!-- #messages --></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>
<!-- #eMailNotice --></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>&nbsp;<input type="text" name="firstName"/>
<p>&nbsp;<input type="text" name="lastName"/></p>
<p>&nbsp;<input type="checkbox" name="option1" value="Milk"> Milk</p>
<p>&nbsp;<input type="checkbox" name="option1" value="Butter">
Butter</p>
<p>&nbsp;<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">
<!--
This is the table we will be showing, or hiding. Note it's id.
If you are producing a series of table rows from a database,
you can give each row a dynamic id, perhaps the key for the row from the database, and use the show hide property for extended information, streamlining your page's presentation, but still giving the availability of all the information without additional page loads.
-->
<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><!-- .subSection -->
</form>

<!-- #content, #contentWrapper --></div></div>

<div id="extras">


<div class="subSection">

<!-- should probably be a h2 here --><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>
<!-- .subSection --></div>

<!-- #extras --></div>

<hr />

<div id="footer">
Footer
<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>
pepelepew1962
New php-forum User
New php-forum User
 
Posts: 14
Joined: Sat May 28, 2011 5:12 pm

Re: show/hide advanced search form

Postby pbs » Mon Jul 29, 2013 12:56 am

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: Select all
<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
pbs
New php-forum User
New php-forum User
 
Posts: 39
Joined: Sat May 11, 2013 1:40 am
Location: Nashik, India

Re: show/hide advanced search form

Postby pepelepew1962 » Mon Jul 29, 2013 6:14 pm

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
pepelepew1962
New php-forum User
New php-forum User
 
Posts: 14
Joined: Sat May 28, 2011 5:12 pm


Return to HTML Basics

Who is online

Users browsing this forum: No registered users and 0 guests

Sponsored by Sitebuilder Web hosting and Traduzioni Italiano Rumeno and antispam for cPanel.