提交表单时,在感谢页面上显示结果(名字)

时间:2013-08-09 06:47:42

标签: php jquery ajax forms submit

坚持使用PHP的东西,我知道它很简单但不确定这样做的正确方法,无论是通过jquery还是php。

我有一个联系表单,当它提交表单时,我希望结果中显示一些字段的结果谢谢你说:

感谢您输入 YOURNAME 。 Blah blah blah

这是一个简单的PHP行可以实现的,还是需要通过jquery调用。

谢谢,只有php的新手,所以有些人仍然有点混乱

   <?php
    define('is_freetrial-celebrity', 1);
    include_once('includes/header.inc.php');
    ?>
    <div role="main" id="main">
        <article id="mainFreetrial" class="greyBlock twoColumnsLayout">
            <header>
                <h1>Get Started</h1>
            </header>
            <div>
                <form method="get" action="/forms_validation/freetrial.php" class="trialForm ajaxForm">
                    <div class="column">

                        <p>
                            <label for="firstNameTrial">First name<sup class="red">*</sup></label><input type="text" id="firstNameTrial" name="firstNameTrial" value="" required/>
                        </p>
                        <p>
                            <label for="lastNameTrial">Last name<sup class="red">*</sup></label><input type="text" id="lastNameTrial" name="lastNameTrial" value="" required/>
                        </p>
                        <p>
                            <label for="ageTrial">Age</label><input type="text" id="ageTrial" name="ageTrial" value=""/>
                        </p>

                        <p>
                            <label for="celebrityTrial" style="display: block; width: auto; margin-bottom: 5px;">Name the celebrity you would most like to meet, and why?<sup class="red">*</sup></label>
                            <textarea id="celebrityTrial" name="celebrityWhyTrial" style="width: 430px; height: 3em;" required></textarea>
                        </p>

                        <p class="ajaxFormBeforeValid">
                            <input type="submit" value="Submit now" class="redButton"/><span class="ajaxFormWait"></span><span class="ajaxFormError error"></span>
                        </p>
                        <div class="ajaxFormValid">
                            <p>
                                Thank you! Your local consultant will contact you soon. 'Like' us while you wait for all the latest VIP offers and promotions!
                            </p>
                        </div>
                        <p>
                            <small>
                                <sup class="red">*</sup>These are mandatory fields.
                            </small>

                        </p>

                    </div>
                </form>
            </div>
        </article>
    </div>
    <?php include_once('includes/footer.inc.php'); ?>

继承人jquery部分

/*************************
plugin to manage ajax forms
*************************/
(function( $ ){

    var methods = {
        init : function( options ) {

            return this.each(function(){

                var $this = $(this),
                    data = $this.data('ajaxForm'),
                    ajaxForm = $('<div />', {
                        text : $this.attr('title')
                    });

                // If the plugin hasn't been initialized yet
                if ( ! data ) {

                    $(this).data('ajaxForm', {
                        target : $this,
                        ajaxForm : ajaxForm
                    });

                    //get the spinner, the valid box and the error box
                    var mySpinner = $this.find('.ajaxFormWait');
                    var myValid = $this.find('.ajaxFormValid');
                    var myError = $this.find('.ajaxFormError');
                    var myBeforeValid = $this.find('.ajaxFormBeforeValid');

                    myError.hide();
                    mySpinner.hide();

                    //add an event to send the form via AJAX
                    $this.submit(function(){
                        // get all the inputs into an array.
                        var $inputs = $this.find(':input:not([type="submit"], [type="button"])');

                        // not sure if you wanted this, but I thought I'd add it.
                        // get an associative array of just the values.
                        var values = {};
                        $inputs.each(function() {
                            if (this.type == "radio" || this.type == "checkbox"){
                                if($(this).is(':checked')){
                                    if(typeof(values[this.name]) === 'undefined'){
                                        values[this.name] = $(this).val();
                                    }else{
                                        values[this.name] += ', '+($(this).val());
                                    }
                                }
                            } else
                                values[this.name] = $(this).val();
                        });

                        function defineTheInvalidsFields(fieldsList){
                            for(var i in fieldsList){
                                if(fieldsList[i] == 'closestStudio'){
                                    $this.find('[name="'+fieldsList[i]+'"]').parent().addClass('invalid');
                                }else{
                                    $this.find('[name="'+fieldsList[i]+'"]').addClass('invalid');
                                }
                            }
                        }


                        //send an AJAX request
                        $.ajax({
                            url: $this.attr('action'),
                            dataType: 'json',
                            data: values,
                            beforeSend: function(){
                                mySpinner.show();
                            },
                            success: function(result){
                                mySpinner.hide();
                                $this.find('.invalid').removeClass('invalid');

                                //error management
                                if(typeof(result.valid) === 'undefined'){

                                    if(result.multipleSend){ //if multiple send
                                        myError.html('Your request is already sent.');
                                    }else if(result.required){ //if fields are required
                                        defineTheInvalidsFields(result.required);
                                        myError.html('The fields in red are required.');
                                    }else if(result.format){ //if the forma is incorrect
                                        defineTheInvalidsFields(result.format);
                                        myError.html('The fields in red have invalid content.');
                                    }else if(result.loginInvalid){
                                        myError.html(result.loginInvalid);
                                    }else{
                                        myError.html('An unknown error occured.');
                                    }
                                    myValid.slideUp(300);
                                    myError.slideDown(300);
                                }else if(typeof(result.loginUrl) !== 'undefined'){
                                    window.location.href = result.loginUrl;
                                }else{
                                    if(result.valid || result.valid == 'true'){
                                        if($('#inputFreetrialFitnessFirst').length){
                                            myBeforeValid.slideUp(300);
                                            myError.slideUp(300);
                                            myValid.slideDown(300);
                                        }else{
                                            window.location = '/free-trial-thank-you/';
                                        }
                                    }else{
                                        myError.html('There was an error sending your details. Please try again.');
                                        myValid.slideUp(300);
                                        myError.slideDown(300);
                                    }
                                }
                            }
                        });

                        return false;
                    });

                    //special case for the heardAbout
                    $('#heardAbout').change(function(){
                        if($(this).find('option:selected').attr('value') == 'Other'){
                            $('#otherHeardAbout').slideDown(300);
                        }else{
                            $('#otherHeardAbout').slideUp(300);
                        }
                    });
                }
            });
        },
        destroy : function(){
            return this.each(function(){
                var $this = $(this),
                    data = $this.data('ajaxForm');

                // Namespacing FTW
                $(window).unbind('.ajaxForm');
                data.ajaxForm.remove();
                $this.removeData('ajaxForm');
            })
        }
    };

    $.fn.ajaxForm = function( method ) {

        // Method calling logic
        if ( methods[method] ) {
            return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
        } else if ( typeof method === 'object' || ! method ) {
            return methods.init.apply( this, arguments );
        } else {
            $.error( 'Method ' +  method + ' does not exist on jQuery.ajaxForm' );
        }    

    };

})( jQuery );

表单会被发送到另一个页面,有没有办法定位特定的div并添加带有名称的自定义消息。

if(result.valid || result.valid == 'true'){
     if($('#inputFreetrialFitnessFirst').length){
          myBeforeValid.slideUp(300);
          myError.slideUp(300);
          myValid.slideDown(300);
     }else{
          window.location = '/free-trial-thank-you/';
       }
}else{
    myError.html('There was an error sending your details. Please try again.');
    myValid.slideUp(300);
    myError.slideDown(300);
}

2 个答案:

答案 0 :(得分:0)

我能想到的一种方法是使用会话来存储信息。

  1. 在freetrial.php中将表单信息存储在会话中,如下所示:

    session_start();
    $_SESSION['firtNameTrial'] = $_GET['firstNameTrial'];
    
  2. 关于ajax成功,使用javascript windows.location.replace将页面重定向到感谢页面:

      // similar behavior as an HTTP redirect
      window.location.replace("http://yourwebpageaddress.com/thankyou.php");
    
  3. 在感谢页面上获取会话。如果您不知道,可以查看此示例:Click here用于会话示例

答案 1 :(得分:0)

如果你想通过ajax调用来获取特定元素div你可以这样做:

$.ajax({
url: 'page.html',
success: function(data) {
    item=$(data).filter('#specific_element');
    $(selector).html(item); 
 }
});

如果您使用

将魔杖重定向到其他页面
window.location = '/free-trial-thank-you/';

然后在不同页面上显示数据您应该传递needet参数,如

 window.location = '/free-trial-thank-you/page.php?name1=Daniel&name2=Pablo;

并在不同的网站上使用_GET或_POST显示参数,例如: 如果您在Ajax请求中使用PSOT方法,则echo $_GET['name1'] or echo $_POST['name1']