So I have a dropdown button (with Bootstrap) that shows different actions.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Find on search bar 1</a>
<a class="dropdown-item" href="#">Find on search bar 2</a>
<a class="dropdown-item" href="#">Find on search bar 3</a>
</div>
</div>
I also have 3 possible search bars:
<div class="form-inline" >
<input class="form-control mr-sm-2" id="search-input" style="width: 18rem" placeholder="Search bar 1">
<input class="form-control mr-sm-2" id="search-input" style="width: 18rem" placeholder="Search bar 2">
<input class="form-control mr-sm-2" id="search-input" style="width: 18rem" placeholder="Search bar 3">
</div>
<button class="btn btn-outline-success" id="search-button">
<i class="fa fa-search"></i>
</button>
Now every search bar is linked to another search engine and the script for handling the input in each search bar is as follow:
<script>
const searchButton = document.getElementById('search-button');
const searchInput = document.getElementById('search-input');
const site = '...';
searchButton.addEventListener('click', () => {const url = site + searchInput.value;
const win = window.open(url, '_blank');
win.focus();
});
</script>
But I want to try to tie it all together, so the idea is that I have a dropdown that specifies each search engine and when a search engine is selected, it shows one of the three search bars on the screen, with a default search engine. So it shows one of these three (with one that is the default):
<input class="form-control mr-sm-2" id="search-input" style="width: 18rem" placeholder="Search bar 1">
<input class="form-control mr-sm-2" id="search-input" style="width: 18rem" placeholder="Search bar 2">
<input class="form-control mr-sm-2" id="search-input" style="width: 18rem" placeholder="Search bar 3">
So the process flow on the screen will be something as follow:
You see a default search bar and a dropdown button;
You select a search engine from the dropdown list;
The search bar changes to the search bar that is linked to the dropdown item that is selected.
Does anyone have an idea for doing this or did someone do this before?
One possible flow:
Give each search input a different ID. Use this same id as a data-id attribute on the respective dropdown-item. So it looks like:
<a class="dropdown-item" href="#" data-id="search-input-1">Find on search bar 1</a>
<input class="form-control mr-sm-2" id="search-input-1" style="width: 18rem" placeholder="Search bar 1">
So now, you can use a click event on the dropdown-item to get the data-id, and hence which search input should be shown. You can store which input is currently visible in a value, and change it upon every time a dropdown-item is clicked. And then use your search button as you're already doing, but using this saved value.
You can see here: JSFiddle
Related
I have a question. I'm beginner in web development.
So basically, I want to get the selected value for the dynamic dropdown in order to edit the form. I'm using the dselect https://github.com/jarstone/dselect/ js file for the dynamic dropdown.
I've tried using this $('#stock_category').val(data.stock_category); in order to get the selected value for the dropdown. But still didn't manage to get the selected value.
/////////////////////
When I did inspect the dropdown, it doesnt catch the selected value
$(document).on('click', '.edit_button', function() {
var stock_id = $(this).data('id');
$('#stock_out_form').parsley().reset();
$.ajax({
url: "stock_out_exec.php",
method: "POST",
data: {
stock_id: stock_id,
action: 'fetch_single'
},
dataType: 'JSON',
success: function(data) {
$('#stock_category').val(data.stock_category);
$('#stock_item').val(data.stock_item);
$('#modal_title').text('Edit Stock Out');
$('#action').val('Edit');
$('#submit_button').val('Edit');
$('#stockOutModal').modal('show');
$('#hidden_id').val(stock_id);
}
})
});
<!-- first dynamic dropdown -->
<select class="form-select" name="stock_category" id="stock_category" onchange="getId(this.value)" required="" style="display: none;">
<option value="0">Select Category</option>
<option value="1">PRODUCTS - MARKETING - LOGISTIC</option>
<option value="2">FREEGIFT</option>
</select>
<div class="dropdown dselect-wrapper ">
<button class="form-select " data-dselect-text="Select Category" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Select Category
</button>
<div class="dropdown-menu">
<div class="d-flex flex-column">
<input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="form-control" placeholder="Search" autofocus="">
<div class="dselect-items" style="max-height:360px;overflow:auto">
<button class="dropdown-item active" data-dselect-value="0" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Select Category</button>
<button class="dropdown-item" data-dselect-value="1" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">PRODUCTS - MARKETING - LOGISTIC</button>
</div>
<div class="dselect-no-results d-none">No results found</div>
</div>
</div>
</div>
<!-- selected value should be right here -->
<button class="form-select " data-dselect-text="Select Category" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Select Category
</button>
<p></p>
<!-- second dynamic dropdown -->
<select class="form-select" name="stock_item" id="stock_item" data-dselect-search="true" required="" style="display: none;">
<option value="0">Select Item</option>
</select>
<div class="dropdown dselect-wrapper ">
<button class="form-select " data-dselect-text="Select Item" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Select Item
</button>
<div class="dropdown-menu">
<div class="d-flex flex-column">
<input onkeydown="return event.key !== 'Enter'" onkeyup="dselectSearch(event, this, 'dselect-wrapper', 'form-select', false)" type="text" class="form-control" placeholder="Search" autofocus="">
<div class="dselect-items" style="max-height:360px;overflow:auto">
<button class="dropdown-item active" data-dselect-value="0" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Select Item</button>
</div>
<div class="dselect-no-results d-none">No results found</div>
</div>
</div>
</div>
<button class="form-select " data-dselect-text="Select Item" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Select Item
</button>
Try grabbing the option element with: $('#stock_category').find("option:selected")
Then try: $('#stock_category').find("option:selected").val()
and if that doesn't work, just grab the text with: $('#stock_category').find("option:selected").text()
and if there's extra whitespace, just strip it: $('#stock_category').find("option:selected").text().trim()
Edit 1, Showing copy element in dev console
Right link on Element + Inspect
Find Select in Element's Pane, should already be highlighted blue, and Copy. (when you hover over elements in the pane, the element on the page is highlighted)
When you Copy Element, it will copy the select field + ALL the options it contains. It should look like a complete mess when pasted. You can Chop out some Options and get rid of actual values (if needed) just be careful not to remove the option that is selected
Edit 2
This works: document.getElementById("stock_category").value
For some reason I can't access it using JQuery, but I can in Vanilla JS.
I have a form. Built with Bootstrap3. On this form I have twitter typeahead fields.
I need to be able to nest a button in the typeahead field as is standard with bootstrap.
When the form loads the button is part of the field. When the field is typed in the button shifts downwards approximately 4 pixels.
The HTML for that section of the form is:
<div class="form-group">
<div class="input-group" id="partTypeahead">
<label for="Part Number">Part Number</label>
<input type="text" class="form-control input-sm typeahead" id="partNumber" placeholder="4+ Characters then Press Search" data-toggle="tooltip" data-placement="top" title="Enter At Least 4 Characters And Then Press Search Button">
<span class="input-group-btn">
<button class="btn btn-default btn-xs moveDown" type="button" id="showPart" data-toggle="tooltip" data-placement="right" title="Go to Part"><span class="glyphicon glyphicon-open"></span></button>
</span>
</div>
</div>
I have even tried adding a method to modify the button's css when the field is typed in and it simply ignores anything like that.
Not sure if this is the exact solution you are looking for, check out this:
The HTML:
<div class="form-group">
<label for="Part Number">Part Number</label>
<div class="input-group" id="partTypeahead">
<input type="text" class="form-control input-sm typeahead" id="partNumber" placeholder="4+ Characters then Press Search" data-toggle="tooltip" data-placement="top" title="Enter At Least 4 Characters And Then Press Search Button">
<span class="input-group-btn">
<button class="btn btn-default btn-xs moveDown" type="button" id="showPart" data-toggle="tooltip" data-placement="right" title="Go to Part"><span class="glyphicon glyphicon-open"></span></button>
</span>
</div>
CSS:
label{
display:block;
}
input,button{
min-height:30px;
}
Check out the JSFiddle.
so I have an issue with trying to figure out how to get this to work. I want to make a dropdown selection, and I want all the selections in the dropdown to show up in the main input box along with the original input value.
Here is my form that I am using to send the values to ajax to send to my php file.
<div class="input-group" id="adv-search">
<input type="text" name="input1" class="form-control" id="filter" id="searchbox" placeholder="Something..."/ required>
<div class="input-group-btn">
<div class="btn-group" role="group">
<div class="dropdown dropdown-lg">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><span class="caret"></span></button>
<div class="dropdown-menu dropdown-menu-right" role="menu">
<form class="form-horizontal" role="form">
<div class="form-group">
<h4 class="text-center">Advanced Search</h4>
<label for="filter">Option</label>
<select class="form-control" name="place" id="myList">
<option selected></option>
<option value="option1">Option1</option>
<option value="option2">Option2</option>
<option value="option3">Option3</option>
</select>
</div>
<div class="form-group">
<label for="contain">Location</label>
<input class="form-control" name="something1" type="text" id="list2">
</div>
<div class="form-group">
<label for="contain">Something2</label>
<input class="form-control" name="contain" type="text" id="list3">
</div>
<p><br/>
<button type="submit" id="insideButton" name="submit" class="btn btn-primary">Advanced Search</button>
</form>
</div>
<button type="submit" id="buttonClass" name="submit2" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span> Search</button>
</div>
</div>
</div>
</div>
</div>
Now I'm trying to get the values from the select dropdown(#myList) and the other inputs(#list2, #list3) and display them in the main input(#filter) along with the value that was entered in (#filter). My code below will display them per keypress but it repeats it since its in the function. How do I get each input to display in the #filter input.
$('#list2').on("input", function(){
var filter = $(this).val();
var myList = $('#filter').val();
$('#filter').val(filter + " " + myList);
});
Here is a picture of what I would like to accomplish. Any and all help is greatly appreciated. Thank you.
hello If I am understanding correctly according to your image and your piece of code that you want to get the all option input value into the main search box if that so you can try this Jquery code
<script>
$(document).ready(function() {
$("#insideButton").click(function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
I just used one button as submit option you can change it as your wish
you can also write the same code if you want form submit option then there will be a slightly change
<script>
$(document).ready(function() {
$(".form-horizontal").on('submit',function(e) {
e.preventDefault();
$("#filter").val($("#list3").val()+" "+ $("#list2").val()+"
"+$("#myList").val()+" "+$("#filter").val());
});
});
</script>
hope it helps you can also check this fiddle
fiddle demo
I'm trying to create a advanced search with a specific filter.
Currently when using the filter option, everything gets searched, but I want to have it more specific.
I want to create a dropdown that gives you the option to search through the names or places instead of searching through all the results:
<form class="input-group col-md-4 form-inline">
<input type="text" class="form-control" placeholder="Search captures" ng-model="search"/>
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Options <span class="glyphicon glyphicon-cog"></span> </button>
<ul class="dropdown-menu">
<li><input type="radio" name="searchoption" value="All" id="All" checked><label for="all">Search through all</label></li>
<li><input type="radio" name="searchoption" value="Birdname" id="Birdname"><label for="birdname">Search by birdname</label></li>
<li><input type="radio" name="searchoption" value="Place" id="Place"><label for="place">Search by place</label></li>
</ul>
</div>
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search"> </span></button>
</span>
</form>
Depending on the selected radiobutton, I want the filter.search to change:
<li ng-repeat="capture in captures|filter:search:strict|orderBy:'created_at':true|startFrom:currentPage:10" class="masonry-item clickable">
So basicly I want the user to be able to select a specific radio button, and depending on what he picks, it'll search a specific result.
In the Angular documentation it states that my ng-model on my search input has to be one of the following:
<input type="text" class="form-control" placeholder="Search captures" ng-model="search.$>
<input type="text" class="form-control" placeholder="Search captures" ng-model="search.birdname">
<input type="text" class="form-control" placeholder="Search captures" ng-model="search.place">
Though is there a specific way I can change those, depending on the radio button checked?
Hope this is clear.
Few changes:
Change ng-model for input to search[searchBy]
<input type="text" ng-model="search[searchBy]">
Set same ng-model equals to searchBy for all radio buttons and set the value as per search by condition like $ for all, birdName to search in birdName property of the object that is stored in captures that you are trying to filter out.
<li><input type="radio" name="searchoption" ng-model="searchBy" value="$" id="All" checked><label
for="all">Search through all</label></li>
<li><input type="radio" name="searchoption" ng-model="searchBy" value="birdName" id="Birdname"><label
for="birdname">Search by birdname</label></li>
<li><input type="radio" name="searchoption" ng-model="searchBy" value="place" id="Place"><label
for="place">Search by place</label></li>
last change in ng-repeat to filter out based on searchBy value set by above radio buttons in search
<li ng-repeat="capture in captures|filter:search">...</li>
Set initial value in controller for searchBy equal to $ to search in all properties of the object on initial page load that can be changed by selecting different properties from drop down.
For more example please have a look at existing post angularjs: change filter options dynamically
Fiddle example mentioned in above post
I have a form with ul as a dropdown menu:
<div class="dropdown">
<button id="dLabel" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account Type
Doctor
Patient
How do I send what I select in it to a PHP $_POST variable?
I tried this post didn't work. Then, I got this form from this bootsrap templates signup form but I don't realy know javascript.
Here is the full form code:
<form action="account.php" class="popup-form" method="post">
<input type="text" name="fname" class="form-control form-white" placeholder="Full Name">
<input type="text" name="email" class="form-control form-white" placeholder="Email Address">
<input type="text" name="username" class="form-control form-white" placeholder="User Name">
<input type="password" name="passwrd" class="form-control form-white" placeholder="Password">
<div class="dropdown">
<button id="dLabel" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account Type
</button>
<ul class="dropdown-menu animated fadeIn" role="menu" aria-labelledby="dLabel">
<li class="animated lightSpeedIn"><a class="cl" href="#">Doctor</a></li>
<li class="animated lightSpeedIn"><a class="cl" href="#">Patient</a></li>
</ul>
</div>
<div class="checkbox-holder text-left">
<div class="checkbox">
<input type="checkbox" value="None" id="squaredOne" name="check" />
<label for="squaredOne"><span>I Agree to the <strong>Terms & Conditions</strong></span></label>
</div>
</div>
<input type="submit" class="btn btn-submit"></input>
</form>
Try this :
<div class="dropdown">
<button id="dLabel" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account Type
</button>
<ul class="dropdown-menu animated fadeIn" role="menu" aria-labelledby="dLabel">
<li class="animated lightSpeedIn"><a class="cl" href="#">Doctor</a></li>
<li class="animated lightSpeedIn"><a class="cl" href="#">Patient</a></li>
</ul>
</div>
JS Code :
$(".cl").click(function () {
var val = $(this).html();
$.post("test.php",{v:val},function (data){
alert(data);
});
});
test.php
<?php
if(isset($_POST["v"]) && $_POST["v"] != "") {
echo $_POST["v"];
exit;
}
?>
I'm assuming that your HTML and PHP files are in same folder.And you've included jQuery library in your HTML.
<ul> and <li> are not form tags that send value, you need to use <select> instead.
<select name="type">
<option value="doctor">Doctor</option>
<option value="patient">Patient</option>
</select>
In <ul> <li> tags you cannot select a value. If you are using any pre-defined jquery library then you can pass by post data. Else change the ul li tags to "radio buttons or checkboxes or select" according to your requirement.
Using the below code i fixed the problem
<form action="account.php" class="popup-form" method="post">
<input type="text" name="fname" class="form-control form-white" placeholder="Full Name">
<input type="text" name="email" class="form-control form-white" placeholder="Email Address">
<input type="text" name="username" class="form-control form-white" placeholder="User Name">
<input type="password" name="passwrd" class="form-control form-white" placeholder="Password">
<input class="span2" id="a_type" name="a_type" type="hidden">
<div class="dropdown">
<button id="dLabel" class="form-control form-white dropdown" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Account Type
</button>
<ul class="dropdown-menu animated fadeIn" role="menu" aria-labelledby="dLabel">
<li onclick="$('#a_type').val('Doctor'); $('#searchForm').submit()" class="animated lightSpeedIn"><a class="cl" href="#">Doctor</a></li>
<li onclick="$('#a_type').val('Patient'); $('#searchForm').submit()" class="animated lightSpeedIn"><a class="cl" href="#">Patient</a></li>
</ul>
</div>
<div class="checkbox-holder text-left">
<div class="checkbox">
<input type="checkbox" value="None" id="squaredOne" name="check" />
<label for="squaredOne"><span>I Agree to the <strong>Terms & Conditions</strong></span></label>
</div>
</div>
<input type="submit" class="btn btn-submit"></input>
</form>
In the li tag add an attribute. Example:
<li class="animated lightSpeedIn" name_pressed="Doctor">Doctor</li>
and I assume you have an event for clicking the the li. If not, you can add a class. When you click that li with the respective class take the attribute. In this exemple you will take the "Doctor" from name_pressed attribute and with an if redirect on the page you want.
Like this:
<li class="animated lightSpeedIn clickable_li" name_pressed="Doctor">Doctor</li>
and the javascript:
$(".clickable_li").click(function (e) {
var name = $(this).attr('name_pressed');
if (name == 'Doctor') {
//make something
}
});
Or you can add onClick event. Check this