With HTML5:
Master form:
<form id="search_form" method="post" action="">
<input type="text" name="search_query" />
<input type="submit" />
</form>
Supplement to the form (elsewhere on the page):
<div id="search_filter">
Upload date:<br/>
<input type="radio" name="upload_date" value="any" form="search_form" /> Any time<br/>
<input type="radio" name="upload_date" value="month" form="search_form" /> This month<br/>
<input type="radio" name="upload_date" value="year" form="search_form" /> This year<br/>
</div>
See the property form of tags input, she indicates that tag input belongs to the top form, even if it is not inside it.
No HTML5 (With Javascript)
Master form:
<form id="search_form" method="post" action="">
<input type="text" name="search_query" />
<input type="submit" />
<input type="hidden" name="upload_date" />
</form>
Look at the field upload_date as hidden.
Supplement to the form (elsewhere on the page):
<div id="search_filter">
Upload date:<br/>
<input type="radio" name="upload_date" value="any" /> Any time<br/>
<input type="radio" name="upload_date" value="month" /> This month<br/>
<input type="radio" name="upload_date" value="year" /> This year<br/>
</div>
Javascript code:
$("#search_filter > input[name=upload_date]").change(function() {
var $update = $("#search_form > input[name=upload_date]"),
value = $(this).prop("value");
$update.prop("value",value);
});
Whenever a radio within the div#search_filter is changed it updates the value of upload_date which is hidden inside the original form. It’s just a little more work mapping these events from the elements that are out of form to the real ones that are inside.
You can use Javascript to take actions when you click on one of the green options, and so do Submit automatic.
– Jorge B.
but what about the filter and Sort of the information returned from the database?
– Ricardo
you need to create the filter according to the options selected by doing Submit automatic you will send the data chosen by the user, and then you can mount your search query.
– Jorge B.
Example:
SELECT * FROM tabela1 WHERE tabela1.nome LIKE '%php%' AND TIMESTAMPDIFF(MINUTE,tabela1.tempo,NOW()) < 60. This would be a search with the word "php" and at the last minute– Jorge B.
Ok, but I would be repeating the query since it was performed the initial query searching only PHP (after it is available the green form for filter), as I would the green form answering the questions listed?
– Ricardo
Yes, you do the first search only by "php" then show the result shows the green form. And with the help of Javascript, every click you make on this form is made a Ubmit, as if you had clicked a button. And every click you do a new search with the filter you clicked on.
– Jorge B.