javascript - 模态窗口在提交时关闭

Question

我在 Bootstrap 模态窗口中有一个表单，发生了什么，当我单击“发送”按钮时，模态关闭并且一个白页显示我对 contact-form.php 的操作调用的结果并显示空白字段的错误消息，但应该显示在模态窗口表单中的消息 div 中。

我显然在做一些根本上错误的事情，如果您能提供任何帮助，我将不胜感激。我会做一个片段，但看不到如何包含 php 代码。非常感谢

Bootstrap V3.3.7

更新:如果我在模态之外使用正常形式，该形式工作正常窗口。

<!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog modal-lg">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h2 class="modal__title"><div style="color: white; margin-top: -14px; margin-left: 36px;">Contact Us</div></h2>
        <div style="color: white; margin-left: 36px; margin-bottom: 20px;">If you need to contact us, please use this form and we shall respond as soon as possible. Thanks</div>
        </div>
        <div class="modal-body">
         <div class="content-block contact-3">
        <div class="container">
          <div class="row">        
            <div class="col-md-9">           
              <div id="contact" class="form-container">

                  <div id="message"></div> <-ERROR SHOULD BE DISPLAYED HERE
                  <form method="post" action="js/contact-form.php" name="contactform" id="contactform">
                    <div class="form-group">
                      <input name="name" id="name" type="text" value="" placeholder="Name" class="form-control" />
                    </div>
                    <div class="form-group">
                      <input name="email" id="email" type="text" value="" placeholder="Email" class="form-control" />
                    </div>
                    <div class="form-group">
                      <input name="phone" id="phone" type="text" value="" placeholder="Phone" class="form-control" />
                    </div>
                    <div class="form-group">
                      <textarea name="comments" id="comments" class="form-control" rows="3" placeholder="Message" id="textArea"></textarea>
                      <div class="editContent">
                        <p class="small text-muted"><span class="guardsman">* All fields are required.</span> Once we receive your message we will respond as soon as possible.</p>
                      </div>
                    </div>
                    <div class="form-group">
                      <button class="btn btn-default" type="button" class="modal" data-dismiss="modal">Close</button>
                      <button class="btn btn-primary" type="submit" id="cf-submit" name="submit">Send</button>
                    </div>
                  </form>

              </div>
              <!-- /.form-container -->
            </div>
          </div>
          <!-- /.row -->
        </div>
        <!-- /.container -->
      </div>
      <!--// END Contact 3-1 -->
        </div>
        <div class="modal-footer">

        </div>
      </div>

    </div>
  </div>

联系表.php

<?php

if(!$_POST) exit;

// Email address verification, do not edit.
function isEmail($email) {
    return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i",$email));
}

if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n");

$name     = $_POST['name'];
$email    = $_POST['email'];
$phone   = $_POST['phone'];
$comments = $_POST['comments'];

if(trim($name) == '') {
    echo '<div class="error_message">Please enter your name.</div>';
    exit();
} else if(trim($email) == '') {
    echo '<div class="error_message">Please enter a valid email address.</div>';
    exit();
} else if(trim($phone) == '') {
    echo '<div class="error_message">Please enter a valid phone number.</div>';
    exit();
} else if(!is_numeric($phone)) {
    echo '<div class="error_message">Phone number can only contain digits and no spaces.</div>';
    exit();
} else if(!isEmail($email)) {
    echo '<div class="error_message">You have entered an invalid e-mail address, try again.</div>';
    exit();
}

if(trim($comments) == '') {
    echo '<div class="error_message">Please enter your message.</div>';
    exit();
}

if(get_magic_quotes_gpc()) {
    $comments = stripslashes($comments);
}


// Configuration option.
// Enter the email address that you want to emails to be sent to.
// Example $address = "yourname@yourdomain.com";

$address = "yourname@yourdomain.com";


// Configuration option.
// i.e. The standard subject will appear as, "You've been contacted by John Doe."

// Example, $e_subject = '$name . ' has contacted you via Your Website.';

$e_subject = 'You\'ve been contacted by ' . $name . '.';


// Configuration option.
// You can change this if you feel that you need to.
// Developers, you may wish to add more fields to the form, in which case you must be sure to add them here.

$e_body = "You have been contacted by $name from your website, their message is as follows." . PHP_EOL . PHP_EOL;
$e_content = "\"$comments\"" . PHP_EOL . PHP_EOL;
$e_reply = "You can contact $name by email, $email or by phone $phone";

$msg = wordwrap( $e_body . $e_content . $e_reply, 70 );

$headers = "From: $email" . PHP_EOL;
$headers .= "Reply-To: $email" . PHP_EOL;
$headers .= "MIME-Version: 1.0" . PHP_EOL;
$headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
$headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

if(mail($address, $e_subject, $msg, $headers)) {

    // Email has sent successfully, echo a success page.

    echo "<fieldset>";
    echo "<div id='success_page'>";
    echo "<h2>Email Sent Successfully.</h2>";
    echo "<p>Thank you <strong>$name</strong>, your message has been sent to us.</p>";
    echo "</div>";
    echo "</fieldset>";

} else {

    echo 'ERROR!';

}

?>

发送邮件.js

jQuery(document).ready(function () {

  $('#contactform').submit(function (e) {
    e.preventDefault();

    var action = $(this).attr('action');

    $("#message").fadeOut(500, function () {
      $('#message').hide();

      $.post(action, {
          name: $('#name').val(),
          email: $('#email').val(),
          phone: $('#phone').val(),
          comments: $('#comments').val(),
        },
        function (data) {
          document.getElementById('message').innerHTML = data;
          $('#message').slideDown('slow');
          $('#submit').removeAttr('disabled');
          if (data.match('success') != null) {
            $('#contactform').fadeOut('slow');
            $("#message").delay(3000).fadeOut();
            $("#contactform").delay(4000).fadeIn();
            $("#contactform").css("margin-top", "40px !important");
            $("#contactform").trigger("reset");
          }
        }
      );

    });

    return false;

  });

});

Answer 1

我无法测试您的代码，但我认为我不会使用 $(form).submit()... 执行提交操作。如果您正在执行 event.preventDefault()，我会更好地解释，您正在执行 ajax 调用，如果出现不同的错误，您会得到不同的答案，所以在您的位置，我会在单击发送按钮时删除 html 中的操作，我会执行 ajax 调用并管理答案。尝试这种方式，因为我认为如果您以这种方式使用提交，浏览器也会解释提交表单，因为您正在使用操作 url 发送调用。

    $('#cf-submit').click(function(){

        name = $('#name').val();
        email = $('#email').val();
        phone = $('#phone').val();
        comments = $('#comments').val();

        $.ajax({
            url : 'js/contact-form.php',
            type : 'POST',
            data : {
                name : name,
                email : email,
                phone : phone,
                comments : comments,
            },
            dataType : 'html',
            success : function(response){
                $('#message').html(response);
            }
        });
    });