点击弹出层ajax php jquery 发送表单
点击弹出层ajax php jquery 发送表单演示
JavaScript Code
[*]<script type="text/javascript">
[*]
[*]var messageDelay = 2000; // How long to display status messages (in milliseconds)
[*]
[*]// Init the form once the document is ready
[*]$( init );
[*]
[*]
[*]// Initialize the form
[*]
[*]function init() {
[*]
[*] // Hide the form initially.
[*] // Make submitForm() the form's submit handler.
[*] // Position the form so it sits in the centre of the browser window.
[*] $('#contactForm').hide().submit( submitForm ).addClass( 'positioned' );
[*]
[*] // When the "Send us an email" link is clicked:
[*] // 1. Fade the content out
[*] // 2. Display the form
[*] // 3. Move focus to the first field
[*] // 4. Prevent the link being followed
[*]
[*] $('a"#contactForm"]').click( function() {
[*] $('#content').fadeTo( 'slow', .2 );
[*] $('#contactForm').fadeIn( 'slow', function() {
[*] $('#senderName').focus();
[*] } )
[*]
[*] return false;
[*] } );
[*]
[*] // When the "Cancel" button is clicked, close the form
[*] $('#cancel').click( function() {
[*] $('#contactForm').fadeOut();
[*] $('#content').fadeTo( 'slow', 1 );
[*] } );
[*]
[*] // When the "Escape" key is pressed, close the form
[*] $('#contactForm').keydown( function( event ) {
[*] if ( event.which == 27 ) {
[*] $('#contactForm').fadeOut();
[*] $('#content').fadeTo( 'slow', 1 );
[*] }
[*] } );
[*]
[*]}
[*]
[*]
[*]// Submit the form via Ajax
[*]
[*]function submitForm() {
[*] var contactForm = $(this);
[*]
[*] // Are all the fields filled in?
[*]
[*] if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#message').val() ) {
[*]
[*] // No; display a warning message and return to the form
[*] $('#incompleteMessage').fadeIn().delay(messageDelay).fadeOut();
[*] contactForm.fadeOut().delay(messageDelay).fadeIn();
[*]
[*] } else {
[*]
[*] // Yes; submit the form to the PHP script via Ajax
[*]
[*] $('#sendingMessage').fadeIn();
[*] contactForm.fadeOut();
[*]
[*] $.ajax( {
[*] url: contactForm.attr( 'action' ) + "?ajax=true",
[*] type: contactForm.attr( 'method' ),
[*] data: contactForm.serialize(),
[*] success: submitFinished
[*] } );
[*] }
[*]
[*] // Prevent the default form submission occurring
[*] return false;
[*]}
[*]
[*]
[*]// Handle the Ajax response
[*]
[*]function submitFinished( response ) {
[*] response = $.trim( response );
[*] $('#sendingMessage').fadeOut();
[*]
[*] if ( response == "success" ) {
[*]
[*] // Form submitted successfully:
[*] // 1. Display the success message
[*] // 2. Clear the form fields
[*] // 3. Fade the content back in
[*]
[*] $('#successMessage').fadeIn().delay(messageDelay).fadeOut();
[*] $('#senderName').val( "" );
[*] $('#senderEmail').val( "" );
[*] $('#message').val( "" );
[*]
[*] $('#content').delay(messageDelay+500).fadeTo( 'slow', 1 );
[*]
[*] } else {
[*]
[*] // Form submission failed: Display the failure message,
[*] // then redisplay the form
[*] $('#failureMessage').fadeIn().delay(messageDelay).fadeOut();
[*] $('#contactForm').delay(messageDelay+500).fadeIn();
[*] }
[*]}
[*]
[*]</script>
XML/HTML Code
[*]<div id="content">
[*]
[*] <p style="padding-bottom: 50px; font-weight: bold; text-align: center;"><a href="#contactForm">点击这里测试</a></p>
[*] <div id="click_area">
[*] </div>
[*]</div>
[*]
[*]<form id="contactForm" action="processForm.php" method="post">
[*]
[*] <h2>发送表单</h2>
[*]
[*] <ul>
[*]
[*] <li>
[*] <label for="senderName">Your Name</label>
[*] <input type="text" name="senderName" id="senderName" placeholder="Please type your name" required="required" maxlength="40" />
[*] </li>
[*]
[*] <li>
[*] <label for="senderEmail">Your Email Address</label>
[*] <input type="email" name="senderEmail" id="senderEmail" placeholder="Please type your email address" required="required" maxlength="50" />
[*] </li>
[*]
[*] <li>
[*] <label for="message" style="padding-top: .5em;">Your Message</label>
[*] <textarea name="message" id="message" placeholder="Please type your message" required="required" cols="80" rows="10" maxlength="10000"></textarea>
[*] </li>
[*]
[*] </ul>
[*]
[*] <div id="formButtons">
[*] <input type="submit" id="sendMessage" name="sendMessage" value="Send Email" />
[*] <input type="button" id="cancel" name="cancel" value="Cancel" />
[*] </div>
[*]
[*]</form>
[*]
[*]<div id="sendingMessage" class="statusMessage"><p>Sending your message. Please wait...</p></div>
[*]<div id="successMessage" class="statusMessage"><p>Thanks for sending your message! We'll get back to you shortly.</p></div>
[*]<div id="failureMessage" class="statusMessage"><p>There was a problem sending your message. Please try again.</p></div>
[*]<div id="incompleteMessage" class="statusMessage"><p>Please complete all the fields in the form before sending.</p></div>
processForm.php
PHP Code
[*]<?php
[*]
[*]// Define some constants
[*]define( "RECIPIENT_NAME", "text" );
[*]define( "RECIPIENT_EMAIL", "john@example.com" );
[*]define( "EMAIL_SUBJECT", "freejs.net" );
[*]
[*]// Read the form values
[*]$success = false;
[*]$senderName = isset( $_POST['senderName'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['senderName'] ) : "";
[*]$senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";
[*]$message = isset( $_POST['message'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['message'] ) : "";
[*]
[*]// If all values exist, send the email
[*]if ( $senderName && $senderEmail && $message ) {
[*] $recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
[*] $headers = "From: " . $senderName . " <" . $senderEmail . ">";
[*] $success = mail( $recipient, EMAIL_SUBJECT, $message, $headers );
[*]}
[*]
[*]// Return an appropriate response to the browser
[*]if ( isset($_GET["ajax"]) ) {
[*] echo $success ? "success" : "error";
[*]} else {
[*]?>
[*]<html>
[*] <head>
[*] <title>Thanks!</title>
[*] </head>
[*] <body>
[*] <?php if ( $success ) echo "<p>Thanks for sending your message! We'll get back to you shortly.</p>" ?>
[*] <?php if ( !$success ) echo "<p>There was a problem sending your message. Please try again.</p>" ?>
[*] <p>Click your browser's Back button to return to the page.</p>
[*] </body>
[*]</html>
[*]<?php
[*]}
[*]?>
原文地址:http://www.freejs.net/article_biaodan_127.html
页:
[1]