0

そのため、送信されると色とメッセージが変わる送信ボタンを備えたフォームを作成しようとしています。[AJAX と PHP] を介した送信用のコードとボタン アニメーションの両方が単独で動作します。しかし、私はそれらを一緒に働かせることができないようです。何らかの理由で、送信ボタンがクリックされると、AJAX がアニメーションの実行をキャンセルまたは停止しているようです。誰かが私を正しい方向に向けることができますか? コードの最初の部分はボタン アニメーションをトリガーし、コードの下半分は PHP スクリプトへのポスト リクエストをトリガーして、その人にメールを送信します。

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

このフィドルをチェック

$(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 に答える