Question

我有一个填写表格，因此我需要在用户填写必填字段并单击“提交”按钮时，弹出表格将显示“您已成功记录”

有什么想法可以解决这个问题？

<fieldset class="field-set col col--full" style="false">  <label class="field-set__label"><?php echo _("Name"); ?></label>
  <input type="text" class="field" name="fio" />
</fieldset>
<fieldset class="field-set col col--full" style="false">
  <label class="field-set__label"><?php echo _("Company name"); ?></label>
  <input type="text" class="field" name="company-name" />
</fieldset>
<fieldset class="field-set col col--full" style="false">
  <label class="field-set__label"><?php echo _("E-mail"); ?></label>
  <input type="email" class="field" name="E-mail" value="" placeholder="" />
</fieldset>
<fieldset class="field-set col col--full" style="text-align:center;">
  <button id="callMe" class="button button--prime"><?php echo _('Submit'); ?></button>
</fieldset>

jQuery(document).ready(function($) {
  $("#summer-party-form").submit(function() {
    var str = $(this).serialize();
    var btn = $(this).find("input[type=submit]");
    var oldBtnTitle = btn.prop("value");

    btn.prop("disabled", true).prop("value", "<?php echo _("Sending ");?>...");

    $.ajax({
      type: "POST",
      url: "/engine/summerparty.php",
      data: str,
      success: function(msg) {
        // Message Sent? Show the 'Thank You' message and hide the form
        if (msg == 'OK') {
          result = '<?php echo _("<big><big><big>You are recorded</big></big></big>"); ?>';
          $("#summer-party-form .grid").hide();
        } else {
          result = msg;
          btn.prop("disabled", false).prop("value", oldBtnTitle);
        }
        $('#summer-party-form .note').html(result);

      }
    });
    return false;
  });
});

Answer 1

在您的样式标签中： @import“ compass / css3”;

在脚本标签中：

window.setTimeout(function() {
$(".alert").fadeTo(500, 0).slideUp(500, function(){
    $(this).remove(); 
});
}, 4000);

在正文标签内：

<div class="container">
<div class="row">
<div class="col-12 text-center>
<div class="alert alert-success" role="alert">
<button type="button" class="close data-dismiss="alert" aria-label="close"><span aria-hidden="true">&times;</span></button>
<strong>Success!</strong> Thank you for registering!
</div>
</div>
</div>
</div>

重定向到“成功提交”页面，或仅在提交时重新加载页面，这将弹出，表示感谢注册。它将在4秒后关闭。

显然在代码上使用了一些缩进功能，以免引起人们的注意。

您还需要确保导入引导程序。

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

成功提交后如何调用弹出式表单？

1 个答案: