Throw the size of the bootstrap OnSubmit
Photo taken using Bootstrap
<form id="search" action="" method="post" >
<div class="dropdown">
<button data-toggle="dropdown" id="dropdownMenu1" type="button" class="btn btn-default dropdown-toggle">Fixed <span class="caret"></span></button>
<ul aria-labelledby="dropdownMenu1" role="menu" class="dropdown-menu">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Florida</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Texas</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Washington</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">New York</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Ohio</a></li>
</ul>
</div>
</form>
jQuery to select dropdown menu option
var jQee = jQuery.noConflict();
jQee(".dropdown-menu li").click(function(){
var selText = jQee(this).text();
jQee(this).parents('.dropdown').find('.dropdown-toggle').html(selText+' <span class="caret"></span>');
//jQee('#search').submit();
});
HTML will open
<select onchange="form.submit()" name="template">
<option value="F" selected="true">Florida</option>
<option value="T">Texas</option>
<option value="W">Washington</option>
<option value="N">New York</option>
<option value="O">Ohio</option>
</select>
In the dropdown above, I am option value
selecting based on the user's choice.
By doing this with Bootstrap
, I can store the dropdown selected
, but since I am using it with PHP
, I also need the value in a variable $_POST
to execute the SQL
query and display the results based on what value is selected in the dropdown.
How can I achieve this?
source to share
Use a hidden field and fill it in when the user selects a state.
Html
<form id="search" action="" method="post" >
<input type="hidden" name="selection">
<div class="dropdown">
<button data-toggle="dropdown" id="dropdownMenu1" type="button" class="btn btn-default dropdown-toggle">Fixed <span class="caret"></span></button>
<ul aria-labelledby="dropdownMenu1" role="menu" class="dropdown-menu">
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Florida</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Texas</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Washington</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">New York</a></li>
<li role="presentation"><a href="#" tabindex="-1" role="menuitem">Ohio</a></li>
</ul>
</div>
</form>
JavaScript
$(document).ready(function() {
$("ul li a").click(function() {
text = $(this).closest("li").text();
$("input[name='selection']").val(text);
$(this).parents('.dropdown').find('.dropdown-toggle').html(text+' <span class="caret"></span>');
$("#search").submit();
});
});
See jsfiddle Use a validate element to check the value of a hidden field.
source to share