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

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

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

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

附注： HTML中的标识符必须是唯一的，删除重复的 id =＆＃34; btn＆＃34;

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

1 个答案: