I am in the process of creating a search functionality. Please see UI example . The following is my HTML
<form class="navbar-form" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn"><span class="glyphicon glyphicon-search"></span> Search</button>
<a class="btn" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-menu-hamburger"></span> Filter
</a>
</form>
When the search button is clicked, whatever term has been entered needs to be passed in URL via a JS script in order to go to another page and display results.
Any help would be appreciated
Thank you
Add the action
and method
attributes to the form
tag. And the name
attribute to the input
tag.
This will go to the URL: search.php?term=value
<form action="search.php" method="GET" class="navbar-form" role="search">
<div class="form-group">
<input type="text" name="term" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-anz"><span class="glyphicon glyphicon-search"></span> Search</button>
<a class="btn btn-anz" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-menu-hamburger"></span> Filter
</a>
</form>
Yo have to add method and action attributes to the from tag.
Like this-
<form action="search.php" method="GET" class="navbar-form" role="search">
<div class="form-group">
<input type="text" name="item" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-anz"><span class="glyphicon glyphicon-search"></span> Search</button>
<a class="btn btn-anz" role="button" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<span class="glyphicon glyphicon-menu-hamburger"></span> Filter
</a>
then using javascriupt you can use appropriate techinique to retrieve the value and process the search results.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.