私は、このようなマークアップでいくつかのボタンをクリックすることで表示することができモーダルウィンドウ（ブートストラップ）を持っている

Question

私のサイトで

モーダルウィンドウを介してサーバへのボタンからデータを渡す：

<a href="#" class="btn btn-danger" data-toggle="modal" data-target="#myModal" data-link="Button 1">Click me!</a> 
... 
<a href="#" class="btn btn-danger" data-toggle="modal" data-target="#myModal" data-link="Button 2">Click me!</a> 
... 
<a href="#" class="btn btn-danger" data-toggle="modal" data-target="#myModal" data-link="Button 3">Click me!</a> 

私のモーダルウィンドウは、この平和を持っています

<form data-formname="Hero Section" class="forms"> 
    <div class="form-group"> 
     <label class="sr-only" for="phone">Ваш телефон</label> 
     <input type="tel" id="phone" class="form-control phone" placeholder="Please enter your phone number:"> 
    </div> 
    <button type="submit" class="btn btn-danger">Send</button> 
</form> 

そして、JS：

$(".forms").on('submit', function(e) { 
    e.preventDefault(); 
    var data = { 
     phone: $(this).find(".phone").val(), 
     formname: $(this).data('formname'), 
     // datalink: ??? 
    }; 
    $.ajax({ 
     type: "POST", 
     url: "contact.php", 
     data: data 
    }); 
    return false; 
}); 

phoneに加え

とのコード、ボタンのdata-linkを取得したい明らかに、私は$(".forms").on('submit', function(e) {...});の中でevent.relatedTargetを使うことはできません。何かご意見は？

Answer 1

あなたは、イベントハンドラを提出formにsource要素を取得するためにそれを使用することができ、

$('#myModal').on('show.bs.modal', function (e) { 
    var source = $(e.relatedTarget); 
    //Persist it for later use  
    $(this).data('relatedTarget', source) 
}); 

今show.bs.modalイベントハンドラのソースを取得使用してdata-link

$(".forms").on('submit', function(e) { 
    e.preventDefault(); 

    var source = $('#myModal').data('relatedTarget'); 
    var datalink = $(source).data('link'); 
}); 

サイドを得ることができます注：HTMLの識別子は一意である必要があります、重複を削除しますid = "btn"