CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Varun
Varun

Reputation: 4452

Setting textbox value in modal window using onclick button using Bootstrap

I ma trying to display username in modal text box using onclick button I have a button from there on onclick i am calling onclick="getUserName(this.id)"

this.id

gives me name which i want to set in 

modal textbox userName

Here is my function

function getUserName(username) {
      $('#editUserPopUp').bind('show',function(){
          alert(username);
          $("#userName").val(username);
      });
 }

I am getting username in alert(username) but how do i set thsi value to my modal, username text field

Here is my Modal

<div class="modal fade" id=editUserPopUp tabindex="-1" 
    role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
  <div class="modal-dialog ">
    <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Update Password</h4>
        </div>
        <div class="modal-body">                                                                                    
        <form class="EditUserBody" role="form" id="usermanagement_editUser="novalidate" method="POST">
          <div class="input-group col-md-8">
           <span class="input-group-addon">User Name</span>
             <input class="form-control" id="userName" type="text" class="input-medium" disabled />
          </div>           
        </form> 
       </div>   
    </div>
  </div>
</div>

Upvotes: 0

Views: 13078

Answers (2)

DavidDomain
DavidDomain

Reputation: 15293

This should work.

But you should also take a look at the Bootstrap documentation about modal windows. There is a section explaining how to vary modal content.

Varying modal content based on trigger button

Use event.relatedTarget and HTML data-* attributes (possibly via jQuery) to vary the contents of the modal depending on which button was clicked.

function getUserName(username) {
  var $modal = $('#editUserPopUp'),
      $userName = $modal.find('#userName');
  $userName.val(username);
  $modal.modal("show");
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


<button onclick="getUserName(this.id)" id="Foo Bar">Open Modal</button>

<div class="modal fade" id=editUserPopUp tabindex="-1" 
    role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
  <div class="modal-dialog ">
    <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="myModalLabel">Update Password</h4>
        </div>
        <div class="modal-body">                                                                                    
        <form class="EditUserBody" role="form" id="usermanagement_editUser="novalidate" method="POST">
          <div class="input-group col-md-8">
           <span class="input-group-addon">User Name</span>
             <input class="form-control" id="userName" type="text" class="input-medium" disabled />
          </div>           
        </form> 
       </div>   
    </div>
  </div>
</div>

Upvotes: 3

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

I think the problem is you are using show event,instead try call shown event after all, like so :

function getUserName(username) {
  $('#editUserPopUp').modal('show');

  $('#editUserPopUp').on('shown', function () {
    alert(username);
    $("#userName").val(username);
  })

}

p/s : did't test it. Hope this help. Comment if did't work.

Upvotes: 1

Related Questions