Passing values from twitter bootstrap modal, when user click on send button

Question

I have a send mail icon coming dynamically based on the users in the database. When User click on mail icon I am calling a function to open bootstrap modal dialog with name (text box) and description (textarea). In my bootstrap modal there are two buttons, one is cancel and another one is sendmail button.When user click on sendmail button, here I am getting confused how to send user description and name as part of ajax request?

<?php foreach ($coaches as $key => $coach) {?>
<a class="u-icon-v1" href="javascript:" onclick="openModal('<?php echo $coach['id']?>','<?php echo $coach['name']?>')" data-toggle="modal" data-target="#exampleModal" data-whatever="<?php echo $coach['id']?>">
<i class="icon-envelope-letter"></i></a>
<?php } ?>

bootstrap modal function

function openModal(id,name){    
$('#exampleModal').on('show.bs.modal', function (event) {
     var button = $(event.relatedTarget) 
  var recipient = button.data('whatever')
// How to call call function when user click on sendmail button?
});

bootstrap modal

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form>
          <div class="form-group">
            <label for="recipient-name" class="col-form-label">Mail To:</label>
            <input type="text" name="mailto" id="mailto" class="form-control" id="recipient-name" readonly="readonly">
          </div>
          <div class="form-group">
            <label for="message-text" class="col-form-label">Message:</label>
            <textarea class="form-control" id="message_text" name="message_text"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary" onclick="sendMail()"  id="sendmessage">Send Mail</button>
      </div>
    </div>
  </div>
</div>

Answer 1

There are several ways to do it. You have already called a method named sendMail(). You can retrieve your required values inside that method like below code -

function sendMail(){
  //var name = $("#mailto").val();
  var description = $("#message_text").val();

  $.ajax({
    type:"POST",
    data:{mailto: mailto, description:description},
    url: "your url",
    success: function(response){
   }
  });
}

When you are calling this openModal() function, you can pass your mailto value as 3rd argument like openModal(id, name, mailto) & update that input field value using new value & then open your modal. In this way, this info will be different for each entry. check below code for openModal() function

function openModal(id,name, mailto){    
$("#mailto").val(mailto);
$('#exampleModal').on('show.bs.modal', function (event) {
     var button = $(event.relatedTarget) 
  var recipient = button.data('whatever')
// How to call call function when user click on sendmail button?
});

Hope now you can do it using this dummy code. Now you can ask what will happen with my modal. Hide it when any get any positive response from your ajax call using $("#exampleModal").modal('hide');