php - JavaScriptがブラウザで許可されていない場合に送信後にリダイレクトする方法

Question

JavaScriptが無効になっていると、フォームに問題が発生します。

フォームはページindex.phpから送信されます
受信者が受け取ったフォーム
include.emailSender.phpでハングします

元のページに戻るために何が欠けていますか？Webページからプロセスフォームへのコード：

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

include.emailSender.phpファイル：

<?php


$contactformRecipient = 'a@b.org';


$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 . "\r\n";
    $headers .= "Reply-To: ". $contactEmail . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";

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

?>

include.contactForm.phpファイル：

<?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ファイル：

 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;

});
});

score 2 · Accepted Answer

ここで、すべてのコードを読んだわけではありませんが、フォームなどを AJAX:ing する際のヒントをいくつか紹介します。

最初にフォームの JavaScript + AJAX バージョンを構築する代わりに、純粋なバージョンから始めます。世界中のあらゆる種類のデバイスのブラウザーで動作するもの。

それが終わったら、そのフォームをハイジャックします。jQuery と jQuery Form プラグイン ( http://www.malsup.com/jquery/form/ ) を使用すると、これまでになく簡単になります。フォームのセットアップが既に完了しているとします。

<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>

some-action.phpそして、フォーム送信を適切に (AJAX なしで) 処理することを確認したら、次のようにします。

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

some-action.phpAJAX呼び出しであるかどうかに応じて異なることをしたい場合（たとえば、非AJAX呼び出しで前のページにリダイレクトしたい場合があります）、単にチェックすることができます$_SERVER['HTTP_X_REQUESTED_WITH']、私は通常そうします（定数を保持する場所） :

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

そして後でsome-action.php：

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

いわゆるプログレッシブエンハンスメント (最も純粋なバージョンが最初) がグレースフルデグラデーション (最もファンシーなバージョンが最初) よりも優れている点は、モバイルファーストデザインの利点と同じです。どちらも、Brad Frost のブログのような他の場所でよりよく説明されています: http://bradfrostweb.com/blog/web/mobile-first-responsive-web-design/

php - JavaScriptがブラウザで許可されていない場合に送信後にリダイレクトする方法

1 に答える 1

Related

Reference