How do we have two forms working on the same resultset? Taking the YouTube search example (see below)
InRedthedefaultsearchwheretheuserplacesthesearchandclicksonthesubmitformbutton(inthecaseofthemagnifyingglass)andinGreenanotherformwiththeresultfiltersthatappearonlyaftertheinitialsearchthisgreenformdoesnotneedtoclickonanysubmitkey,whatIwanttoknowishowtodothesecondform(Green)?asitdoesnotrequireasubmissionclick,howdoIreusetheredformresult,howdoIlinkittotheredform?
FormthatIdid:
With HTML5 :
Main form:
<form id="search_form" method="post" action="">
<input type="text" name="search_query" />
<input type="submit" />
</form>
Form complement (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 form property of the input tags, it indicates that the input tag belongs to the form above, even if it is not inside it.
Without HTML5 (with Javascript)
Main form:
<form id="search_form" method="post" action="">
<input type="text" name="search_query" />
<input type="submit" />
<input type="hidden" name="upload_date" />
</form>
Notice the upload_date field as hidden .
Form complement (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 div#search_filter is changed it updates the value of upload_date that is hidden inside the original form. It's just a bit more laborious to map these events from the elements that are out of the form to the ones that are inside.