2016-03-26 152 views
-4

我有一個聯繫方式:這個腳本爲什麼不加載?

<form id="contactus" name="contactus" action="html_form_send1.php" method="post"> 
    <label for="name">Name:</label><br /> 
    <input type="text" id="name" name="name" maxlength="50" size="59" autofocus required/><br /><br /> 

    <label for="email">E-Mail Address:</label><br /> 
    <input type="email" id="email" name="email" maxlength="50" size="59" required/><br /><br /> 

    <label for="question">Question:</label><br /> 
    <textarea id="question" name="question" maxlength="1000" cols="50" rows="6" required></textarea><br /><br /> 

    <input class="c1_scButton" type="submit" id="submit" name="submit" value="Send" /> 
</form> 

我希望用這個AJAX代碼來調用我的郵箱PHP腳本:

var msg = ""; 
name = $("#name").val(); 
email = $("#email").val(); 
question = $("#question").val(); 

//validation phase 

function isValidEmailAddress(emailAddress) { 
    var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([az]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i); 
    return pattern.test(emailAddress); 
}; 

function validate(e) { 
    if (name == "") { 
    msg = " valid name"; 
    } 

    if (!isValidEmailAddress(email)) { 
    msg = msg + " valid email address"; 
    } 

    if (question == "") { 
    msg = msg + " valid question or comment"; 
    } 
} 

// on submit, Validate then post to PHP mailer script 
$(function() { 
    $("#contactus").on('submit', function(e) { 
    e.preventDefault(); 
    validate(e); 
    if msg != "" { 
     e.preventDefault(); 
     $("#alert").html "Please enter a" + msg; 
    } else { 
     $.post('/html_form_send1.php', $(this).serialize(), function(data) { 
     $('#alert').css(color: "black") 
     $('#alert').html("<h2>Thank you for contacting us!</h2>") 
      .append("<p>We will be in touch soon.</p>"); 
     }).error(function() { 
     $('#alert').css(color: "red") 
     $('#alert').html("<h2>Something went wrong. Your Question was not submitted. /n</h2>").append("<p>Please try again later or email us at <a href=href=" 
      mailto: [email protected] allegroaffiliates.com ? Subject = Contact Us Form " target=" 
      _top ">[email protected]</a> </p>"); 
     }); 
    }; 
    }); 
}); 

腳本被稱爲在HTML頁面的陸續底部腳本,但它不加載。我懷疑這是由於代碼錯誤,但我找不到錯誤。任何人都可以給我一個想法,爲什麼它不會加載?

附註:我知道HTML5會驗證腳本,但我已經驗證了HTML5不可用的時間。

謝謝你的幫助。

+2

您是否檢查了控制檯的錯誤? –

+0

有一些語法錯誤,例如'如果msg!=「」{'或'$(「#alert」)。html「請輸入」+ msg;'。控制檯會告訴你到底發生了什麼問題。 – Marvin

+0

這裏突出顯示的語法應該告訴你代碼有一些錯誤。使用下降編輯器或IDE,你不會有這些問題。 – Pevara

回答

0

幾個故障診斷建議:

(1)當指定AJAX處理器文件中,用戶可以在本$.post('html_form_send1.php'或該$.post('./html_form_send1.php'但不是本$.post('/html_form_send1.php'

(2)代替使用快捷代碼$.post()的,使用該方法的完整形式,直到你很擅長:

var varvalue = $('#first_name').val(); 
var nutherval = $('#last_name').val(); 
$.ajax({ 
    type: 'post', 
    url: 'your_secondary_file.php', 
    data: 'varname=' +varvalue+ '&lname=' +nutherval, 
    success: function(d){ 
     if (d.length) alert(d); 
    } 
}); 

(3)禁用驗證程序,直到其餘的工作,那麼,當你知道在工作一切正常工作

(4)更改您的ajax處理器文件html_form_send1.php只是回顯一個響應,以確保您的AJAX工作。然後,一旦獲得響應,將其更改爲回顯您發送的變量。然後將其構建到最終期望的產品中。但在最初,一些死的簡單,就像這樣:

your_secondary_file.php:

<?php 
    $first_name = $_POST['varname']; 
    $last_name = $_POST['lname']; 
    echo 'Received: ' .$first_name .' '. $last_name; 
    die(); 

(5)而不是使用.serialize()的,最初只是搶一個或兩個字段中手動值,並得到該工作第一。請注意,.serialize()會生成JSON數據,而更簡單的方法是直接發佈值,如此答案中的示例代碼。先讓它工作,然後優化。

(6)注意,在AJAX代碼塊中的dataType:參數是代碼來從PHP側,而不是代碼去 PHP端。還要注意,默認值是html,所以如果你沒有發回一個JSON對象,那麼就把這個參數留下。 (7)在我上面的AJAX和PHP代碼示例中,請注意javascript變量名稱之間的相關性,它在AJAX代碼塊中的引用方式以及它在PHP端的接收方式。我非常謹慎地選擇了我所選擇的名稱,以便您一直遵循var name => var value配對。

例如,ID爲first_name的輸入字段存儲在名爲varvalue(啞名稱但有意)的變量中。這些數據是在AJAX代碼塊爲一個名爲varname可變傳輸,並獲得在PHP端爲$_POST['varname'],最後儲存在PHP作爲$first_name


評論some simple AJAX examples - 將它們複製到您的系統和玩耍他們有點。

+0

我會試試這個,謝謝。 –

+0

@DavidBrabson爲我的答案增加了一些信息。請查閱。 – gibberish

相關問題