Jasmeet Brar Jasmeet Brar - 4 months ago 10
HTML Question

How do you get the value of a dropdown list and make it an Input variable in Laravel?

The website that I'm making, using Laravel and Bootstrap, has a search bar along with a dropdown list, that will narrow the search down to a specific category. Here's the following code for the search bar:

<div class="container">
<form id="search_form" method="get" action="{{ route('search') }}">
<div class="row">
<div class="col-xs-8 col-xs-offset-2">
<div class="input-group">
<div class="input-group-btn search-panel">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span name="category" id="search_concept">Title</span> <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#title">Title</a></li>
<li><a href="#author">Author</a></li>
<li><a href="#school">School</a></li>
<li><a href="#course_code">Course Code</a></li>
</ul>
</div>
<!--<input type="hidden" name="_token" value="{{ Session::token() }}">-->
<input class="form-control" name="term" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text" id="filter">
<span id="search_submit" type="submit" class="btn input-group-addon glyphicon glyphicon-search" style="width:1%;"></span>

</div>
</div>
</div>
</form>
</div>


When I type "hello world" into the search bar and submit the form, I get redirected to this URL:
http://localhost:8000/search?term=hello+world


I want to also pick up the selected value of the dropdown list, so when I select 'title' as my category in the dropdown list and submit the form, I would get redirected to:

http://localhost:8000/search?category=title&term=hello+world


How do I approach this?

dMd dMd
Answer

You can modify it like this and use jQuery/js

<div class="container">
    <form id="search_form" method="get" action="{{ route('search') }}">
        <div class="row">    
            <div class="col-xs-8 col-xs-offset-2">
                <div class="input-group">
                    <div class="input-group-btn search-panel">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                            <span name="category" id="search_concept">Title</span> <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                          <li><a data-category="title" class="search_category" href="#title">Title</a></li>
                          <li><a data-category="author" class="search_category" href="#author">Author</a></li>
                          <li><a data-category="school" class="search_category" href="#school">School</a></li>
                          <li><a data-category="course_code" class="search_category" href="#course_code">Course Code</a></li>
                        </ul>
                    </div>
                    <!--<input type="hidden" name="_token" value="{{ Session::token() }}">-->         
                     <input type="hidden" name="category" id="category"/>
                    <input class="form-control" name="term" placeholder="Search Here" autocomplete="off" autofocus="autofocus" type="text" id="filter">
                    <span id="search_submit" type="submit" class="btn input-group-addon glyphicon glyphicon-search" style="width:1%;"></span>

                </div>
            </div>
        </div>
    </form>
</div>

jQuery:

$(".search_category").click(function(e){
    $("#category").val($(this).attr("data-category"));
});