Bootstrap Modal - Pass data into Modal using Javascript

Question

I want to pass select/drop-down data into the bootstrap modal with use of java-script. I am using the modal as confirmation message.

My Select/Drop-down is,

<select class="form-control" id="project" name="project_id">
   <option value="1"> ABCD </option>
   <option value="2"> EFGH </option>
   <option value="3"> IJKL </option>
   <option selected="selected" value="#">Please Select</option>
</select>

and I am calling the Bootstrap Modal using javascript as below,

$('#project').change(function(){
   var e       = document.getElementById("project");
   var p_id    = e.options[e.selectedIndex].value;
   var p_name  = e.options[e.selectedIndex].text;

   $('#myModal').modal('show');
});

The Bootstrap Modal is as below,

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body modal-mt-hgt">
        <form action="" method="post">
          <p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p>
          Enter Your Comment : <textarea rows="3"></textarea>
          <input type="hidden" name="country" value="">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Add Task</button>
      </div>
      <?= form_close(); ?>
    </div>
  </div>
</div>

What I want to do is pass/show var p_id into the hidden field and show var p_name in side the <b id="p_name"></b> of the modal.

Further p_id, p_name can get when user selects any option from the Select/Drop-down using the javascript function above and Only thing I need to do is how to show Project Name on the Modal and assign p_id into the hidden field of the Modal

Best regards

possible duplicate: http://stackoverflow.com/a/25060114/206375 — Slavisa Perisic, Dec 21 '15 at 08:57

Gazreyn · Accepted Answer · 2015-12-21T08:34:34.863

I'm pretty new to all of this so this probably isn't the best solution, but it's a solution.

$('#project').on('change', function() {
    var p_id = $(this).val();
    var p_name  = $(this).find(':selected').text();

    $('#myModal').on('show.bs.modal', function () 
    {
        $(this).find('#p_name').text(p_name);
        $(this).find('#p_id').val(p_id);
    });

    $('#myModal').modal('show');
});

You'll need to add a class or ID to the hidden field so it can be identified. Above I've given it an ID of p_id.

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel"></h4>
      </div>
      <div class="modal-body modal-mt-hgt">
        <form action="" method="post">
          <p> Are you sure to comment on <b id="p_name">...PROJECT NAME HERE</b> </p>
          Enter Your Comment : <textarea rows="3"></textarea>
          <input type="hidden" id="p_id" name="country" value="">
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Add Task</button>
      </div>
      <?= form_close(); ?>
    </div>
  </div>
</div>

I think it's all self explanatory but if not, we add the check to see when the project Dropdown changes, we then assign the value and text of the selected item using the $(this) variable to state that it's within the #project drop down ID.

Next up, we add a listener to see when the modal gets shown, from there we can then manipulate the modal how we want. In this example we set the p_name text and set the value of p_id.

Using the `show.bs.modal` event here is probably the right way to go, but you are adding the listener, whenever the `change` event is triggert on `#project` and this may not be a good idea. — DavidDomain, Dec 21 '15 at 08:32

Bootstrap Modal - Pass data into Modal using Javascript

1 Answers1