CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Rimil Dey
Rimil Dey

Reputation: 977

bootstrap dropdown - text not changing when selected

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>

Upvotes: 7

Views: 8220

Answers (1)

Chris Dobson
Chris Dobson

Reputation: 150

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);
});

Upvotes: 8

Related Questions