如何在浏览器禁止JavaScript时提交后重定向

Question

I have a problem in my form when JavaScript is disabled:

• form is submitted from page index.php
• form received by recipient
• hangs at include.emailSender.php

What am I missing to return to originating page? Code from web page to process form:

<?php include_once('includes/include.contactForm.php'); ?>

include.emailSender.php file:

<?php


$contactformRecipient = '[e-mail]';


$contactformTitle = 'Contact from ...';


if($_POST) {
    $contactName = addslashes( $_POST['contactName'] );
    $contactEmail = addslashes( $_POST['contactEmail'] );
    $contactPhone = addslashes( $_POST['contactPhone'] );
    $contactMessage = addslashes( $_POST['contactMessage'] );


    $message = '';
    $message .= 'Name:  ' . $contactName . '<br />';
    $message .= 'Email:  ' . $contactEmail . '<br />';
    $message .= 'Phone:  ' . $contactPhone . '<br />';
    $message .= 'Message:  ' . $contactMessage . '<br />';



    // Email Headers
    $headers = "From: " . $contactEmail . "
";
    $headers .= "Reply-To: ". $contactEmail . "
";
    $headers .= "MIME-Version: 1.0
";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1
";

    // send mail
    // mail( to, subject, message, headers, parameters)
    mail( $contactformRecipient, $contactformTitle, $message, $headers );
}

?>

include.contactForm.php File:

<?php 
$randomNumber1 = rand(1, 12);
$randomNumber2 = rand(1, 12);

$contactCaptchaAnswer = $randomNumber1 + $randomNumber2;
?>
            <div id="contact-warning">
            </div><!-- // #contact-warning -->

            <div id="contact-success">
                Email successfuly sent, thank you.<br />    
            </div><!-- // #contact-warning -->

            <form name="contactForm" id="contactForm" method="post" action="includes/include.emailSender.php">
                <fieldset>

                    <label for="contactName">Your Full Name <span class="required">*</span></label>
                    <input name="contactName" type="text" id="contactName" size="60" value="" />

                    <br />
                    <label for="contactEmail">Email Address <span class="required">*</span></label>
                    <input name="contactEmail" type="text" id="contactEmail" size="60" value="" />

                    <br />
                    <label for="contactPhone">Phone <span class="required">*</span></label>
                    <input name="contactPhone" type="text" id="contactPhone" size="60" value="" />
                    <br />
                    <label for="contactMessage">Message <span class="required">*</span></label>
                    <textarea name="contactMessage" id="contactMessage" rows="6" cols="7"></textarea>

                    <br />
                    <label for="contactCaptcha"><strong><?php echo $randomNumber1; ?></strong> + <strong><?php echo $randomNumber2; ?></strong> = <span class="required">*</span></label>
                    <input name="contactCaptcha" type="text" id="contactCaptcha" size="30" value="" />

                    <input name="contactCaptchaAnswer" type="hidden" id="contactCaptchaAnswer" value="<?php echo $contactCaptchaAnswer; ?>" />

                    <br />
                    <label class="placeholder">&nbsp;</label>
                    <button class="submit">Submit</button>
                </fieldset>
            </form>

jQuery File:

 var isEmail_re       = /^\s*[\w\-\+_]+(\.[\w\-\+_]+)*\@[\w\-\+_]+\.[\w\-\+_]+(\.[\w\-\+_]+)*\s*$/;

function isEmail (s) {
return String(s).search (isEmail_re) != -1;
}

$(document).ready(function(){

// Smooth scrolling to internal anchors
$('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') 
        || location.hostname == this.hostname) {

        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
           if (target.length) {
             $('html,body').animate({
                 scrollTop: target.offset().top
            }, 600);
            return false;
        }
    }
});

// ScrollSpy automatically updates nav targets based on scroll position
// http://twitter.github.com/bootstrap/javascript.html#scrollspy
$('#nav').scrollspy();


selectnav('nav');

// Handle Contact Form Submission
$('form#contactForm button.submit').click(function() {
    var contactName = $('form#contactForm input#contactName').val();
    var contactEmail = $('form#contactForm input#contactEmail').val();
    var contactPhone = $('form#contactForm input#contactPhone').val();
    var contactMessage = $('form#contactForm #contactMessage').val();
    var contactCaptcha = $('form#contactForm input#contactCaptcha').val();
    var contactCaptchaAnswer = $('form#contactForm input#contactCaptchaAnswer').val();

    var dataString = 'contactName=' + contactName + '&contactEmail=' + contactEmail +      '&contactPhone=' + contactPhone + '&contactMessage=' + contactMessage;       
    var contactError = '';

    // Check name
    if( contactName == '' ) {
        contactError += 'Please enter your name<br />';
    }

    // Check e-mail
    if ( contactEmail == '') {
        contactError += 'Please enter your e-mail<br />';
    } else if ( isEmail(contactEmail) !== true ) {
        contactError += 'Please enter a valid e-mail address<br />';
    }
    if( contactPhone == '' ) {
        contactError += 'Please enter your phone number<br />';
    }

    if( contactMessage == '' ) {
        contactError += 'Please enter your message<br />';
    }

    if ( contactCaptcha !== contactCaptchaAnswer ) {
        contactError += 'Please enter the correct validation value <br />';
    }

    if ( contactError == '' ) {
        $.ajax({
            type: "POST",
            url: "includes/include.emailSender.php",
            data: dataString,
            success: function() {
                $('#contact-success').fadeIn();
                $('form#contactForm').fadeOut();
                $('#contact-warning').hide();
            }
        });
    } else {
        $('#contact-warning').html(contactError);
        $('#contact-warning').fadeIn();
    }

    return false;

});
});

Answer 1

Now I didn't read all your code, instead I though I'd give you some tips for when AJAX:ing forms or other things.

Instead of first building the JavaScript + AJAX version of the form, start with the pure version. The one that will work in browsers all over the planet on all types of devices.

Once that's finished you hijax that form. With jQuery and the jQuery Form plugin (http://www.malsup.com/jquery/form/) it couldn't be easier. Say you've already got your form set up:

<form method="post" action="some-action.php" id="my-form">
    <p><label>Some field<br><input type="text" name="foo"></label></p>
    <p><input type="hidden" name="bar" value="1"><input type="submit" value="Go"></p>
</form>

And you've made sure that some-action.php handles the form submission properly (without AJAX) then simply:

$('#my-form').ajaxForm(function (data) {
    alert(data); // data returned by some-action.php
});

Now if you want to do different things in some-action.php depending on whether it's an AJAX call or not (you may want to redirect back to the previous page on non AJAX calls for example) you can simply check $_SERVER['HTTP_X_REQUESTED_WITH'], I usually do (where you keep constants):

define('XHR', (
    isset($_SERVER['HTTP_X_REQUESTED_WITH']) and 
    strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'
));

And then later in some-action.php:

if (XHR) {
    die(json_encode(array('success' => true)));
}
else {
    header('Location: ' . $_SERVER['http_referer']);
}

The benefits of so called progressive enhancement (purest version first) over graceful degradation (fanciest version first) is the same as those of mobile first design. They're both better explained elsewhere like Brad Frost's blog: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/