I want to pass the selected value of my combo box to the the input value which has a id of "val".
I tried passing the value using jquery
$(document).ready(function() {
$('#btn').click(function(e) {
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
alert($('#val').val(selected));
});
});
});
But it's not working. Please help.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Form</h1>
<form method="post" id="form" name="form">
<div class="form-group row">
<label class="col-xs-3 control-label" style="margin-top: 10px;">Choice</label>
<div class="col-xs-5 selectContainer">
<select id="combobox" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<input id="val" type="hidden" name="val">
<input id="btn" class="btn btn-info" value="Submit">
</div>
</form>
</div>
<script type=text/javascript>
$(document).ready(function() {
$('#btn').click(function(e) {
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
alert($('#val').val(selected));
});
});
});
</script>
</body>
</html>
.change is not neccessary. On the Button click you can directly access the selected value of your dropdown. Please check the below code.
$(document).ready(function() {
$('#btn').click(function(e) {
alert($('#combobox option:selected').val());
});
});
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Form</h1>
<form method="post" id="form" name="form">
<div class="form-group row">
<label class="col-xs-3 control-label" style="margin-top: 10px;">Choice</label>
<div class="col-xs-5 selectContainer">
<select id="combobox" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<input id="val" type="hidden" name="val">
<input id="btn" class="btn btn-info" value="Submit">
</div>
</form>
</div>
</body>
</html>
you need to remove the click event in #btn
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
$('#val').val(selected)
alert($('#val').val());
});
https://jsfiddle.net/
Please try this.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>Form</h1>
<form method="post" id="form" name="form">
<div class="form-group row">
<label class="col-xs-3 control-label" style="margin-top: 10px;">Choice</label>
<div class="col-xs-5 selectContainer">
<select id="combobox" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
<input id="val" type="hidden" name="val">
<input id="btn" class="btn btn-info" value="Submit">
</div>
</form>
</div>
<script type=text/javascript>
$(document).ready(function() {
$('#combobox').change(function() {
var selected = $('option:selected', $(this)).text();
$('#val').val(selected)
alert($('#val').val());
});
});
</script>
</body>
</html>
You have nested your event handlers. Change within click. That is always a sign that the code is wrong. You will be adding a new change handler on every click, which is not what you want.
It is not 100% clear what you are trying to do, but you can start like this:
$(function() {
$('#combobox').change(function() {
var selected = $(this).val();
$('#val').val(selected);
alert($('#val').val());
});
});
Note: val() on a select will return the selected value, so you do not need to use option:selected and its text.
Related
I am using an intl-tel-input plugin to get the country code dropdown along with the country flag. I have another input field that has a country name as a dropdown. what I want is when the user selects any country from the country dropdown, then country code automatically gets selected in the country code dropdown. I used several methods but nothing works for me, I didn't find suitable documentation of this plugin too. this is my code.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
</head>
<body>
<div class="container-fluid">
<div class="row">
<h1>Select Country</h1>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="col-md-6 form-group hire-input-country_box position-relative">
<select name="country" class="form-control" id="country">
<option data-countryCode="DZ" value="213">Algeria</option>
<option data-countryCode="AD" value="376">Andorra</option>
<option data-countryCode="AO" value="244">Angola</option>
<option data-countryCode="AI" value="1264">Anguilla</option>
<option data-countryCode="AG" value="1268">Antigua & Barbuda
</option>
</select>
</div>
</div>
<div class="col-md-12 form-group">
<input type="tel" id="txtPhone" class="txtbox" />
</div>
</div>
</div>
<!-- Use as a jQuery plugin -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#country").change(function()
{
let value="+"+$(this).val();
$('#txtPhone').val(value);
})
var code = "+977"; // Assigning value from model.
$('#txtPhone').val(code);
$('#txtPhone').intlTelInput({
});
});
</script>
</body>
</html>
To do what you require, call the setCountry option of intlTelInput and provide the country-code data attribute value from the selected option:
$(function() {
$("#country").change(function() {
let countryCode = $(this).find('option:selected').data('country-code');
let value = "+" + $(this).val();
$('#txtPhone').val(value).intlTelInput("setCountry", countryCode);
});
var code = "+977";
$('#txtPhone').val(code).intlTelInput();
});
<div class="container-fluid">
<div class="row">
<h1>Select Country</h1>
</div>
<div class="row">
<div class="col-md-12 form-group">
<div class="col-md-6 form-group hire-input-country_box position-relative">
<select name="country" class="form-control" id="country">
<option data-country-code="DZ" value="213">Algeria</option>
<option data-country-code="AD" value="376">Andorra</option>
<option data-country-code="AO" value="244">Angola</option>
<option data-country-code="AI" value="1264">Anguilla</option>
<option data-country-code="AG" value="1268">Antigua & Barbuda
</option>
</select>
</div>
</div>
<div class="col-md-12 form-group">
<input type="tel" id="txtPhone" class="txtbox" />
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/js/intlTelInput-jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/16.0.8/css/intlTelInput.css" />
I have a dropdown button for filtering the data. The value of the dropdown list will contain the categories of a column from the dataset.
I already have a function to get the categories from the dataset, now I just want to add it to the dropdown list.
This is my code for add new option to the dropdown button:
<script type="text/javascript">
function addOption() {
optionText = 'Premium';
optionValue = 'premium';
$('#select1').append(`<option value="${optionValue}">
${optionText}
</option>`);
}
</script>
This is the code for dropdown list:
<form class="simple_form form-inline" method="get">
<div class="form-group select required">
<label for="basic-url" class="form-label">Product</label>
<select class="select required form-control" id="select1" onclick="addOption()">
<option value="">- Discipline -</option>
<option value="1">HW</option>
<option value="2">SW</option>
</select>
</div>
</form>
How to make the dropdown add the option once, because with my code, whenever I click the button, it will add the option again.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"
integrity="sha512-d9xgZrVZpmmQlfonhQUvTR7lMPtO7NkZMkA0ABN3PHCbKA5nqylQ/yWlFAyY6hYgdF1Qh6nYiuADWwKB4C2WSw=="
crossorigin="anonymous"></script>
</head>
<body>
<form class="simple_form form-inline" method="get">
<div class="form-group select required">
<label for="basic-url" class="form-label">Product</label>
<select class="select required form-control" id="select1" onclick="addOption()">
<option value="">- Discipline -</option>
<option value="1">HW</option>
<option value="2">SW</option>
</select>
</div>
</form>
<script type="text/javascript">
function addOption() {
optionText = 'Premium';
optionValue = 'premium';
$('#select1').append(`<option value="${optionValue}">
${optionText}
</option>`);
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
Or you can try it with JSFiddle.
Use jQuery's .one-binding to only execute code once. Also, you should not use inline event listeners.
$(document).ready(function() {
$('#select1').one('click', function() {
optionText = 'Premium';
optionValue = 'premium';
$(this).append(`<option value="${optionValue}">${optionText}</option>`);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<form class="simple_form form-inline" method="get">
<div class="form-group select required">
<label for="basic-url" class="form-label">Product</label>
<select class="select required form-control" id="select1">
<option value="">- Discipline -</option>
<option value="1">HW</option>
<option value="2">SW</option>
</select>
</div>
</form>
I am wondering if this is what you are looking for: https://jsfiddle.net/m5jetdqc/
<form class="simple_form form-inline" method="get">
<div class="form-group select required">
<label for="basic-url" class="form-label">Product</label>
<select class="select required form-control" id="select1" onclick="!added && addOption()">
<option value="">- Discipline -</option>
<option value="1">HW</option>
<option value="2">SW</option>
</select>
</div>
</form>
<script type="text/javascript">
let added = false;
function addOption() {
optionText = 'Premium';
optionValue = 'premium';
$('#select1').append(`<option value="${optionValue}">
${optionText}
</option>`);
added = true
}
</script>
You can remove last element of list before inserting new one. Use below code to remove last element from dropdown:
$("select[id=select1] option:last").remove();
I have using bootstrap v3.3.7 on for my php project. I have included all minified files. But my tooltip is not working.
<script type="text/javascript">
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<div class="container">
<div class="row">
<div class="col-md-9">
<div class="content1">
<div style="padding-left:120px; padding-right:120px">
<form class="form-horizontal" role="form" method="post"
id="formID" enctype="multipart/form-data">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Name of business</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required]" placeholder="Enter name of your business" name="tbname" value="<?=$b_name?>" >
</div>
</div>
<br>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Area</label>
<div class="col-sm-5">
<select class="form-control" name="area" id="area" data-toggle="tooltip" data-placement="right" title="specify your nearby location">
<option value="">-- Select Area --</option>
<?php
$q = mysqli_query($con, "select * from tbl_areas");
while($result = mysqli_fetch_assoc($q))
{
echo "<option value='$result[areaid]'>$result[area]</option>";
}
?>
</select>
</div>
</div>
<div class="col-sm-7"> <input type="submit" name="btnad" id="btnad" value="Register" class="btn btn-info"/></div>
</form>
</div>
</div>
</div>
<div class="col-md-3">
<div class="right">
<?php include 'include\front_right.php'?>
</div>
</div>
</div><!--row end-->
</div>
I have used here tooltip for only 'select' tag. but still not working.
Please give me solution for this.
Please chekc this demo how it is working
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
Hover over me
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
Have you included jquery?
Here is a working example:
$(function () {
$('[data-toggle="tooltip"]').tooltip();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<label for="inputPassword3" class="col-sm-3 control-label">Area</label>
<div class="col-sm-5">
<select class="form-control" name="area" id="area" data-toggle="tooltip" data-placement="bottom" title="specify your nearby location">
<option value="">-- Select Area --</option>
<option value="1">Area 1</option>
<option value="2">Area 2</option>
</select>
</div>
</div>
</div>
opts is an array ["1","2"]. The select options are not selected. The dropdown is a bootstrap multiselection plugin. What am I missing here?
var data = {};
data.action = "get-form-data";
data["account-id"] = localStorage.getItem("account-id");
ajax('post', 'php/enablers.php', data, formDataSuccess);
function formDataSuccess(data) {
data = JSON.parse(data);
$("#min-rating").val(data.MinRating);
debugger;
var opts = data.AcceptedMedia.split(",");
$.each(opts, function(inx,val){
$('#accepted-media option[value=' + val + ']').attr('selected', true);
})
$("#special-instructions").val(data.SpecialInstructions);
}
HTML
<html lang="en">
<head>
<title>Writer's Tryst - Enablers Form</title>
<link type="text/css" href="css/enablers.css" rel="stylesheet" />
<link rel="stylesheet" href="css/bootstrap-multiselect.css">
<link rel="stylesheet" href="css/jquery.rateyo.min.css">
<style>
select {
padding-bottom: 8px;
}
</style>
</head>
<body>
<div class="container center_div">
<img id="img-enablers" src="#" alt="images" />
<form id = "form-enablers" class="form-horizontal well">
<h1>Enablers</h1>
<p>
<label for="form-type" class="fixed50">Form:</label>
<select id="form-type" name="form-type[]" class="btn btn-outline" multiple="multiple" required>
</select>
</p>
<p>
<label for="genres" class="fixed50">Genres:</label>
<select id="genres" name="genres[]" multiple="multiple" required>
</select><br/>
</p>
<p>For an explanation of the genres shown here, see <a target="_blank" href="https://en.wikipedia.org/wiki/List_of_genres">List of genres</a><br/></p>
<p>
<label for="accepted-media" class="fixed50">Accepted Media:</label>
<select id="accepted-media" name="accepted-media[]" multiple="multiple" required>
<option value='1'>Mail</option>
<option value='2'>PDF File</option>
</select><br/>
</p>
<label for="min-rating" class="fixed50">Minimum Rating:</label>
<div id="min-rating"></div>
<p> <label for="special-instructions" class="fixed50">Special Instructions:</label>
<textarea id ="special-instructions" name="special-instructions"></textarea>
</p>
<p class="thumbnail">For a limited time, enablers can use this site for <span style="color: #f00; font-weight:bold">FREE</span>. We reserve the right to change this policy without notice.</p>
<p id="recaptcha-elements"></p>
<div class="form-group">
<button type="submit" id="enablers-search" class="btn btn-success btn-lg btn-block glyphicon glyphicon-search"> Search</button>
</div>
<input id="userid" name="userid" type="hidden" />
</form>
</div>
<form id="writers-list">
<p id="manuscript-request">To request a manuscript, click the checkbox beneath the thumbs-up icon.</p>
<div id="table-list"></div>
<div id="main" class="content"></div>
</form>
<script src="js/bootstrap-multiselect.js"></script>
<script src="js/jquery.rateyo.js"></script>
<script src="js/enablers.js"></script>
<script src="js/recaptcha.js"></script>
</body>
</html>
Since val() of <select multiple> is array... it is simpler to just set the <select> value instead of looping the options
$('#accepted-media').val(opts)
DEMO
Why does some parts of the first drop-down menu get hidden by another drop-down menu below in the following example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="author" content="">
<!-- Note there is no responsive meta tag here -->
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<title>MarkerDB</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href=//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css>
<!-- Custom styles for this template -->
<link href="http://getbootstrap.com/examples/non-responsive/non-responsive.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form class="form-inline" action="/between/" method="get">
<div class="input-group">
<span class="input-group-addon">TestA</span>
<select name="tests" class="selectpicker form-control" data-live-search="true" title="Plese select a test ...">
<option selected value="1">Test1</option>
<option selected value="2">Test2</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Search!</button>
</span>
</div>
</form>
<hr>
<form class="form-horizontal" action="/compare/" method="get" role="form">
<div class="input-group">
<span class="input-group-addon">TestB:</span>
<select name='cultnames' class="selectpicker show-menu-arrow form-control" multiple data-max-options="2" data-live-search="true">
<option value="Test3">Test3</option>
<option value="Test4">Test4</option>
</select>
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Search!</button>
</span>
</div>
</form>
<hr>
<HR>
</div> <!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js"></script>
<script>
$('.selectpicker').selectpicker();
</script>
</body>
</html>
If you put z-index:0 on the input-group in the 2nd form it works ok.
...
<form class="form-horizontal" action="/compare/" method="get" role="form">
<div class="input-group" style="z-index:0;">
...
http://jsfiddle.net/kme2j8ma/