當JavaScript是由瀏覽器

Question

不允許我有我的方式出現問題時，禁用JavaScript後如何重定向提交：

• 形式是從頁的index.php提交的收件人收到
• 形式
• 掛在include.emailSender.php

我錯過了什麼回到起源頁？從網頁代碼來處理形式：

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

}); 
}); 

Answer 1

現在我沒有讀你所有的鱈魚e，相反，雖然我會給你一些關於AJAX：表格或其他東西的提示。

代替首先構建表單的JavaScript + AJAX版本，開始與純版本。全球各地的瀏覽器都可以在各種設備上運行。

一旦你完成你hijax表格。有了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.php中做不同的事情取決於它是否是AJAX調用（例如，您可能希望重定向回到非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/