2015-11-10 165 views
0

我有一個使用JQuery和AJAX提交的HTML表單。Ajax表單提交頁面重定向

成功提交後,將加載一個模式,然後重定向到另一個頁面。

我想要做的是檢查輸入的數據中的一個表單字段,然後根據此值重定向。

下面是我的JS文件。我設置了'if'語句,但頁面只是重定向到第一個選項,而不管輸入的是什麼。

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(); 
    }); 

}); 

我覺得我的變量名是這個問題,但我不能肯定。

回答

2

那麼,在 「如果」 的說法應該是==,而不是=

+0

新手的錯誤!我看了很長時間,只是看不到它!我認爲我還在星期一工作模式 – Luke

+0

可以推薦兩件事: 1.使用像「val」= var(我沒有習慣它......)的反向條件... 2.使用檢查代碼完整性的IDE – iXCray

0

嘗試:

// magic.js 

$(document).ready(function() { 

    // process the form 
    $('form').submit(function(event) { 
     event.preventDefault(); 
     $('.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'); 
        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);} 


       } 
} 
     }); 



}); 
}); 
相關問題