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.
Related
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 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
I am trying to send multiple data to the database at ince using a dynamically created form which add new fields when i cick in the ADD button. I have got most of the project to work, but to send the data to the controller i need to dynamiccally incerement the name property which i amn not able to do. I am new to spring ad Jquery. At the momemnt i can only send two array objects with index 0 and 1.
This is my html Form
<script>
$(document).ready(function(){
//group add limit
var maxGroup = 10;
//add more fields group
$(".addMore").click(function(){
if($('body').find('.fieldGroup').length < maxGroup){
var fieldHTML = '<div class="form-group fieldGroup">'+$(".fieldGroupCopy").html()+'</div>';
$('body').find('.fieldGroup:last').after(fieldHTML);
}else{
alert('Maximum '+maxGroup+' groups are allowed.');
}
});
//remove fields group
$("body").on("click",".remove",function(){
$(this).parents(".fieldGroup").remove();
});
});
</script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary">
<a class="navbar-brand" th:href="#{/}" href="#">
<img src="" class="logo" th:src="#{/image/logo.png}" alt="logo">
Assam Power Distribution Company Limited</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
</div>
</nav>
<form method="post" th:action="#{/addfeeder}" th:object="${feeder}">
<div class="form-group fieldGroup" >
<div class="input-group mt-1 p-1 bg-light">
<input type="text" name="feeder[0].feeder_name" class="form-control" placeholder="Enter Feeder name" />
<select name="feeder[0].feeder_type" class="custom-select" id="inputGroupSelect01">
<option selected>Choose Capacity</option>
<option value="11">11</option>
<option value="33">33</option>
</select>
<input type="text" name="feeder[0].no_of_consumer_in_the_feeder" class="form-control" placeholder="Total Consumers"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
</div>
<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT"/>
</form>
<!-- copy of input fields group -->
<div class="form-group fieldGroupCopy" style="display: none;">
<div class="input-group mt-1 p-1 bg-light">
<input type="text" name="feeder[1].feeder_name" class="form-control" placeholder="Enter Feeder name"/>
<select name="feeder[1].feeder_type" class="custom-select" id="inputGroupSelect01">
<option selected>Choose Capacity</option>
<option value="11">11</option>
<option value="33">33</option>
</select>
<input type="text" name="feeder[1].no_of_consumer_in_the_feeder" class="form-control" placeholder="Enter Consumers"/>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-remove" aria-hidden="true"></span> Remove
</div>
</div>
</div>
This is my controller
//adding feeder details
#PostMapping("/addfeeder")
public String addFeeder(#ModelAttribute FeederList feederlist)
{
System.out.println("Data"+feederlist);
System.out.println(feederlist.getFeeder().size());
for(Feeder c:feederlist.getFeeder())
System.out.println(c);
return "feeder";
}
public class FeederList {
private List<Feeder> feeder=new ArrayList<>();
public List<Feeder> getFeeder() {
return feeder;
}
public void setFeeder(List<Feeder> feeder) {
this.feeder = feeder;
}
}
Used clone() on page load to make a copy of the first group. When adding a new one we make another clone of the stored one
Creating a wrapping container for the groups making it simpler to append to
Created function adjustNames() that gets called when row added or removed. The remove process throws off indexing of names that follow it so seemed safest just to go through them all. You can see the text input names set as their values for verification in development
todo : Bug if remove all rows then add one. Perhaps prevent remove if only one left
//group add limit
var maxGroup = 5;
var $groupContain = $('#group-container');
// clone first group
var $groupCopy = $groupContain.find('.fieldGroup').first().clone();
$groupCopy.find(':input').val('') // clear any values if prepopulated
//add more fields group
$(".addMore").click(function() {
var groupLen = $groupContain.find('.fieldGroup').length
if (groupLen < maxGroup) {
var $newGroup = $groupCopy.clone();
$groupContain.append($newGroup);
adjustNames()
} else {
alert('Maximum ' + maxGroup + ' groups are allowed.');
}
});
function adjustNames(){
// clear console for demo
$groupContain.find('.fieldGroup').each(function(i){
var $inputs = $(this).find(':input[name]');
// uses the group index to update array names
$inputs.attr('name', function(j, currName) {
return currName.replace(/\[\d+\]/, `[${i}]`);
});
// for demo set names in text fields
$inputs.filter(':text').val(function(){
return this.name;
});
});
}
//remove fields group
$("body").on("click", ".remove", function() {
$(this).parents(".fieldGroup").remove();
adjustNames()
});
a{display:inline-block;padding:10px; font-size:1.2em}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" th:action="#{/addfeeder}" th:object="${feeder}">
<div id="group-container">
<div class="form-group fieldGroup">
<div class="input-group mt-1 p-1 bg-light">
<input type="text" name="feeder[0].feeder_name" class="form-control" placeholder="Enter Feeder name" />
<select name="feeder[0].feeder_type" class="custom-select" id="inputGroupSelect01">
<option selected>Choose Capacity</option>
<option value="11">11</option>
<option value="33">33</option>
</select>
<input type="text" name="feeder[0].no_of_consumer_in_the_feeder" class="form-control" placeholder="Total Consumers" />
<button class="remove"> Remove </button>
</div>
</div>
</div>
<div class="input-group-addon">
<span class="glyphicon glyphicon glyphicon-plus" aria-hidden="true"></span> Add
</div>
</div>
<!--<input type="submit" name="submit" class="btn btn-primary" value="SUBMIT" />-->
</form>
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'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());
});
});