模态框中表单的安全输入

Question

我正在使用 Bootstrap 为我们的电子邮件通讯制作注册表单 3. 我制作了一行，可以输入姓名和电子邮件。当一个人点击“立即竞争”时，会出现一个模态框，该人必须提供 3 条信息。

现在的问题是是否可以保存之前的信息？这意味着姓名和电子邮件？

所以我要发送给 MailChimp 的数据是：

姓名
电子邮件
工作坊
性别
邮政编码

现在我可以将数据“车间、性别和邮政编码”发送到 MailChimp。但是模态框当然不会记住姓名和电子邮件。

有什么方法可以保存姓名和电子邮件吗？一件重要的事情是我无法访问后端。这意味着如果可能的话，必须用 javascript.

来完成

有一个工作JSFiddle here 请注意，目前无法转换为 BS4

$('#myModal').on('shown.bs.modal', function () {
    $('#myInput').focus()
})

    .newsletter-block {
    background-color: #7c7c7c;
    }
    .newsletter-title h2 {
        padding-bottom: 24px;
        font-size: 2em;
    }
    .newsletter-subtitle {
        font-size: 16px;
    }
    .padd-70-70 {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .subscribe-form {
        width: 100%;
    }
    .subscribe-form .form-control {
        border-radius: 0px;
    }
    .subscribe-form button {
        border: 2px solid #e4a228;
        background: #e4a228;
        text-transform: uppercase;
        color: #fff;
        text-align: center;
        width: 100%;
        padding: 0.4em;
    }

<div class="main-wraper padd-70-70 newsletter-block">
    <div class="container">
        <div class="row">
            <div class="col-md-6 col-sm-12 col-xs-12 d-flex justify-content-end">
                <div class="newsletter-title">
                    <h2 class="color-white">Join Suite Vacations to Get FREE <br>Travel News and Special Offers!</h2>
                    <h4 class="newsletter-subtitle color-white underline">Secret Deals - for our subscribers only...Besides it's FREE</h4>
                </div>
            </div>
            <div class="col-xs-12 col-sm-12 col-md-4  d-md-flex justify-content-start ">
                <form class="subscribe-form" action="#">
                    <div class="form-group subscribe-input input-style-1 fl low-pad">
                        <input type="text" class="form-control" required="true" placeholder="Navn">
                    </div>
                    <div class="form-group subscribe-input input-style-1 fl low-pad">
                        <input type="email" class="form-control" required="true" placeholder="Din e-mail">
                    </div>
                    <button type="submit" class="c-button b-60 bg-red-3 hv-red-3-o fr btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"><span>Compete Now</span></button>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                <div class="mc-field-group">
                    <label for="mce-VAERKSTED">Workshop <span class="asterisk">*</span>
                </label>
                    <input type="text" value="" name="VAERKSTED" class="required" id="mce-VAERKSTED">
                </div>
                <div class="mc-field-group input-group">
                    <strong>Gender  <span class="asterisk">*</span>
                </strong>
                    <ul><li><input type="radio" value="Mand" name="KON" id="mce-KON-0"><label for="mce-KON-0">Man</label></li>
                <li><input type="radio" value="Kvinde" name="KON" id="mce-KON-1"><label for="mce-KON-1">Woman</label></li>
                </ul>
                </div>
                <div class="mc-field-group size1of2">
                    <label for="mce-ZIP">Postcode  <span class="asterisk">*</span>
                </label>
                    <input type="number" name="ZIP" class="required" value="" id="mce-ZIP">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Subscribe</button>
            </div>
        </div>
    </div>
</div>

Answer 1

您不需要保存“供以后使用的数据”，因为弹出窗口和初始表单都在同一页面上。在弹出窗口 window 发生并且用户单击“订阅”后，您可以简单地从姓名和电子邮件输入框中收集数据并将这些数据传递到后端。

1.) 将 ID 值添加到名称和电子邮件字段：

<div class="form-group subscribe-input input-style-1 fl low-pad">
  <input type="text" id="navn" class="form-control" required="true" placeholder="Navn">
</div>
<div class="form-group subscribe-input input-style-1 fl low-pad">
  <input type="email" id="email" class="form-control" required="true" placeholder="Din e-mail">
</div>

（同时从您的 <form> 标签中删除操作，否则在单击 “COMP(L)ETE NOW” 按钮时将提交表单：<form class="subscribe-form">).

2.) 将 ID 添加到弹出表单中的 “订阅” 按钮，以便您可以将处理程序附加到它：

<button type="button" id="btn-subscribe" class="btn btn-primary">Subscribe</button>

3.) 创建一个事件处理程序来处理注册过程：

$('#btn-subscribe').on('click', function() {
  let navn = $('#navn').val();
  let email = $('#email').val();
  let workshop = $('#mce-VAERKSTED').val();
  let gender = $('#mce-KON-1').is(':checked') ? 'Kvinde' : 'Mand';
  let zip = $('#mce-ZIP').val();
  window.alert(navn + ' - ' + email + ' - ' + workshop + ' - ' + gender + ' - ' + zip);
});

这里有一个 Fiddle 来演示更改。

更新代码

如果您需要 MailChimp 的表单包装器：

将 <form> 标签移动到弹出窗口 window。
向表单添加两个隐藏的表单域以保存姓名和电子邮件的值
在显示模式时，将姓名和电子邮件值复制到隐藏字段中

在我的测试中，我无法将整个模式包装在 <FORM> 标记中，因为这会改变弹出窗口的整个布局。我最终做的是在 <div class="modal-body>...</div> 中添加 <FORM>，然后通过订阅按钮上的事件处理程序提交表单：

$('#btn-subscribe').on('click', function() {
  $('#subscribe-form').submit();
});

一些最后的评论：

您的 fiddle 在 CSS window 中包含一个 <style> 标签，这会导致 fiddle
去掉像 <strong> 这样的旧标签，改用 CSS 类。如果您想更改代码的样式，只需更改 CSS 而不必更改标签。

这里是an updated Fiddle.

模态框中表单的安全输入

safe input from form in modalbox

html

css

twitter-bootstrap-3