How to pass and get modal value

Question

First, my bootstrap modal is like this:

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog"> 

      <div class="modal-content">

         <-- modal
                  header -->

         <div class="modal-body">
            <form class="form-horizontal" id="composeForm" method="POST" action="composeMessage">
              <div class="form-group">
               <label class="col-sm-2 control-label">To</label>
                <div class="col-sm-8">
                  <input type="text" class="form-control" id="sendToId" name="requestId">
                </div>
              </div>
            <div class="line line-dashed b-b line-lg pull-in"></div>
               <div class="form-group">
                 <label class="col-sm-2 control-label">Message</label>
                 <div class="col-sm-8">
                   <div class="btn-toolbar m-b-sm btn-editor" 
                                    data-role="editor-toolbar" data-target="#editor"></div>
                   <div id="editor" class="form-control" style="overflow:scroll;
                               height:150px;max-height:150px" contenteditable="true"></div>
                   <textarea style="display:none" id="divText" name="message"></textarea>
                 </div>
                </div>
            </form>
          </div>
           <div class="modal-footer">
            <button type="button" id="sendSave" class="btn btn-primary">Save changes</button>
           </div>
       </div>

    </div>
</div>

and my Javascript so far is like this:

$(function(){
var message;
 $("#myModal").on('show.bs.modal', function(event){
     var atag = $(event.relatedTarget);   //I'm using a tag to open modal
     var userNick = atag.data("nick");
     var userComp = atag.data("comp");

     var modal = $(this);

     /*
      skipped all dynamically setting values & changing attributes of tags
      */

    document.getElementById("divText").value = document.getElementById("editor").innerHTML;
    message = document.getElementById("divText").value;
 });
     $("button.btn.btn-primary").on('click', function(){
         alert(message);
     });
 });

First, I have foreach loop in the same JSP, and the anchor tag opening the modal is in it. So I have multiple anchor tags.

The anchor tag opening modal is like this:

<a href="#myModal" data-target="#myModal" data-toggle="modal" 
                    data-nick="${f.recomUserNick}" data-comp="${f.compatibility}">  

I managed to set values and change attributes dynamically, and now I'm trying to send data from modal to controller (Spring MVC).

However, I have problem getting the 'message'. In the modal, the client writes something, and I first want to get the string value of that and check on alert to see if I can later send it to controller. What happens is that when I first open the modal, write something in it, and click the button (in the modal-footer, with id="sendSave"), I can't get the message. I close the modal, open it again -- in the message area it has what I wrote. I click the button, then I see my message in the alert window.

First, when I reopen the modal, I don't want to see what I wrote before, and I want to get the string value the first time, without having to open the modal again. I don't have a problem getting the string value, so I thought the problem was about where I put the codes, so I shifted my codes around for hours with no success. Can you please tell me how I should fix my codes? Thanks in advance.

Answer 1

You set the 'message' var in $("#myModal").on('show.bs.modal' . At that point (in the first show) the message hasn't been typed yet.

If you move that code to the click handler, it takes the message after you have typed it:

 $("button.btn.btn-primary").on('click', function() {
    document.getElementById("divText").value = document.getElementById("editor").innerHTML;
    message = document.getElementById("divText").value;
    alert(message);
  });