duansaoguan7955
2015-11-10 12:17
浏览 170
已采纳

Ajax表单提交页面重定向

I have an HTML form that submits using JQuery and AJAX.

On successful submission this then loads a modal and then redirects to another page.

What I am trying to do is to check the entered data in one of the form fields and then redirect based on this value.

Below is my JS file. I have the 'if' statements set but the page just redirects to the first option regardless of that is entered.

magic.js:-

// magic.js
$(document).ready(function() {

    // process the form
    $('form').submit(function(event) {
        $('.form-group').removeClass('has-error'); // remove the error class
        $('.help-block').remove(); // remove the error text

        // get the form data
        // there are many ways to get this data using jQuery (you can use the class or id also)
        var formData = {
            'name'              : $('input[name=name]').val(),
            'email'             : $('input[name=email]').val(),
            'superheroAlias'     : $('input[name=superheroAlias]').val()
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
            url         : 'process.php', // the url where we want to POST
            data        : formData, // our data object
            dataType    : 'json', // what type of data do we expect back from the server
            encode      : true,
            success    : function showModal() {
                $( "#myModal .modal-content" ).html();
                $('#myModal').modal('show');
}
        })
            // using the done promise callback
            .done(function(data) {

                // log data to the console so we can see
                console.log(data); 

                // here we will handle errors and validation messages
                if ( ! data.success) {

                    // handle errors for name ---------------
                    if (data.errors.name) {
                        $('#name-group').addClass('has-error'); // add the error class to show red input
                        $('#name-group').append('<div class="help-block">' + data.errors.name + '</div>'); // add the actual error message under our input
                    }

                    // handle errors for email ---------------
                    if (data.errors.email) {
                        $('#email-group').addClass('has-error'); // add the error class to show red input
                        $('#email-group').append('<div class="help-block">' + data.errors.email + '</div>'); // add the actual error message under our input
                    }

                    // handle errors for superhero alias ---------------
                    if (data.errors.superheroAlias) {
                        $('#superhero-group').addClass('has-error'); // add the error class to show red input
                        $('#superhero-group').append('<div class="help-block">' + data.errors.superheroAlias + '</div>'); // add the actual error message under our input
                    }

                } else {

                    // ALL GOOD! just show the success message!
                    $('form').append('<div class="alert alert-success">' + data.message + '</div>');
                    if(formData.name="craft") {window.setTimeout(function () {
        location.href = "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=6SLZSSYLDRM2A";
    }, 3000);}
                    else if(formData.name="business"){window.setTimeout(function () {
        location.href = "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=FGXPCRVAXJC8J";
    }, 3000);}
                    else{window.setTimeout(function () {
        location.href = "https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=WH8HB3M9S3GU2";
    }, 3000);}
                    /* $( "#myModal .modal-content" ).html('test');
                $('#myModal').modal('show');*/
                    // usually after form submission, you'll want to redirect
                    // window.location = '/thank-you'; // redirect a user to another page

                }
            })

            // using the fail promise callback
            .fail(function(data) {

                // show any errors
                // best to remove for production
                console.log(data);
            });

        // stop the form from submitting the normal way and refreshing the page
        event.preventDefault();
    });

});

I think my variable names are the issue but I can't be sure.

  • 写回答
  • 好问题 提建议
  • 追加酬金
  • 关注问题
  • 邀请回答

2条回答 默认 最新

  • dongyou7472 2015-11-10 12:22
    最佳回答

    Well, in "if" statement should be ==, not =

    评论
    解决 无用
    打赏 举报
查看更多回答(1条)

相关推荐 更多相似问题