点击弹出层ajax php jquery 发送表单

点击弹出层ajax php jquery 发送表单

1. <script type="text/java script">
3. var messageDelay = 2000; // How long to display status messages (in milliseconds)
5. // Init the form once the document is ready
6. $( init );
9. // Initialize the form
11. function init() {
13. // Hide the form initially.
14. // Make submitForm() the form's submit handler.
15. // Position the form so it sits in the centre of the browser window.
16. $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );
18. // When the "Send us an email" link is clicked:
19. // 1. Fade the content out
20. // 2. Display the form
21. // 3. Move focus to the first field
22. // 4. Prevent the link being followed
24. $('a[href="#contactForm"]').click( function() {
25. $('#content').fadeTo( 'slow', .2 );
26. $('#contactForm').fadeIn( 'slow', function() {
27. $('#senderName').focus();
28. } )
30. return false;
31. } );
33. // When the "Cancel" button is clicked, close the form
34. $('#cancel').click( function() {
35. $('#contactForm').fadeOut();
36. $('#content').fadeTo( 'slow', 1 );
37. } );
39. // When the "Escape" key is pressed, close the form
40. $('#contactForm').keydown( function( event ) {
41. if ( event.which == 27 ) {
42. $('#contactForm').fadeOut();
43. $('#content').fadeTo( 'slow', 1 );
44. }
45. } );
47. }
50. // Submit the form via Ajax
52. function submitForm() {
53. var contactForm = $(this);
55. // Are all the fields filled in
57. if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#message').val() ) {
59. // No; display a warning message and return to the form
60. $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
61. contactForm.fadeOut().delay(messageDelay).fadeIn();
63. } else {
65. // Yes; submit the form to the PHP script via Ajax
67. $('#sendingMessage').fadeIn();
68. contactForm.fadeOut();
70. $.ajax( {
71. url: contactForm.attr( 'action' ) + " ajax=true",
72. type: contactForm.attr( 'method' ),
73. data: contactForm.serialize(),
74. success: submitFinished
75. } );
76. }
78. // Prevent the default form submission occurring
79. return false;
80. }
83. // Handle the Ajax response
85. function submitFinished( response ) {
86. response = $.trim( response );
87. $('#sendingMessage').fadeOut();
89. if ( response == "success" ) {
91. // Form submitted successfully:
92. // 1. Display the success message
93. // 2. Clear the form fields
94. // 3. Fade the content back in
96. $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
97. $('#senderName').val( "" );
98. $('#senderEmail').val( "" );
99. $('#message').val( "" );
101. $('#content').delay(messageDelay+500).fadeTo( 'slow', 1 );
103. } else {
105. // Form submission failed: Display the failure message,
106. // then redisplay the form
107. $('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
108. $('#contactForm').delay(messageDelay+500).fadeIn();
109. }
110. }

112. XML/HTML Code
     3. 点击这里测试