Question

我有以下脚本，阻止提交表单，然后使用ajax来调用页面

HERE是我的表格

<form method="post" action="makeBid.php" name="apply" id="makeBid">
                <label for="amount">Bid Amount</label>
                <input type="text" id="amount" name="amount" placeholder="Enter Bid Amount"/>
                <label for="completionDate">Completion Date</label>
                <input type="text" id="completionDate" name="completionDate" placeholder="Completion Date"/>
                <label for="apply">Support Your Application</label>
                <textarea name="msg" id="msg" class="application" placeholder="Enter A Message To Support Your Application"></textarea>
                <button name="apply" id="apply" value="<?php echo $_POST['btnSubmit'] ?>" class="btn btndanger">Apply</button>
        </form>
if(isset($_POST['apply'])) {
    require_once('../controller/bids.php');
    $bid = new Bid();
    $bid->setAmount($_POST['amount']);
    $amount = $bid->getAmount();
    $bid->setDate($_POST['completionDate']);
    $date = $bid->getDate();
    $bid->setRemarks($_POST['msg']);
    $msg = $bid->getRemarks();

    echo $bid->processBid($_SESSION['userID'], $_POST['apply'],$amount, $date, $msg);
}

然后我的Jquery和AJAX脚本可以防止默认行为。

 $(function () {
            var form = $('#makeBid');
            var formMessages = $('#formResult');

            // Set up an event listener for the contact form.
            $(form).submit(function (e) {
                // Stop the browser from submitting the form.
                e.preventDefault();

                // Serialize the form data.
                var formData = $(form).serialize();

                // Submit the form using AJAX.
                $.ajax({
                    type: 'POST',
                    url: $(form).attr('action'),
                    data: formData
                }).done(function (response) {
                    // Make sure that the formMessages div has the 'success' class.
                    $(formMessages).removeClass('error').addClass('success');

                    // Set the message text.
                    $(formMessages).html(response); // < html();

                    // Clear the form.
                    $('').val('')
                }).fail(function (data) {
                    // Make sure that the formMessages div has the 'error' class.
                    $(formMessages).removeClass('success').addClass('error');

                    // Set the message text.
                    var messageHtml = data.responseText !== '' ? data.responseText : 'Oops! An error occured and your message could not be sent.';
                    $(formMessages).html(messageHtml); // < html()
                });

            });
        });
    </script>

在我的脚本的第一行中，我没有定义未被捕获的引用错误函数的控制台错误。据我所知，一切看起来都不错。非常感谢第二双眼睛/意见来扫描我的剧本。

非常感谢

Answer 1

看起来不错！

只需检查您是否正确打开了<script>标记，因为在示例中不存在。

如果你可以复制错误并在这里发帖可能会更有用！

Answer 2

这里有两件事：

您的PHP代码需要以<?php开头才能与HTML分开
您的ajax响应无法正确，因为HTML表单也在响应中发送。您需要将表单操作脚本单独放在另一个文件中。或者您需要通过添加else

if(isset($_POST['apply']))

未定义AJAX脚本错误未捕获的引用错误函数

2 个答案: