当用户单击发送按钮时，从twitter引导程序模态传递值

Question

我有一个基于数据库中的用户动态发送的发送邮件图标。 当用户单击邮件图标时，我正在调用一个函数来打开带有名称（文本框）和描述（文本区域）的引导模式对话框。 在我的引导模式中，有两个按钮，一个是“取消”，另一个是“ sendmail”按钮。当用户单击sendmail按钮时，在这里我很困惑如何将用户描述和名称作为ajax请求的一部分发送？

<?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 } ?>

引导模态函数

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?
});

引导模态

<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

有几种方法可以做到这一点。 您已经调用了名为sendMail()的方法。 您可以在该方法内检索所需的值，例如以下代码-

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){
   }
  });
}

调用此openModal()函数时，您可以将mailto值作为第三个参数传递，如openModal(id, name, mailto)并使用新值更新该输入字段值，然后打开模态。 这样，此信息对于每个条目都会有所不同。 检查以下代码以获取openModal（）函数

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?
});

希望现在您可以使用此伪代码来做到这一点。 现在您可以问问我的模态会怎样。 当任何人使用$("#exampleModal").modal('hide');从ajax调用中获得任何肯定的响应时，将其$("#exampleModal").modal('hide');