Question

我有一个包含5个字段的表单，我将使用AJAX发送到PHP脚本，该脚本执行一些简单的验证并返回一个字符串。

我为实际提交做了一个小jQuery脚本，当我尝试发送表单时，我必须单击两次发送按钮。

更新：网址直播：http://www.dan-levi.no/new/#!/Kontakt

以下是一些代码：

HTML

<form id="contact_form" class="form-horizontal" action"includes/contact.php" method"post">
            <div class="control-group">
                <label class="control-label" for="contact_name">Ditt navn og evt. bedrift</label>
                <div class="controls">
                    <input type="text" class="input-large" id="contact_name" name="contact_name" placeholder="Ditt navn og evt. bedrift" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="contact_email">E-post</label>
                <div class="controls">
                    <input type="email" class="input-large" id="contact_email" name="contact_email" placeholder="E-post" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="contact_tel">Telefon</label>
                <div class="controls">
                    <input type="tel" class="input-large" id="tel" name="contact_tel" placeholder="Telefon" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="contact_subject">Emne</label>
                <div class="controls">
                    <input type="text" class="input-large" id="subject" name="contact_subject" placeholder="Emne for melding" />
                </div>
            </div>

            <div class="control-group">
                <label class="control-label" for="contact_desc">Din beskjed</label>
                <div class="controls">
                    <textarea rows="10" class="input-large" id="contact_desc" name="contact_desc" placeholder="Din beskjed"></textarea>
                </div>
            </div>
            <div class="text-error pull-right" id="error_message"></div><br>
            <input class="btn btn-large pull-right" type="submit" name="" value="Send" /><br>
</form>

的javaScript

$(document).ready(function() {
    $('#contact_form').submit(function(e) {
        data = $('#contact_form').serialize();
        $.ajax({
            url: 'includes/contact.php',
            type: 'POST',
            data: data,
        })
        .done(function(response) {
            if (response == 'empty') {
                $('#error_message').text('Noen av feltene er tomme.')
            } else {
                $('.message').html(response);
                $('#contact_form').fadeOut('400');
                $('#info_line').fadeIn('400').text('Takk for din henvendelse');
            };  
        })        
        e.preventDefault();
    });
});

PHP

$contact_name = $_POST['contact_name'];
$contact_email = $_POST['contact_email'];
$contact_tel = $_POST['contact_tel'];
$contact_subject = $_POST['contact_subject'];
$contact_desc = $_POST['contact_desc'];

if ($contact_name == '' || $contact_email == '' || $contact_tel == '' || $contact_subject == '' || $contact_desc == '') {
    echo "empty";
    die();
}
echo $contact_name.'<br><br>';
echo $contact_email.'<br><br>';
echo $contact_tel.'<br><br>';
echo $contact_subject.'<br><br>';
echo $contact_desc.'<br><br>';

我无法找到为什么我必须单击两次按钮，我尝试了一些试验和错误，阅读论坛的答案。我试图将表单序列化为提交函数，我只是不能让它按照我想要的方式运行。非常感谢所有帮助。

哦，值得一提。实际响应是我第一次点击时字段为空（php验证），但第二次它按原样运行。

Answer 1

使用常规输入按钮而不是提交按钮进行ajax调用。

$("#button").click(function () { ... ajax ... }

Answer 2

我不确定它是否有所作为，但你是否尝试过将你想要的事情发生在成功的回调中？

$(document).ready(function() {
    $('#contact_form').submit(function(e) {
        data = $('#contact_form').serialize();
        $.ajax({
            url: 'includes/contact.php',
            type: 'POST',
            data: data,
            success: function(response) {
                if (response == 'empty') {
                    $('#error_message').text('Noen av feltene er tomme.')
                } else {
                    $('.message').html(response);
                    $('#contact_form').fadeOut('400');
                    $('#info_line').fadeIn('400').text('Takk for din henvendelse');
                }; 
            }
        });     
        e.preventDefault();
    });
});

Answer 3

我猜这是因为默认操作（提交表单）是在$ .ajax请求之前处理的。尝试在提交回调中首先制作e.preventDefault（）。

$(document).ready(function() {
    $('#contact_form').submit(function(e) {
        e.preventDefault();
        data = $('#contact_form').serialize();
        $.ajax({
            url: 'includes/contact.php',
            type: 'POST',
            data: data,
            success: function(response) {
                if (response == 'empty') {
                    $('#error_message').text('Noen av feltene er tomme.')
                } else {
                    $('.message').html(response);
                    $('#contact_form').fadeOut('400');
                    $('#info_line').fadeIn('400').text('Takk for din henvendelse');
                }; 
            }
        });     
    });
});

jQuery .submit（）。ajax（）必须单击两次发送按钮才能获得正确的响应

3 个答案: