Hello Everyone
I am trying to get option value from select box on button click but it shows undefined in console .Options value are coming from server
Here is my html code
<div class="form-group">
<label class="control-form" for="cityid">Selct City</label>
<select type="text" class="form-control" placeholder="City" id="acity" >
<option value="">--Select City--</option>
<option ng-repeat="city in cityinfo" ng-value="{{city.id}}" ng-selected="{{city.id ==cityid}}">{{city.cityname}}</option>
</select>
<button class="btn btn-info prevnext pull-right" ng-click="nextpage()">Next <i class="fa fa-arrow-right"></i></button>
Controller.js file code
$scope.nextpage = function(pageno) {
console.log($scope.cityinfo);
}
Thanks in advance
Use ng-options instead of ng-repeat.
Like this:
Updated
<select type="text" class="form-control" placeholder="City" id="acity" ng-options="city.id as city.cityname for city in cityinfo track by city.id" ng-model="selectedCity">
<option value="">--Select City--</option>
</select>
<button class="btn btn-info prevnext pull-right" ng-click="nextpage(selectedCity)">Next <i class="fa fa-arrow-right"></i></button>
JS:
$scope.nextpage = function(selectedCity){
console.log(selectedCity);
}
Here is the sample code.
Html code
<select type="text" class="form-control" placeholder="City" id="acity" ng-options="city.id as city.cityname for city in cityinfo track by city.id" ng-model="currentCity">
<option value="">--Select Cities--</option>
</select>
<button class="btn btn-info prevnext pull-right" ng-
click="nextpage(currentCity)">Next <i class="fa fa-arrow-right"></i>
</button>
JS function
$scope.nextpage = function(currentCity){
console.log(currentCity);
}
Related
I'm working on an assignment and I'm having some trouble.
I have an input, select and button that needs to be cloned when pressed that button. Once it is pressed, I need to have another button that when clicked makes disappear the cloned item.
So far I have everything up until the last button that makes it disappear.
Here's my code:
$(document).ready(function() {
$("#masT").click(function() {
$("#nuevo-tel").clone(true).append($('<input type="button" value="-" id="menos"/>')).appendTo(".grupo-tel");
});
});
$("#menos").click(function() {
$(this).closest('div').find('#todo-tel').remove();
});
<div class="form-group">
<div id="todo-tel">
<div class="grupo-tel">
<span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
<button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
</div>
</div>
</div>
You need to use classes instead of ids, since ids need to be unique
You need to use event delegation $(document).on("click", ".menos", function() {})
Check code below:
$(document).ready(function() {
$("#masT").click(function() {
$("#nuevo-tel").clone(true).append($('<input type="button" value="-" class="menos"/>')).appendTo(".grupo-tel");
});
$(document).on("click", ".menos", function() {
$(this).closest('.nuevo-tel').remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<div id="todo-tel">
<div class="grupo-tel">
<span id="nuevo-tel" class="nuevo-tel">
<input name="telefono" type="text" id="telefono" placeholder="Teléfono" class="form-control">
<select class="seleccion">
<option value="m">Móvil</option>
<option value="c">Casa</option>
<option value="t">Trabajo</option>
<option value="o">Otro</option>
</select></span>
<button class="mas-t btn" type="button" id="masT">+ <i class="fas fa-phone-alt"></i></button>
</div>
</div>
</div>
Here is the Fiddle link for my code
I user bootstrap 4.
When I click in the dropdown, Dropdown will close in my local environment. In fiddle, it's working fine.
Which point I missing in my local. Even my local and fiddle setup are the same.
JS Fiddle Link
<div class="dropdown d-inline-block">
<button class="btn btn-info dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Advance Filter
</button>
<div class="dropdown-menu pr-2 pl-2 advance-filter-dropdown" aria-labelledby="dropdownMenuButton">
<div class="advance-filter-wrap">
<div class="row">
<div class="col-6">
<div class="form-group">
<label for="" class="sr-only">By Agent</label>
<select name="" id="" class="form-control">
<option value="agent1">Agent 1</option>
<option value="agent2">Agent 2</option>
<option value="agent3">Agent 3</option>
<option value="agent4">Agent 4</option>
</select>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label for="" class="sr-only">Lead Potential</label>
<select name="" id="" class="form-control">
<option value="huge">Huge</option>
<option value="medium">Medium</option>
<option value="small">Small</option>
</select>
</div>
</div>
</div>
</div>
<div class="advance-filter-footer text-right">
<button class="btn btn-danger btn-sm">Reset All</button>
<button class="btn btn-success btn-sm">Apply</button>
</div>
</div>
</div>
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 have implemented Bootstrap datepicker in my webpage. I am using Bootstrap for CSS Styling.
Using bootstrap recommends that JQuery and Bootstrap JS should be included in the page at last. But doing so is making bootstrap datepicker malfunction.
Following is a snippet of my page through which i am able to use datepicker as well as bootstrap JS for a bootstrap Dropdown.
<head>
<script src="../js/jquery.js"></script>
<script src="../js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" media="screen" href="https://tarruda.github.com/bootstrap-datetimepicker/assets/css/bootstrap-datetimepicker.min.css">
<link href="../css/bootstrap.css" rel="stylesheet">
<script type="text/javascript" src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<script type="text/javascript"src="https://tarruda.github.com/bootstrap-datetimepicker/assets/js/bootstrap-datetimepicker.min.js"></script>
</head>
<div class="btn-group pull-right">
<button type="button" data-toggle="dropdown" class="btn btn-default dropdown-toggle" aria-haspopup="true" aria-expanded="false">Dropdown <span class="glyphicon glyphicon-triangle-bottom"></span></button>
<ul class="dropdown-menu">
<li><span class="glyphicon glyphicon-info-sign"></span> About <b>1</b></li>
<li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-alert"></span> Report a Bug</a></li>
<li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-text-background"></span> Suggest Enhancement</a></li>
<li><a data-toggle="modal" data-target="#optionModal"><span class="glyphicon glyphicon-phone-alt"></span> Contact Us</a></li>
</ul>
</div>
<div class="container">
<div id="questionblock">
<div class= "customscrollbar" id="questiondiv">
<div>
<button onclick="addtest();" class="btn btn-primary" style="margin-left:10px; margin-top:7px;"><span class="glyphicon glyphicon-plus"></span> Add New Test</button>
<a type="button" class="btn btn-default" style="margin-left:10px; margin-top:7px;"><span class="glyphicon glyphicon-refresh"></span> Refresh</a>
</div>
</div>
</div>
</div>
<div id="displaymasterblock">
<div class="alert alert-info fade in" id="addtestheader">
<span class="glyphicon glyphicon-plus"></span> Add New Test
</div>
<em> All fields are mandatory</em>
<form>
<div class="form-inline">
<div id="formelements">
<label>1. Name of Test :</label>
<input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters">
<label>2. Scheduled on :</label>
<div id="datetimepicker" class="input-append date">
<input type="text" style="height:30px;" placeholder="Date & Time of Test"></input>
<span class="add-on" style="height:30px;">
<i data-time-icon="icon-time" data-date-icon="icon-calendar"></i>
</span>
</div>
<script type="text/javascript"> //datepicker
$("#datetimepicker").datetimepicker({
format: "dd/MM/yyyy hh:mm:ss",
todayHighlight: true,
pick12HourFormat: true,
maskInput: true,
});
</script>
</div>
</div>
<div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;">
<span class="glyphicon glyphicon-user"></span> Select Target students for test
</div>
<div class="form-inline">
<div id="formelements">
<div class = "input-group">
<span class = "input-group-addon" style="width:40px;">3. Programme</span>
<select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();">
<option value="0" selected>Select One</option>
</select>
<span class = "input-group-addon">4. Branch</span>
<select id="branch" name="branch" class="form-control" onchange="changeofbranch();">
<option value="0">Select Programme</option>
</select>
</div>
<div class = "input-group" style="margin-top:10px;">
<span class = "input-group-addon" style="width:40px;">5. Semester</span>
<select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();">
<option value="0">Select Programme</option>
</select>
<span class = "input-group-addon">6. Course</span>
<select id="course" name="course" class="form-control" style="width:270px;" >
<option value="0">Problem solving and programming skills</option>
</select>
</div>
</div>
</div>
<center>
<div id="errordiv" style="width:400px;"></div>
<button type="button" class="btn btn-success">Save</button>
<button type="button" class="btn btn-default">Cancel</button>
</center>
</form>
<script src="../js/bootstrap.min.js"></script>
Markup inside <div id="displaymasterblock"> has been minified and used in a JS function to get triggered on a button click. Following is that JS function-
function addtest()
{
var element = '<div class="alert alert-info fade in" id="addtestheader"><span class="glyphicon glyphicon-plus"></span> Add New Test</div><em> All fields are mandatory</em><form><div class="form-inline"><div id="formelements"><label>1. Name of Test :</label><input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters"> <label>2. Scheduled on :</label><div id="datetimepicker" class="input-append date"><input type="text" style="height:30px;" placeholder="Date & Time of Test"></input><span class="add-on" style="height:30px;"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div><script type="text/javascript">$("#datetimepicker").datetimepicker({format: "dd/MM/yyyy hh:mm:ss",todayHighlight: true,pick12HourFormat: true});</script></div></div><div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;"><span class="glyphicon glyphicon-user"></span> Select Target students for test</div><div class="form-inline"><div id="formelements"><div class = "input-group"><span class = "input-group-addon" style="width:40px;">3. Programme</span><select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();"><option value="0" selected>Select One</option><option value="1">B.Tech</option><option value="2">M.Tech</option><option value="3">MCA</option><option value="4">M.Sc.</option></select><span class = "input-group-addon">4. Branch</span><select id="branch" name="branch" class="form-control" onchange="changeofbranch();"><option value="0">Select Programme</option></select></div><div class = "input-group" style="margin-top:10px;"><span class = "input-group-addon" style="width:40px;">5. Semester</span><select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();"><option value="0">Select Programme</option></select><span class = "input-group-addon">6. Course</span><select id="course" name="course" class="form-control" style="width:270px;" ><option value="0">Problem solving and programming skills</option></select></div></div></div><center><div id="errordiv" style="width:400px;"></div><button type="button" class="btn btn-success">Save</button><button type="button" class="btn btn-default">Cancel</button></center></form>';
document.getElementById('displaymasterblock').innerHTML = element;
}
What aabove function does is it puts all markup inside the <div id="displaymasterblock">
Datepicker is working i.e. calendar and clock icons are showing up and functioning perfectly when it is directly included in the markup as shown above however when i am using button click to show the same markup the datepicker stops functioning.
Please help me out here. I believe there is something wrong with external resource inclusion order but not sure.
I hope i explained myself properly.
Remove the script tag completely where you are appending the dynamic html content. After the dynamic elements are added to the dom, call the datepicker function. So modify your function like below -
function addtest() {
var element = '<div class="alert alert-info fade in" id="addtestheader"><span class="glyphicon glyphicon-plus"></span> Add New Test</div><em> All fields are mandatory</em><form><div class="form-inline"><div id="formelements"><label>1. Name of Test :</label><input type="text" class="form-control" id="testname" style="height:30px;" placeholder="Maximum 20 Characters"> <label>2. Scheduled on :</label><div id="datetimepicker" class="input-append date"><input type="text" style="height:30px;" placeholder="Date & Time of Test"></input><span class="add-on" style="height:30px;"><i data-time-icon="icon-time" data-date-icon="icon-calendar"></i></span></div></div></div><div class="alert alert-info fade in" id="addtestheader" style="height:25px;font-size:15px;padding:2px;"><span class="glyphicon glyphicon-user"></span> Select Target students for test</div><div class="form-inline"><div id="formelements"><div class = "input-group"><span class = "input-group-addon" style="width:40px;">3. Programme</span><select id="programme" name="programme" class="form-control" style="width:150px;" onchange="changeinprog();"><option value="0" selected>Select One</option><option value="1">B.Tech</option><option value="2">M.Tech</option><option value="3">MCA</option><option value="4">M.Sc.</option></select><span class = "input-group-addon">4. Branch</span><select id="branch" name="branch" class="form-control" onchange="changeofbranch();"><option value="0">Select Programme</option></select></div><div class = "input-group" style="margin-top:10px;"><span class = "input-group-addon" style="width:40px;">5. Semester</span><select id="semester" name="semester" class="form-control" style="width:150px;" onchange="changeinsemester();"><option value="0">Select Programme</option></select><span class = "input-group-addon">6. Course</span><select id="course" name="course" class="form-control" style="width:270px;" ><option value="0">Problem solving and programming skills</option></select></div></div></div><center><div id="errordiv" style="width:400px;"></div><button type="button" class="btn btn-success">Save</button><button type="button" class="btn btn-default">Cancel</button></center></form>';
document.getElementById('displaymasterblock').innerHTML = element;
$("#datetimepicker").datetimepicker({
format: "dd/MM/yyyy hh:mm:ss",
todayHighlight: true,
pick12HourFormat: true
});
}
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>