javascript - 通过模态窗口将数据从按钮传递到服务器

Question

在我的站点上，我有一个模态窗口 (Bootstrap)，可以通过单击带有此类标记的几个按钮来显示该窗口:

<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 和 formname 之外，我还想获取按钮的 data-link。显然，我不能在 $(".forms").on('submit', function(e) {...}); 中使用 event.relatedTarget。有什么想法吗？

Answer 1

您可以在 show.bs.modal 事件处理程序中使用获取源代码

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

现在，您可以使用它来检索 form 提交事件处理程序中的 source 元素并获取 data-link

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

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

旁注:HTML 中的标识符必须是唯一的，删除重复的 id="btn"