0

因此，我正在尝试创建一个带有提交按钮的表单，该按钮在提交后会更改其颜色和消息。通过 [AJAX 和 PHP] 提交的代码和按钮动画都可以独立运行。但是，我似乎无法让他们一起工作。出于某种原因，一旦单击提交按钮，似乎 AJAX 正在取消或停止运行动画。有人可以指出我正确的方向吗？代码的第一部分触发按钮动画，代码的下半部分触发对 php 脚本的 post 请求，以向此人发送电子邮件。

var submitButton = $('#submitme');              // Variable to cache button element
var alertBox = $('.alert-box');                 // Variable to cache meter element
var closeButton = $('.close');                  // Variable to cache close button element

$(submitButton).click(function() { // Initiates the send interaction.
    if ($("#commentForm").valid()) {
        $(this).fadeOut(500); // Fades out submit button when it's clicked
        setTimeout(function() { // Delays the next effect
             $(alertBox).fadeIn(500); // Fades in success alert
        }, 500);
    }   
}); 

$(closeButton).click(function() { // Initiates the reset function
    $(alertBox).fadeOut(500); // Fades out success message
    setTimeout(function() { // Delays the next effect
        $('input, textarea').not('input[type=submit]').val(''); // Resets the input fields
        $(submitButton).fadeIn(500); // Fades back in the submit button
    }, 500);

    return false; // This stops the success alert from being removed as we just want to hide it
});

//AJAX code
$(document).ready(function() {
    $(submitButton).click(function() {

        var name       = $('input[name=name]').val();
        var email      = $('input[name=email]').val();
        var subject    = $('input[name=subject]').val();
        var comment    = $('textarea[name=comment]').val();

        if ($("#commentForm").valid()) {

            //data to be sent to server
            post_data = {'name':name, 'email':email, 'subject':subject, 'comment':comment};

            //Ajax post data to server
            $.post('form-processing.php', post_data, function(response){  

                //load json data from server and output message    
                if(response.type == 'error')
                {
                    output = '<div class="error">'+response.text+'</div>';
                }else{ 
                    output = '<div class="success">'+response.text+'</div>';
                }

                $("#result").hide().html(output).slideDown();
            }, 'json');

        }
    });

});
4

2 回答 2

0

所以没有达到我想要的效果。最终我最终只在 jquery 中使用了 ajax 函数，现在一切都在桌面上正常工作，但似乎在移动设备上，对 php 脚本的 ajax 调用来处理和发送电子邮件似乎被破坏了。

//AJAX code
$(document).ready(function() {
    $(submitButton).click(function() {

        if ($("#commentForm").valid()) {

            //data to be sent to server
            //post_data = {'name':name, 'email':email, 'subject':subject, 'comment':comment};
            post_data = 'name='+ name + '&email=' + email + '&subject=' + subject + '&comment=' + comment;

            $.ajax({
                type: "POST",
                url: "form-processing.php",
                data: post_data,
                success: function() {
                    //display message back to user here
                }
            });
            return false;
        }
    });
});
于 2014-04-12T14:33:58.737 回答
0

检查这个小提琴

$(document).ready(function(){
    var submitButton = $('#submitme');              // Variable to cache button element
    var alertBox = $('.alert-box');                 // Variable to cache meter element
    var closeButton = $('.close');                  // Variable to cache close button element

    $(submitButton).click(function() { // Initiates the send interaction.
        $("#commentForm").validate();
        if ($("#commentForm").valid()) {
            $(this).fadeOut(500); // Fades out submit button when it's clicked
            setTimeout(function() { // Delays the next effect
                 alertBox.fadeIn(500); // Fades in success alert
            }, 500);
        }   
    }); 

    $(closeButton).click(function() { // Initiates the reset function
        alertBox.fadeOut(500); // Fades out success message
        setTimeout(function() { // Delays the next effect
            $('input, textarea').not('input[type=button]').val(''); // Resets the input fields
            submitButton.fadeIn(500); // Fades back in the submit button
        }, 500);

        return false; // This stops the success alert from being removed as we just want to hide it
    });

    //AJAX code
    $(submitButton).click(function() {   
        var name       = $('input[name=name]').val();
        var email      = $('input[name=email]').val();
        var subject    = $('input[name=subject]').val();
        var comment    = $('textarea[name=comment]').val();

        if ($("#commentForm").valid()) {
            //data to be sent to server
            post_data = {'name':name, 'email':email, 'subject':subject, 'comment':comment};
            //Ajax post data to server

           // $.post('/link.php', post_data, function(response){  
                //load json data from server and output message    
                //if(response.type == 'error')
                //{
                //    output = '<div class="error">'+response.text+'</div>';
                //}//else{ 
                  output = '<div class="success">This is the post respnose.</div>';
                //}

                $("#result").html('ffasdf').slideDown('slow');
           // }, 'json');
        }
    });

});
于 2014-04-10T19:16:31.637 回答