Bootstrap Modal - Transferring data to Modal using Javascript

Question

I want to pass selected / dropdown data to bootstrap modal using java-script. I use modal as confirmation.

My select / drop-down

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

Bootstrap modification 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 to a hidden field and show var p_name in the <b id="p_name"></b> side of the modal.

Next, p_id , p_name can be received when the user selects any option from Select / Drop-down using the javascript function above and Just what I need to do is to show the project name in the module and assign p_id to the hidden modal field

Best wishes

Answer 1

I am new to this, so this is probably not the best solution, but it is 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 need to add the class or identifier to the hidden field so that it can be identified. Above, I gave it the identifier 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 all of this is self-explanatory, but if not, we add a check to see when the project drop-down list changes, then we assign the value and text of the selected item using the $ (this) variable to indicate that it is in # dropdown identifier project.

Then we will add a listener to see when the modal is shown, from there we can manipulate the modal as we want. In this example, we set the text p_name and set the value to p_id.