联系表单在新页面上显示确认信息，而不是在 div (ajax) 中

Question

我正在尝试使该联系表工作：https : //bootstrapious.com/p/how-to-build-a-working-bootstrap-contact-form 但确认文本在新站点而不是 div 中打开“消息”。

联系方式

    <form id="contact-form" method="post" action="contactaction.php" role="form" data-toggle="validator">

        <div class="messages"></div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

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

    <script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>

    <script src="contact.js"></script>

联系人.js

$(function () {

    // init the validator

    $('#contact-form').validator();

    // when the form is submitted

    $('#contact-form').on('submit', function (e) {

        // if the validator does not prevent form submit

        if (!e.isDefaultPrevented()) {

            var url = "contact.php";

            // POST values in the background the the script URL

            $.ajax({

                type: "POST",

                url: url,

                data: $(this).serialize(),

                success: function (data)

                {

                    // data = JSON object that contact.php returns

                    // we recieve the type of the message: success x danger and apply it to the 

                    var messageAlert = 'alert-' + data.type;

                    var messageText = data.message;

                    // let's compose Bootstrap alert box HTML

                    var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';

                    }

                }

            });

            return false;

        }

    })

});

Answer 1

只需使用 e.preventDefault(); 作为 onsubmit 函数的第一步：&nbsp; &nbsp; &nbsp;// when the form is submitted&nbsp; &nbsp; &nbsp;$(function () {&nbsp; &nbsp; &nbsp; &nbsp; // init the validator&nbsp; &nbsp; &nbsp; &nbsp; $('#contact-form').validator();&nbsp; &nbsp; &nbsp; &nbsp; // when the form is submitted&nbsp; &nbsp; &nbsp; &nbsp; $('#contact-form').on('submit', function (e) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; e.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // if the validator does not prevent form submit&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var url = "contact.php";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // POST values in the background the the script URL&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: url,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: $(this).serialize(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function (data)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // data = JSON object that contact.php returns&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // we recieve the type of the message: success x danger and apply it to the&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var messageAlert = 'alert-' + data.type;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var messageText = data.message;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // let's compose Bootstrap alert box HTML&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var alertBox = '<div class="alert ' + messageAlert + ' alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>' + messageText + '</div>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // If we have messageAlert and messageText&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (messageAlert && messageText) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // inject the alert to .messages div in our form&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#contact-form').find('.messages').html(alertBox);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // empty the form&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#contact-form')[0].reset();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; });