English 中文(简体)
j Query/Ajax形成成功信息
原标题:jQuery/Ajax form success message
  • 时间:2011-10-03 16:55:42
  •  标签:
  • forms
  • jquery

我在一站点工作时有两种形式,控制这些表格的文字也包含一个成功的信息,因此,如果它们重新提交投入数据,就消失了,用户不知道数据是否实际发送。 我只看一线答案,但由于这一卷宗控制了电子邮件的提交表、联系表格和前线材料,我看看看什么。

在此,我要让用户知道,他们的信息已经发送到电子邮件输入表和联系表上。 我赞赏在那里提供的任何帮助。

$(document).ready(function() {
//Set default hint if nothing is entered
setHints();

//Bind JavaScript event on SignUp Button
$( #signUp ).click(function(){
    signUp($( #subscribe ).val());

});

//Bind JavaScript event on Send Message Button
$( #sendMessage ).click(function(){    
    if(validateInput()){
        sendMail();
    }else
    {
        alert( Please fill all fields to send us message. );
    }
});

//Load initial site state (countdown, twitts)
initialize();
});
var setHints = function()
{
$( #subscribe ).attachHint( Enter your email to be notified when more info is available );
$( [name=contact_name] ).attachHint( Name );
$( [name=contact_email] ).attachHint( Email );
$( [name=contact_subject] ).attachHint( Subject );
$( [name=contact_message] ).attachHint( Message );
};
var signUp = function(inputEmail)
{
var isValid = true;
var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
if(!emailReg.test(inputEmail)){
    isValid = false;
    alert( Your email is not in valid format );
}
if(isValid){
    var params = {
         action     :  SingUp ,
         email      : inputEmail
    };
    $.ajax({
        type: "POST",
        url: "php/mainHandler.php",
        data: params,
        success: function(response){
            if(response){
                var responseObj = jQuery.parseJSON(response);
                if(responseObj.ResponseData)
                {
                    $( #subscribe ).val(  );
                }
            }
        }
    });
}
};
var initialize = function()
{
var params = {
     action     :  Initialize 
};
$.ajax({
    type: "POST",
    url: "php/mainHandler.php",
    data: params,
    success: function(response){
        if(response){
            var responseObj = jQuery.parseJSON(response);
            if(responseObj.ResponseData)
            {
                $( ul.twitts ).empty();
                if(responseObj.ResponseData.Twitts){
                    $( a.followUsURL ).attr( href , http://twitter.com/#!/ +responseObj.ResponseData.Twitts[0].Name);
                    $.each(responseObj.ResponseData.Twitts, function(index, twitt){
                        var twitterTemplate =  <li> 
                        +  <a href="http://twitter.com/#!/{0}/status/{1}" target="_blank" class="twittURL">#{0}</a> 
                        +  {2} 
                        +  <span class="time">{3}</span> 
                        +  </li> ;

                        $( ul.twitts ).append(StringFormat(twitterTemplate, twitt.Name, twitt.StatusID, twitt.Text, twitt.Date));
                    });
                }

                if(responseObj.ResponseData.Start_Date)
                {
                    setInterval(function(){
                        var countDownObj = calculateTimeDifference(responseObj.ResponseData.Start_Date);
                        if(countDownObj){
                            $( #days ).text(countDownObj.Days);
                            $( #hours ).text(countDownObj.Hours);
                            $( #minutes ).text(countDownObj.Minutes);
                            $( #seconds ).text(countDownObj.Seconds);
                        }
                    }, 1000);
                }
            }
        }
    }
});
};

var validateInput = function(){
var isValid = true;
$( input, textarea ).each(function(){
    if($(this).hasClass( required ))
    {
        if($(this).val()!=  ){
            if($(this).hasClass( email ))
            {
                var emailReg = /^([w-.]+@([w-]+.)+[w-]{2,4})?$/;
                if(!emailReg.test($(this).val())){
                    isValid = false;
                    alert( Your email is not in valid format );
                }
            }
        }else
        {
            isValid = false;
        }
    }
});
return isValid;
};

var resetInput = function(){
$( input, textarea ).each(function() {
    $(this).val(  ).text(  );
});
};

var sendMail = function(){
var params = {
     action     :  SendMessage ,
     name       : $( [name=contact_name] ).val(),
     email      : $( [name=contact_email] ).val(),
     subject    : $( [name=contact_subject] ).val(),
     message    : $( [name=contact_message] ).val()
};
$.ajax({
    type: "POST",
    url: "php/mainHandler.php",
    data: params,
    success: function(response){
        if(response){
            var responseObj = jQuery.parseJSON(response);
            if(responseObj.ResponseData)
                $( label.sendingStatus ).text(responseObj.ResponseData);
        }
        resetInput();
        $( #sendMail ).removeAttr( disabled );
    },
    error: function (xhr, ajaxOptions, thrownError){
        //xhr.status : 404, 303, 501...
        var error = null;
        switch(xhr.status)
        {
            case "301":
                error = "Redirection Error!";
                break;
            case "307":
                error = "Error, temporary server redirection!";
                break;
            case "400":
                error = "Bad request!";
                break;
            case "404":
                error = "Page not found!";
                break;
            case "500":
                error = "Server is currently unavailable!";
                break;
            default:
                error ="Unespected error, please try again later.";
        }
        if(error){
            $( label.sendingStatus ).text(error);
        }
    }
});
};

var calculateTimeDifference = function(startDate) {
var second = 1000;
var minute = second * 60;
var hour = minute * 60;
var day = hour * 24;

var seconds = 0;
var minutes = 0;
var hours = 0;
var days = 0;

var currentDate = new Date();
startDate = new Date(startDate);

var timeCounter = startDate - currentDate;
if (isNaN(timeCounter))
{
    return NaN;
}
else
{
    days = Math.floor(timeCounter / day);
    timeCounter = timeCounter % day;

    hours = Math.floor(timeCounter / hour);
    timeCounter = timeCounter % hour;

    minutes = Math.floor(timeCounter / minute);
    timeCounter = timeCounter % minute;

    seconds = Math.floor(timeCounter / second);
}

var tDiffObj = {
    "Days" : days,
    "Hours" : hours,
    "Minutes" : minutes,
    "Seconds" : seconds
};

return tDiffObj;
};

var StringFormat = function() {
var s = arguments[0];
for (var i = 0; i < arguments.length - 1; i++) {
    var regExpression = new RegExp("\{" + i + "\}", "gm");
    s = s.replace(regExpression, arguments[i + 1]);
}
return s;
}
最佳回答

您需要加入<条码>。 电话:$.ajax。 你们可以制定一种方法,向这些人传达信息:

例如,signUpFunction ssuccess 反馈可以看:

success: function(response){
    if(response){
        var responseObj = jQuery.parseJSON(response);
        if(responseObj.ResponseData)
        {
            $( #subscribe ).val(  );
            showMessage( Your subscription was received. Thank you! );
        }
    }
}

你们只是建立一种向用户传递信息的方法。

var showMessage = function (msg) {
    // of course, you wouldn t use alert, 
    // but would inject the message into the dom somewhere
    alert(msg);
}

您将打电话给<代码>success>的任何地点。

问题回答

You can add your success notifing code in each of the $.ajax success handlers.





相关问题
getGridParam is not a function

The HTML: <a href="javascript:void(0)" id="m1">Get Selected id s</a> The Function: jQuery("#m1").click( function() { var s; s = jQuery("#list4").getGridParam( selarrrow )...

selected text in iframe

How to get a selected text inside a iframe. I my page i m having a iframe which is editable true. So how can i get the selected text in that iframe.

jQuery cycle page with links

I am using the cycle plugin with pager functionality like this : $j( #homebox ) .cycle({ fx: fade , speed: fast , timeout: 9000, pager: #home-thumbs , ...

jquery ui dialog opens only once

I have a button that opens a dialog when clicked. The dialog displays a div that was hidden After I close the dialog by clicking the X icon, the dialog can t be opened again.

jConfirm with this existing code

I need help to use jConfirm with this existing code (php & Jquery & jAlert). function logout() { if (confirm("Do you really want to logout?")) window.location.href = "logout.php"; } ...

Wrap text after particular symbol with jQuery

What I m trying to do, is wrap text into div inside ll tag. It wouldn t be a problem, but I need to wrap text that appears particularly after "-" (minus) including "minus" itself. This is my html: &...

热门标签