Question

我是新手，并一直在网上寻找一个例子而找不到一个。我有一个模式弹出窗体，我希望能够在弹出窗口中验证，发送电子邮件并返回成功或错误消息。任何人都可以帮助我或指出我正确的方向。我有一个模态按钮，单击该按钮可打开表单。

模态按钮

<a href='#' data-toggle='modal' data-target='#sendModal' class='btn btn-default' title='Send to a friend'><i class='fa fa-send'></i> <span>Send to a friend</span></a>

表格

<div class="modal fade" id="sendModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4>Send to a friend</h4>
            <div class="alert alert-error fade in"> This option is correctly not working.</div>
        </div>
        <div class="modal-body">
            <form>
                <div class="input-group">
                    <span class="input-group-addon"><i class="fa fa-user"></i></span>
                    <input type="text" class="form-control" placeholder="Your Name">
                </div>
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                            <input type="email" class="form-control" placeholder="Your Email">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="input-group">
                            <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
                            <input type="email" class="form-control" placeholder="Friend's Email">
                        </div>
                    </div>
                </div>
                <textarea class="form-control" placeholder="Message"></textarea>
                <input type="submit" class="btn btn-primary pull-right" value="Submit">
                <div class="clearfix"></div>
            </form>
        </div>
    </div>
</div>

Answer 1

你的问题太宽泛了。不能给你完整的工作实例，但可以指出你正确的方向。

首先你需要validation plugin来验证表单输入，因为你正在使用bootstrap框架，最好的选择是BootstrapValidator plugin你可以找到许多工作示例here OR BootstrapFormValidation Plugin您可以找到工作示例here，但我会选择BootstrapValidator plugin

Fiddle example with BootstrapValidator

验证后，您要求发送电子邮件（但没有页面刷新，因为您希望以模态显示成功或错误消息）

对于此步骤，您需要Ajax传递经过验证的输入值并获得响应。

如果您选中此examples页面，则会找到一个示例Using Ajax to Submit Form，并且为了获得回复（成功或错误），您可以使用submitHandler option。

HTML

<a href='#' data-toggle='modal' data-target='#sendModal' class='btn btn-default' title='Send to a friend'><i class='fa fa-send'></i> <span>Send to a friend</span></a>

<div class="modal fade" id="sendModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
             <h4>Send to a friend</h4>
             <div id="message"></div>
        </div>
        <div class="modal-body">
            <form id="signup" class="form-horizontal" role="form" method="POST" action="#" data-bv-submitbuttons="button[type='submit']">
                <div class="row">
                    <div class="col-md-6">
                        <div class="input-group"> <span class="input-group-addon"><i class="fa fa-user"></i></span>

                            <label class="control-label"></label>
                            <input type="text" class="form-control" name="username" />
                        </div>
                    </div>
                    <div class="col-md-6">
                        <input type="submit" class="btn btn-primary pull-right" value="Submit">
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

BootstrapValidator脚本

$('#signup').bootstrapValidator({
  message: 'This value is not valid',
  submitButton: '#signup button[type="submit"]',
  submitHandler: function(validator, form, submitButton) {
      $.ajax({
          type: 'POST',
          url: 'file.php', //Here you handle the Post request via Ajax
          data: $(form).serialize(),
          success: function(result) {
              $("#message").html(result); //This will show the message in modal
              $("#signup").data('bootstrapValidator').resetForm(); //This will reset the form inputs after success call.
          }
      });
      return false;
  },
  feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
        },
        fields: {
            username: {
                    validators: {
                        notEmpty: {
                            message: 'The username is required'
                        }
                    }
                }
            }
        });
    });

最后创建file.php

<?php
if (isset($_POST['username'])) {
   //Get Post Values from Ajax Request
   //Send Email Use PHP mailer https://github.com/Synchro/PHPMailer
   //Check success or errors with if / else condition e.g
   if($mail->send()) {
      echo"<div class="alert alert-success fade in"> Everything is good and working.</div>";
   } else {
      echo"<div class="alert alert-error fade in"> There is something seriously wrong or may be something not working as plan.</div>";
   }
}
?>

注1：上面的代码示例未经过全面测试。

注意2：使用jQuery和Ajax时，请始终检查浏览器控制台日志以查找正面错误。

模态表单，用于在弹出窗口中验证并返回用户的meesage

1 个答案: