Menu
I have a few form fields in my HTML code along with a Bootstrap dropdown menu. I want the number selected by the user to reflect on the button's text. I have written the following code, but it doesn't seem to be working.
Here is the HTML code for the dropdown:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" value="Number of partners :" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Number of partners :
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li id="no" value="2"><a href="#">2</a></li>
<li id="no" value="3"><a href="#">3</a></li>
<li id="no" value="4"><a href="#">4</a></li>
<li id="no" value="5"><a href="#">5</a></li>
<li id="no" value="6"><a href="#">6</a></li>
<li id="no" value="7"><a href="#">7</a></li>
<li id="no" value="8"><a href="#">8</a></li>
</ul>
</div>
JavaScript:
$(".dropdown-toggle").dropdown();
$('.dropdown-toggle').on( 'click', 'a', function() {
var text = $(this).html();
var htmlText = text + ' <span class="caret"></span>';
$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});
Edit 1: I am posting my entire code just for reference :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Form</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./css/style.css" rel="stylesheet">
<link href="./datepicker.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<center><form>
<div class="input-append date" data-date = "" format="dd/mm/yyyy" >
<label for="dp1">Starting Date</label> <br>
<input id="dp1" size="16" type="text" value=" dd-mm-yyyy" name="dp1"/>
<span class="add-on"><i class="glyphicon glyphicon-calender" id="cal1"></i></span>
</div>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" value="Number :" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Number :
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li id="no" value="2"><a href="#">2</a></li>
<li id="no" value="3"><a href="#">3</a></li>
<li id="no" value="4"><a href="#">4</a></li>
<li id="no" value="5"><a href="#">5</a></li>
<li id="no" value="6"><a href="#">6</a></li>
<li id="no" value="7"><a href="#">7</a></li>
<li id="no" value="8"><a href="#">8</a></li>
</ul>
</div>
<div class="form-group">
<label for="inputName">Name of the partner</label>
<input type="text" class="form-control" id="inputName" placeholder="" name="inputName">
<span id="inputNameSpan"></span>
</div>
<div class="form-group">
<label for="inputFname">Father's Name</label>
<input type="text" class="form-control" id="inputFname" placeholder="" name="inputFname">
<span id="inputFnameSpan"></span>
</div>
<div class="input-append date" data-date="" format="dd/mm/yyyy">
<label for="dp2">Date of Birth</label> <br>
<input id="dp2" size="16" type="text" value=" dd-mm-yyyy" name="dp2"/>
<span class="add-on"><span class="glyphicon glyphicon-calender" id="cal2"></span></span>
</div>
<div class="form-group">
<label for="inputAddress">Address of the partner</label>
<textarea type ="text" class = "form-control" id = "inputAddress" rows = "8" placeholder = "" name="inputAddress"></textarea>
<span id="inputAddressSpan"></span>
</div>
<div class="form-group">
<label for="inputObjects">Objects of the organization</label>
<textarea type ="text" class = "form-control" id = "inputObjects" rows = "8" placeholder = "" name="inputObjects" ></textarea>
<span id="inputObjectsSpan"></span>
</div>
<div class="form-group">
<label for="inputFirmName">Name of the Partnership Firm</label>
<input type="text" class="form-control" id="inputFirmName" placeholder="" name="inputFirmName">
<span id="inputFirmNameSpan"></span>
</div>
<div class="input-append date" data-date="" format="dd/mm/yyyy">
<label for="dp3">Date of Commencement of the Partnership Firm</label> <br>
<input id="dp3" size="16" type="text" value=" dd-mm-yyyy" name="dp3"/>
<span class="add-on"><i class="glyphicon glyphicon-calender" id="cal3"></i></span>
</div>
<div class="form-group">
<label for="inputOffice">Registered Office of the Partnership Firm</label>
<textarea type ="text" class = "form-control" id = "inputOffice" rows = "8" placeholder = "" name ="inputOffice" ></textarea>
<span id="inputOfficeSpan"></span>
</div>
<div class="form-group">
<label for="inputWill">At will?</label>
<input type="text" class="form-control" id="inputWill" placeholder="" name= "inputWill">
<span id="inputWillSpan"></span>
</div>
<div class="form-group">
<label for="inputContribution">Capital Contribution of each Partner</label>
<input type="text" class="form-control" id="inputContribution" placeholder="" name ="inputContribution" >
<span id="inputContributionSpan"></span>
</div>
<div class="form-group">
<label for="inputSalary">Salary for each Partner</label>
<input type="text" class="form-control" id="inputSalary" placeholder="" name= "inputSalary">
<span id="inputSalarySpan"></span>
</div>
<div class="form-group">
<label for="inputProfit">Profit share for each partner</label>
<input type="text" class="form-control" id="inputProfit" placeholder="" name="inputProfit">
<span id="inputProfitSpan"></span>
</div>
<div class = "form-group">
<center><button type="submit">SEND</button></center>
</div>
</form></center>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="./js/jquery-1.11.3.js"></script>
<script>
$(document).ready (function (){
$("#dp1").datepicker();
$("#dp2").datepicker();
$('#dp3').datepicker();
$("#dp1").datepicker("dd-mm-yyyy", new Date());
$("#dp2").datepicker("dd-mm-yyyy", new Date());
$("#dp3").datepicker("dd-mm-yyyy", new Date());
$(".dropdown-toggle").dropdown();
$('.dropdown-toggle').on( 'click', 'a', function() {
var text = $(this).html();
var htmlText = text + ' <span class="caret"></span>';
$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});
});
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="./js/bootstrap.min.js"></script>
<script src="./bootstrap-datepicker.js"></script> </body>
</html>
883
Solution : The dropdown should be toggled via data attributes or using javascript. In the above program, we have forgotten to add a data attribute so the dropdown is not working. So add data-bs-toggle="dropdown" to toggle the dropdown.
Via data attributesAdd data-toggle="dropdown" to a link or button to toggle a dropdown.
Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They're made interactive with the included Bootstrap dropdown JavaScript plugin. They're toggled by clicking, not by hovering; this is an intentional design decision.
You need to change the selection to add the click eventListener onto. Your button with .dropdown-toggle does not contain your dropdown list or anchor tags; your <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> does.
Change:
$('.dropdown-toggle').on( 'click', 'a', function() {
var text = $(this).html();
var htmlText = text + ' <span class="caret"></span>';
$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});
to:
$('.dropdown-menu').on( 'click', 'a', function() {
var text = $(this).html();
var htmlText = text + ' <span class="caret"></span>';
$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
