Question

在我的项目中，Jquery不使用ajax方法发布数据。插入数据库的PHP代码工作得非常好。下面的代码附加在我的index.php和js代码..

index.php代码

<body>
    <div class="container">
    <section>
            <form method="post" id="theForm" class="simform" autocomplete="off">
                <div class="simform-inner">
                    <ol class="questions">
                        <li>
                            <span><label for="q1">What's your favorite movie?</label></span>
                            <input id="q1" name="q1" type="text"/>
                        </li>
                        <li>
                            <span><label for="q2">Where do you live?</label></span>
                            <input id="q2" name="q2" type="text"/>
                        </li>
                        <li>
                            <span><label for="q3">What time do you got to work?</label></span>
                            <input id="q3" name="q3" type="text"/>
                        </li>
                        <li>
                            <span><label for="q4">How do you like your veggies?</label></span>
                            <input id="q4" name="q4" type="text"/>
                        </li>
                        <li>
                            <span><label for="q5">What book inspires you?</label></span>
                            <input id="q5" name="q5" type="text"/>
                        </li>
                        <li>
                            <span><label for="q6">What's your profession?</label></span>
                            <input id="q6" name="q6" type="text"/>
                        </li>
                    </ol><!-- /questions -->
                    <button class="submit" type="submit">Send answers</button>
                    <div class="controls">
                        <button class="next"></button>
                        <div class="progress"></div>
                        <span class="number">
                            <span class="number-current"></span>
                            <span class="number-total"></span>
                        </span>
                        <span class="error-message"></span>
                    </div><!-- / controls -->
                </div><!-- /simform-inner -->
                <span class="final-message"></span>
            </form><!-- /simform -->            
        </section>
        <script src="js/classie.js"></script>
    <script src="js/stepsForm.js"></script>
    <script>
        var theForm = document.getElementById( 'theForm' );

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


                form.submit(

                );


                /*or
                AJAX request (maybe show loading indicator while we don't have an answer..)
                */

                // let's just simulate something...
                var messageEl = theForm.querySelector( '.final-message' );
                messageEl.innerHTML = 'Thank you! We\'ll be in touch.';
                classie.addClass( messageEl, 'show' );
            }
        } );
    </script>
</body>

jquery代码是：

stepsForm.prototype._submit = function() {
    this.options.onSubmit( 
    function(e1){

e1.preventDefault(); // Prevent Default Submission

$.post('ajaxsubmit.php', $(this.e1).serialize() )
.done(function(){
  alert('Ajax Submit successfully ...');
})
.fail(function(){
 alert('Ajax Submit Failed ...');
});
    }
    );
}

ajaxsubmit.php工作正常。

Jquery表单使用ajax提交

0 个答案: