通过ajax重定向提交表单到php文件

Question

我试图用ajax提交表单，因此用户不需要离开当前页面;但提交总是把我带到submit.php ...我做错了什么？我尝试过在互联网上找到的不同代码，但它一直出错......

提前谢谢！

脚本：

<script>
    var theForm = document.getElementById( 'theForm' );

    new stepsForm( theForm, {
        onSubmit : function( form ) {
            // hide form
            classie.addClass( theForm.querySelector( '.simform-inner' ), 'hide' );

            theForm.submit(function(e){
                e.preventDefault();
                $this = $(this);
                $.ajax({
                    type: "POST",
                    url: $this.attr('action'),
                    data: $this.serialize(),
                    success : function(){
                        var messageEl = theForm.querySelector( '.final-message' );
                        messageEl.innerHTML = 'Super! Je bent ingeschreven! We verwachten je 27 maart om 20u00 op de chiro!';
                        classie.addClass( messageEl, 'show' );
                    }
                });                  
            });

        }
    });
</script>

PHP

<?php

    $naam = $_POST['q1'];
    $email = $_POST['q2'];
    $afdeling = $_POST['q3'];
    $kleur = $_POST['q4'];
    $message = $_POST['q5'];

    $to  = 'myemail@email.be';
    $subject = 'Inschrijving OLA Activiteit';
    $body= "
        <br><hr><br>
        Naam: $naam <br><br>
        Email: $email <br><br>
        Afdeling: $afdeling <br><br>
        Kleur: $kleur<br><br>
        <br><br><br>
        bericht:<br> $message <br>
        <br>
        ";
    $headers = "From: $email\r\n";
    $headers .= "Content-type: text/html\r\n";

    if (filter_var($email, FILTER_VALIDATE_EMAIL)) { // this line checks that we have a valid email address
        mail($to, $subject, $body, $headers); //This method sends the mail.
    }
?>

更新：我设法解决了这个问题......

        <script>
        var theForm = document.getElementById( 'theForm' );

        new stepsForm( theForm, {
            onSubmit : function( form ) {
                // hide form
                classie.addClass( theForm.querySelector( '.simform-inner' ), 'hide' );

                $("#theForm").submit(function(){

                    $.ajax({
                    type: "POST",
                    url: $(this).attr('action'),
                    data: $(this).serialize(),
                    success : function(){
                    }

                 });
                });

                var messageEl = theForm.querySelector( '.final-message' );
                messageEl.innerHTML = 'Super! Je bent ingeschreven! We zien je graag 27 maart om 20u00 aan de chirolokalen!';
                classie.addClass( messageEl, 'show' );
            }
        } );
    </script>