Twitter Bootstrap Question posted in

Twitter bootstrap : How to display popup value in text-box

I designed one input text-box with button.Once i click the button is show one popup.Popup contains table with values.Now i selected one value but is no display in text-box.

How to get value?.Please guide me.

<div>
<label for="name" style="margin: 0px;">EMP NAME</label>
<input type="text" class="input-normal" id="empname" href="#fee-details" data-toggle="modal" style="line-height: initial; margin-left: 6px;">
</div>

<div class="modal fade" id="fee-details" tabindex="-1" role="dialog" aria-labelledby="fee-details-label" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
    <div class="modal-body">
        <table class="table table-condensed">
            <thead class="modal-header login-modal-header">
                <tr style="width:100%;">
                    <th style="width:50%;">Header1</th>
                    <th style="width:50%;">Header2</th>
                </tr>
            </thead>
            <tbody class="body">
                <tr>
                    <td>1</th>
                    <td class='val'>A</th>
                </tr>
                <tr>
                    <td>2</th>
                    <td class='val'>B</th>
                </tr>
                <tr>
                    <td>3</th>
                    <td class='val'>C</th>
                </tr>
                <tr>
                    <td>4</th>
                    <td class='val'>D</th>
                </tr>
                <tr>
                    <td>5</th>
                    <td class='val'>E</th>
                </tr>
                <tr>
                    <td>6</th>
                    <td class='val'>F</th>
                </tr>
            </tbody>
        </table>          
    </div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

script:

$('.body').on('click',function(){
$('#empname').val($(this).find('.val').html());
$('#fee-details').modal('toggle');
});
Tags:

3

Answers


  1. 0

    You can pass a clicked value in the table “back” to the <input> this way :

    $("#values tbody td").on('click', function() {
    $("#empname").val($(this).text());
    $("#fee-details").modal('hide');
})

    your code in a fiddle -> http://jsfiddle.net/mwfbs3bk/

    NB : Have given the table an id for convenience

    Update with a small typeahead example. The original bootstrap 2.x easy-to-use typeahead was removed from bootstrap 3.x. Fortunetely it is very, very easy to reimplement. It is just to extract the old source and include it in the project. Here it is already done for you -> https://github.com/bassjobsen/Bootstrap-3-Typeahead

    Simply include the script

    <script src="https://rawgithub.com/bassjobsen/Bootstrap-3-Typeahead/master/bootstrap3-typeahead.js"></script>

    convert your #empname <input> to a typeahead this way :

    $("#empname").typeahead({ source: ['London', 'Copenhagen', 'Antwerpen', 'Stockholm', 'Berlin'] });

    updated fiddle from above -> http://jsfiddle.net/mwfbs3bk/2/

    Login or Signup to reply.
  2. 0

    You can do something like this in jquery. Tested the code, working fine.

        $(document).ready(function() {
      $('.tableBody tr').on('click', function() {

        $('#empname').val($(this).find('.val').html());
        $('#fee-details').modal('toggle');
      });
    });
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<div>
  <label for="name" style="margin: 0px;">EMP NAME</label>
  <input type="text" class="input-normal" id="empname" style="line-height: initial; margin-left: 6px;">
  <button type="button" id="name_value" class="btn btn-primary btn-xs" href="#fee-details" data-toggle="modal">Select Value</button>
</div>

<div class="modal fade" id="fee-details" tabindex="-1" role="dialog" aria-labelledby="fee-details-label" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <table class="table table-condensed">
          <thead class="modal-header login-modal-header">
            <tr style="width:100%;">
              <th style="width:50%;">Header1</th>
              <th style="width:50%;">Header2</th>
            </tr>
          </thead>
          <tbody class="tableBody">
            <tr>
              <td>1</th>
                <td class="val">A</th>
            </tr>
            <tr>
              <td>2</th>
                <td class="val">B</th>
            </tr>
            <tr>
              <td>3</th>
                <td class="val">C</th>
            </tr>
            <tr>
              <td>4</th>
                <td class="val">D</th>
            </tr>
            <tr>
              <td>5</th>
                <td class="val">E</th>
            </tr>
            <tr>
              <td>6</th>
                <td class="val">F</th>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
    Login or Signup to reply.
  3. 0

    here is just need to write few lines of jquery that will help you to make that

    $('tbody td').on('click',function(){
    var selectedVal = $(this).text().trim();   
    $('#empname').val(selectedVal);
    $("#fee-details").modal('hide');
})

    and here is the demo code for this

    Demo

    With Fixed Header table

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search