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

2021-09-23 00:58:35

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

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

 

JavaScript Code
  1. <script type="text/javascript">  
  2.   
  3. var messageDelay = 2000;  // How long to display status messages (in milliseconds)  
  4.   
  5. // Init the form once the document is ready  
  6. $( init );  
  7.   
  8.   
  9. // Initialize the form  
  10.   
  11. function init() {  
  12.   
  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‘ ); 
  17.  
  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 
  23.  
  24.   $(‘a[href="#contactForm"]‘).click( function() { 
  25.     $(‘#content‘).fadeTo( ‘slow‘, .2 ); 
  26.     $(‘#contactForm‘).fadeIn( ‘slow‘, function() { 
  27.       $(‘#senderName‘).focus(); 
  28.     } ) 
  29.  
  30.     return false; 
  31.   } ); 
  32.    
  33.   // When the "Cancel" button is clicked, close the form 
  34.   $(‘#cancel‘).click( function() {  
  35.     $(‘#contactForm‘).fadeOut(); 
  36.     $(‘#content‘).fadeTo( ‘slow‘, 1 ); 
  37.   } );   
  38.  
  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.   } ); 
  46.  
  47. } 
  48.  
  49.  
  50. // Submit the form via Ajax 
  51.  
  52. function submitForm() { 
  53.   var contactForm = $(this); 
  54.  
  55.   // Are all the fields filled in? 
  56.  
  57.   if ( !$(‘#senderName‘).val() || !$(‘#senderEmail‘).val() || !$(‘#message‘).val() ) { 
  58.  
  59.     // No; display a warning message and return to the form 
  60.     $(‘#incompleteMessage‘).fadeIn().delay(messageDelay).fadeOut(); 
  61.     contactForm.fadeOut().delay(messageDelay).fadeIn(); 
  62.  
  63.   } else { 
  64.  
  65.     // Yes; submit the form to the PHP script via Ajax 
  66.  
  67.     $(‘#sendingMessage‘).fadeIn(); 
  68.     contactForm.fadeOut(); 
  69.  
  70.     $.ajax( { 
  71.       url: contactForm.attr( ‘action‘ ) + "?ajax=true", 
  72.       type: contactForm.attr( ‘method‘ ), 
  73.       data: contactForm.serialize(), 
  74.       success: submitFinished 
  75.     } ); 
  76.   } 
  77.  
  78.   // Prevent the default form submission occurring 
  79.   return false; 
  80. } 
  81.  
  82.  
  83. // Handle the Ajax response 
  84.  
  85. function submitFinished( response ) { 
  86.   response = $.trim( response ); 
  87.   $(‘#sendingMessage‘).fadeOut(); 
  88.  
  89.   if ( response == "success" ) { 
  90.  
  91.     // Form submitted successfully: 
  92.     // 1. Display the success message 
  93.     // 2. Clear the form fields 
  94.     // 3. Fade the content back in 
  95.  
  96.     $(‘#successMessage‘).fadeIn().delay(messageDelay).fadeOut(); 
  97.     $(‘#senderName‘).val( "" ); 
  98.     $(‘#senderEmail‘).val( "" ); 
  99.     $(‘#message‘).val( "" ); 
  100.  
  101.     $(‘#content‘).delay(messageDelay+500).fadeTo( ‘slow‘, 1 ); 
  102.  
  103.   } else { 
  104.  
  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. }  
  111.   
  112. </script>  

 

XML/HTML Code
  1. <div id="content">  
  2.   
  3.   <p style="padding-bottom: 50px; font-weight: bold; text-align: center;"><a href="#contactForm">点击这里测试</a></p>  
  4.   <div id="click_area">  
  5.     </div>  
  6. </div>  
  7.   
  8. <form id="contactForm" action="processForm.php" method="post">  
  9.   
  10.   <h2>发送表单</h2>  
  11.   
  12.   <ul>  
  13.   
  14.     <li>  
  15.       <label for="senderName">Your Name</label>  
  16.       <input type="text" name="senderName" id="senderName" placeholder="Please type your name" required="required" maxlength="40" />  
  17.     </li>  
  18.   
  19.     <li>  
  20.       <label for="senderEmail">Your Email Address</label>  
  21.       <input type="email" name="senderEmail" id="senderEmail" placeholder="Please type your email address" required="required" maxlength="50" />  
  22.     </li>  
  23.   
  24.     <li>  
  25.       <label for="message" style="padding-top: .5em;">Your Message</label>  
  26.       <textarea name="message" id="message" placeholder="Please type your message" required="required" cols="80" rows="10" maxlength="10000"></textarea>  
  27.     </li>  
  28.   
  29.   </ul>  
  30.   
  31.   <div id="formButtons">  
  32.     <input type="submit" id="sendMessage" name="sendMessage" value="Send Email" />  
  33.     <input type="button" id="cancel" name="cancel" value="Cancel" />  
  34.   </div>  
  35.   
  36. </form>  
  37.   
  38. <div id="sendingMessage" class="statusMessage"><p>Sending your message. Please wait...</p></div>  
  39. <div id="successMessage" class="statusMessage"><p>Thanks for sending your message! We‘ll get back to you shortly.</p></div>  
  40. <div id="failureMessage" class="statusMessage"><p>There was a problem sending your message. Please try again.</p></div>  
  41. <div id="incompleteMessage" class="statusMessage"><p>Please complete all the fields in the form before sending.</p></div>  

processForm.php

 

PHP Code
  1. <?php  
  2.   
  3. // Define some constants  
  4. define( "RECIPIENT_NAME", "text" );  
  5. define( "RECIPIENT_EMAIL", "john@example.com" );  
  6. define( "EMAIL_SUBJECT", "freejs.net" );  
  7.   
  8. // Read the form values  
  9. $success = false;  
  10. $senderName = isset( $_POST[‘senderName‘] ) ? preg_replace( "/[^\.\-\‘ a-zA-Z0-9]/", "", $_POST[‘senderName‘] ) : ""; 
  11. $senderEmail = isset( $_POST[‘senderEmail‘] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST[‘senderEmail‘] ) : ""; 
  12. $message = isset( $_POST[‘message‘] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST[‘message‘] ) : ""; 
  13.  
  14. // If all values exist, send the email 
  15. if ( $senderName && $senderEmail && $message ) { 
  16.   $recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">"; 
  17.   $headers = "From: " . $senderName . " <" . $senderEmail . ">"; 
  18.   $success = mail( $recipient, EMAIL_SUBJECT, $message, $headers ); 
  19. } 
  20.  
  21. // Return an appropriate response to the browser 
  22. if ( isset($_GET["ajax"]) ) { 
  23.   echo $success ? "success" : "error"; 
  24. } else { 
  25. ?> 
  26. <html> 
  27.   <head> 
  28.     <title>Thanks!</title> 
  29.   </head> 
  30.   <body> 
  31.   <?php if ( $success ) echo "<p>Thanks for sending your message! We‘ll get back to you shortly.</p>" ?>  
  32.   <?php if ( !$success ) echo "<p>There was a problem sending your message. Please try again.</p>" ?>  
  33.   <p>Click your browser‘s Back button to return to the page.</p>  
  34.   </body>  
  35. </html>  
  36. <?php  
  37. }  
  38. ?>  

 


原文地址:http://www.freejs.net/article_biaodan_127.html

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

上一篇：【Cocos2d-html5游戏引擎学习笔记(12)】Schedule定时器


下一篇：protobuf入门指南