I'd like to intercept a choice made from a dropdown menu. This menu is made with https://github.com/CWSpear/bootstrap-hover-dropdown but that certainly doesn't change the basics.
My HTML code is:
<div class="row">
<div class="col-md-5">
<div class="form-group text">
<label class=" control-label" for="comment">Comment :</label>
<div class="input-group">
<input type="text" name="comment" class="form-control " placeholder="Free comment" id="" value="" />
<span class="input-group-btn">
<button class="btn btn-success add_language dropdown-toggle"
id="add_language-1"
title="Add a language"
data-toggle="dropdown"
data-hover="dropdown"> <i class="fa fa-plus"></i><span class="caret"></span>
</button>
<ul class="dropdown-menu" id="dropdown-menu">
<li><a tabindex="1">English</a></li>
<li><a tabindex="2">Spanish</a></li>
<li><a tabindex="3">German</a></li>
</ul>
</span>
</div>
</div>
</div>
</div>
And here is what I figure out to intercept the selection, but that doesn't work and to be more precise, I'm in fact interested by the tabindex's value:
$( document ).ready(function($) {
$('.dropdown-toggle').dropdownHover();
$('.dropdown-menu').on('click', function(event){
event.preventDefault();
var value = $('#dropdown-menu').selected();
alert(value);
});
}
In fact the onclick is even not called.
What is my mistake here?
Here is the corresponding jsFiddle
If you're ok with a select element, you can mark up your menu like this:
<select class="dropdown-menu" multiple>
<option value="1">English</option>
<option value="2">Spanish</option>
<option value="3">German</option>
</select>
then pull out the value using jQuery's val() method.
$(document).ready(function() {
$('.dropdown-menu').on('click', function(event){
event.preventDefault();
console.log($('.dropdown-menu').val());
});
});
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 html code where I want to find a tag that contains a value in one of its attributes to extract the text of it. Then with this text, I want to change the text of another tag.
Here is the html code :
<select name="client" class="select form-select" id="id_client" style="display : none ">
<option value="1109">Charles</option>
<option value="1108">Fred</option>
<option value="1107">Lionel</option>
<option value="1106">Robert</option>
<option value="1105">Mike</option>
</select>
<div class="dropdown dselect-wrapper select">
<button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Charles
</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="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
<button class="dropdown-item" data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
<button class="dropdown-item" data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
<button class="dropdown-item" data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
<button class="dropdown-item" data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
</div>
<div class="dselect-no-results d-none">No results found</div>
</div>
</div>
</div>
On another button that it is not in this html, I get an ID : <button onclick="myFunc(this.id)" id="1106">Select client</button>. I get in this case the value 1106 with this function.
I want to find the tag in the html code above that contains the attribute data-dselect-value="1106". It is the same id value from the button. Then I want to extract the text from it, so in the exemple the name "Robert" to be able to change the attribute and the text of the button (still on the html above)
<button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Charles
</button>
to
<button class="form-select " data-dselect-text="Robert" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Robert
</button>
So it means to change the value of the attribute data-dselect-text and the text of the tag by Robert.
I have this code, I do not see how to extract the text of the tage to change it in the another tag
function myFunc(clicked_id){
var elem = document.querySelector('[data-dselect-value="'+clicked_id+'"]');
};
Thank you
Let's use vanilla js for this. There isn't much to explain except the part getting from the dropdown item to the dropdown toggle which involved going up with closest then going down with querySelector.
function myFunc(clicked_id) {
var elem = document.querySelector('[data-dselect-value="' + clicked_id + '"]');
var text = elem.innerText;
var parent = elem.closest(".dropdown");
var button = parent.querySelector("[data-bs-toggle=dropdown]");
button.innerText = text;
button.setAttribute('data-dselect-text', text);
};
<select name="client" class="select form-select" id="id_client" style="display : none ">
<option value="1109">Charles</option>
<option value="1108">Fred</option>
<option value="1107">Lionel</option>
<option value="1106">Robert</option>
<option value="1105">Mike</option>
</select>
<div class="dropdown dselect-wrapper select">
<button class="form-select " data-dselect-text="Charles" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Charles
</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="1109" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Charles</button>
<button class="dropdown-item" data-dselect-value="1108" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Fred</button>
<button class="dropdown-item" data-dselect-value="1107" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Lionel</button>
<button class="dropdown-item" data-dselect-value="1106" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Robert</button>
<button class="dropdown-item" data-dselect-value="1105" type="button" onclick="dselectUpdate(this, 'dselect-wrapper', 'form-select')">Mike</button>
</div>
<div class="dselect-no-results d-none">No results found</div>
</div>
</div>
</div>
<button onclick="myFunc(this.id)" id="1106">Select client (1106)</button>
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
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>Title</li>
<li>Author</li>
<li>School</li>
<li>Course Code</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?
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"));
});
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