Question

我有一个订阅表，该人在其中填写姓名和电子邮件地址。当该人点击“立即竞争”时，会弹出一个窗口。在这里，您需要标记您是否正在举办研讨会以及您的邮编。

表单正在按应有的方式工作。

但是我希望电子邮件和名字也显示在模式框中：

有人建议这样做吗？我无权访问后端代码，因此该代码必须在前端进行。

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

$('#btn-subscribe').on('click', function() {
let navn = $('#navn').val();
let email = $('#email').val();
let workshop = $('#mce-VAERKSTED').val();
let zip = $('#mce-ZIP').val();
window.alert(navn + ' - ' + email + ' - ' + workshop + ' - ' + zip);
});

.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" onsubmit="return false;">
                    <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>
                    <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 input-group">
                    <strong>Workshop  <span class="asterisk">*</span></strong>
                    <ul>
                        <li><input type="radio" value="Nej" name="VAERKSTED" id="mce-VAERKSTED-0"><label for="mce-VAERKSTED-0">Nej</label></li>
                        <li><input type="radio" value="Ja" name="VAERKSTED" id="mce-VAERKSTED-1"><label for="mce-VAERKSTED-1">Ja</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" id="btn-subscribe" class="btn btn-primary">Subscribe</button>
            </div>
        </div>
    </div>
</div>

Answer 1

由于这只是纯JS和HTML，您可以这样做

$('#myModal').on('shown.bs.modal', function() {
  $('#navnModal').val($('#navn').val());
  $('#emailModal').val($('#email').val());
  $('#myInput').focus();
});

和

      <div class="modal-body">
          <input type="text" id="navnModal" class="form-control" placeholder="Navn" disabled>

          <input type="email" id="emailModal" class="form-control" placeholder="Din e-mail" disabled>
          ...

在Modalbox中发布表单字段

1 个答案: