SunSun SunSun - 7 months ago 30
Javascript Question

How to pass and get modal value

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

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 clickhandler, 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);
  });
Comments