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
Related
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>
I have a form on the page and displayed it as none. And there is a button in the page I want when clicking on the button the form to display.
How can I do that?
<button type="button" class="btn btn-primary add-city">اضافه مدينة جديدة +</button>
and form code is this
<div id="forma">
<div class="form-head">
<p id="add-city">+اضافة المدينة</p>
<i class="fa fa-times-circle close" aria-hidden="true"></i>
</div>
<form class="">
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>الدولة<span>*</span></label>
<select class="form-control">
<option>اختر الدوله </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(عربي)<span>*</span></label>
<input type="text" class="form-control" id="email">
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label>المحافظة<span>*</span></label>
<select class="form-control">
<option>اختر المحافظه </option>
</select>
</div>
<div class="form-group">
<label>اسم المدينه(انجليزي)</label>
<input type="text" class="form-control" id="email">
</div>
</div>
</div>
</div>
</form>
<div class="form-footer">
<button type="button" class="btn btn-primary">ارسال</button>
<button type="button" class="btn btn-secondary">الغاء</button>
</div>
</div>
I made a div with an id called forma so that I can call it in javascript. But I don't know the right way.
You can add an onclick attribute to the button that changes the display to block.
onclick="document.getElementById('forma').style.display = 'block'"
Just use the jQuery click property and show property
$( "#idbutton" ).click(function() {
$("#idform").show();
});
If you are using Bootstrap.js, you can safely use jQuery because it's required. Assuming you should click #add-city button to display the form, simply add to your app.js or inside your <script> tags
$('#add-city').click(function() {
$('#forma').show();
});
In order to toggle the form (show/hide) on every click, you could do something like
$('#add-city').click(function() {
$('#forma').toggleClass('hidden');
});
Is it possible that an added dynamic fields will still visible after refresh.
I found a related topic but its complicated.
related topic
I want to implement it in my work.
fiddle
https://jsfiddle.net/jqj1h4vb/
Thanks
SCRIPT
$(function()
{
$(document).on('click', '.btn-add', function(e)
{
e.preventDefault();
var controlForm = $('.controls form:first'),
currentEntry = $(this).parents('.voca:first'),
newEntry = $(currentEntry.clone()).appendTo(controlForm);
newEntry.find('input').val('');
controlForm.find('.btn-add:not(:last)')
.removeClass('btn-default').addClass('btn-danger')
.removeClass('btn-add').addClass('btn-remove')
.html('<span class="glyphicon glyphicon-minus" aria-hidden="true"></span> Remove ');
}).on('click', '.btn-remove', function(e)
{
$(this).parents('.voca:first').remove();
e.preventDefault();
return false;
});
});
HTML
<div class="container">
<div class="control-group" id="fields">
<div class="controls">
<form role="form" autocomplete="off">
<div class="row">
<div class="voca">
<div class="col-md-3">
<input class="form-control" placeholder="Name this snippet" name="voca" type="text" value="Dynamic Form Fields - Add & Remove BS3">
</div>
<div class="col-md-3">
<input class="form-control" placeholder="Name this snippet" name="vocatrans" type="text" value="Dynamic Form Fields - Add & Remove BS3">
</div>
<div class="col-md-1">
<select class="form-control">
<option>1</option>
<option>2</option>
</select>
</div>
<button type="button" class="btn btn-success btn-add" >
<span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> Add more
</button>
</div>
</div>
</form>
<br>
</div>
</div>
</div>
In your fiddle, the fields gets removed when the script is run again. I don't see the problem. And if the problem persist on your browser. Please use Ctrl + F5 to refresh.
You can archive this by two ways ..
Store value and data in session.
Store value and data in database.
And then after page load, you just fetch data from database or session
I try to create a search box with a dropdown inside the search text field
For now this is my result:
http://www.bootply.com/46drKn8dRs#
But i prefer the dropdown is on the right, any help?
This is how I fixed it:
.btn.dropdown-toggle{
border-radius:0;
}
Here is your updated Bootply
I moved the element and added the above CSS code.
if you want to move de dropdown to the right, you can just move all the tag after the search text field like this:
<div class="row">
<div class="col-md-6">
<div class="form-horizontal">
<div class="input-group">
<input id="txtkey" type="text" class="form-control" placeholder="Enter here" aria-describedby="ddlsearch">
<div class="ddl-select input-group-btn">
<select id="ddlsearch" class="selectpicker form-control" data-style="btn-primary">
<option value="france">France</option>
<option value="austria">Austraia</option>
<option value="usa">usa</option>
</select>
</div>
<span class="input-group-btn">
<button id="btn-search" class="btn btn-info" type="button"><i class="fa fa-search fa-fw"></i></button>
</span>
</div>
</div>
</div>
</div>
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());
});
});