Olá,
Estou fazendo um trabalho em que existe uma tabela com um botão em cada row, e em cada botão, quando clicado, aparece um modal. Este modal contém uma barra de input
e uma div
para onde será enviado o texto escrito no input
.
O problema é, todos os modals aparecem com o mesmo texto, se escrever 'qwerty
' por exemplo no primeiro, nos outros também aparece 'qwerty
'.
Como posso evitar esta repetição em todos os modals?
$(document).ready(function () {
// send message to modal if message is empty do not send anything or if it is only spaces
$('#sendMessage').click(function () {
if($.trim($('#inputToSend').val()) == ''){
//do not send anything
} else {
$('.textModal').append('<p class="msg">' + $('#inputToSend').val() + '</p>');
$('#inputToSend').val('').focus();
}
});
// when modal button is closed text is erased
$(".modal").on("hidden.bs.modal", function() {
$(".modal-body").html("");
$(".modal-title").html("");
});
});
.textModal {
margin: 0px 15px;
font-size: 16px;
padding: 10px;
border: inset;
height: 80px;
overflow: auto;
text-align:justify;
}
.msg {
margin: 0 0 10px 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="#" id="btn-id" class="btn btn-sm btn-focus" style="padding: 8px;" data-backdrop="false" data-toggle="modal" data-target="#basicModal"><i class="fa fa-envelope-o"></i></a>
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title" id="title"></h6>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
<div id="messageInput">
<div class="textModal"></div>
<input id="inputToSend" type="text" class="text form-control" placeholder="Insert Message...">
<button id="sendMessage" class="btn btn-primary">Enviar</button>
</div>
</div>
</div>
</div>