点击弹出层ajax PHP jquery 发送表单
JavaScript Code
- <scripttype="text/javascript">
- varmessageDelay=2000;//Howlongtodisplaystatusmessages(inmilliseconds)
- //Inittheformoncethedocumentisready
- $(init);
- //Initializetheform
- functioninit(){
- //Hidetheforminitially.
- //MakesubmitForm()theform'ssubmithandler.
- //Positiontheformsoitsitsinthecentreofthebrowserwindow.
- $('#contactForm').hide().submit(submitForm).addClass('positioned');
- //Whenthe"Sendusanemail"linkisclicked:
- //1.Fadethecontentout
- //2.Displaytheform
- //3.Movefocustothefirstfield
- //4.Preventthelinkbeingfollowed
- $('a[href="#contactForm"]').click(function(){
- $('#content').fadeTo('slow',.2);
- $('#contactForm').fadeIn('slow',function(){
- $('#senderName').focus();
- })
- returnfalse;
- });
- //Whenthe"Cancel"buttonisclicked,closetheform
- $('#cancel').click(function(){
- $('#contactForm').fadeOut();
- //Whenthe"Escape"keyispressed,0);">$('#contactForm').keydown(function(event){
- if(event.which==27){
- $('#contactForm').fadeOut();
- }
- }
- //SubmittheformviaAjax
- functionsubmitForm(){
- varcontactForm=$(this);
- //Areallthefieldsfilledin?
- if(!$('#senderName').val()||!$('#senderEmail').val()||!$('#message').val()){
- //No;displayawarningmessageandreturntotheform
- $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
- contactForm.fadeOut().delay(messageDelay).fadeIn();
- }else{
- //Yes;submittheformtothePHPscriptviaAjax
- $('#sendingMessage').fadeIn();
- contactForm.fadeOut();
- $.ajax({
- url:contactForm.attr('action')+"?ajax=true",
- type:contactForm.attr('method'),
- data:contactForm.serialize(),0);">success:submitFinished
- //Preventthedefaultformsubmissionoccurring
- returnfalse;
- //HandletheAjaxresponse
- functionsubmitFinished(response){
- response=$.trim(response);
- $('#sendingMessage').fadeOut();
- if(response=="success"){
- //Formsubmittedsuccessfully:
- //1.Displaythesuccessmessage
- //2.Cleartheformfields
- //3.Fadethecontentbackin
- $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
- $('#senderName').val("");
- $('#senderEmail').val("");
- $('#message').val("");
- $('#content').delay(messageDelay+500).fadeTo('slow',0);">//FormsubmissionFailed:Displaythefailuremessage,0);">//thenredisplaytheform
- $('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
- $('#contactForm').delay(messageDelay+500).fadeIn();
- }
- }
- </script>
