我試圖提交表單數據到php腳本與jQuery .post()方法,比接收PHP腳本數據回來,並顯示它的形式頁面,但它does not work.Also我使用jQuery驗證的客戶端驗證插件作爲well.Here是我的代碼: HTML:PHP,jQuery,與Ajax的HTML表單不工作
<div class="contact-form">
<button class="contact-close">X</button>
<form method="post" action="formular.php" id="quote-form">
<div id="returned"></div>
<div class="houndred">
<input type="text" name="name" placeholder="Name*" class="input-half" id="name" min-width="2" autofocus required>
<input type="email" name="email" placeholder="Email*" class="input-half" id="email" required>
<input type="text" name="subject" placeholder="Subject" class="input-half" id="subject" required>
<input type="url" name="url" placeholder="Website" class="input-half" id="website">
</div>
<div class="houndred">
<textarea name="message" class="textarea" id="message" placeholder="message*" required></textarea>
<br><p></p>
</div>
<div class="eightytwo">
<button id="quote-button">Send</button>
</div>
<div id="summary"></div>
</form>
</div><!-- .padding-fix -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="js/validation.js"></script>
<script src="js/ajaxform.js"></script>
JS張貼內容:
$(document).ready(function(){
$('form').on('submit', function(event) {
event.preventDefault();
$.post('formular.php', $(this).serialize(), function(data)) {
var dataForm = data;
$("#returned").append(dataForm);
}
});
)};
和PHP:
if(!empty($_POST)) {
$errors = array();
$name = $_POST['name'];
$email = $_POST['email'];
$subject = $_POST['subject'];
$url = $_POST['url'];
$message = $_POST['message'];
if(empty($name) || empty($email) || empty($subject) || empty($url) || empty($message)) {
$errors[] = 'All fields are required!';
} else {
if(filter_var($email, FILTER_VALIDATE_EMAIL) === false) {
$errors[] = 'Please enter a valid email address';
}
if(ctype_alpha($name === false)) {
$errors[] = 'Name can only contain letters';
}
if (ctype_alpha($subject === false)) {
$errors[] = 'Subject can only contain letters';
}
if(filter_var($url, FILTER_VALIDATE_URL, FILTER_FLAG_PATH_REQUIRED) === false) {
$errors[] = 'Please enter a valid url address with http in front';
}
if(empty($message)) {
$errors[] = 'Please enter a message';
}
}
if(!empty($errors)) {
echo '<ul style=\"list-style: circle; color: #f74d4e\">';
foreach($errors as $error) {
echo '<li style=\"color: #f74d4e;\"' . $error . '</li>';
}
echo '</ul>';
}
$send_message = 'From:' . $url . '<br>' . strip_tags(addslashes($message));
if(empty($errors)) {
mail('[email protected]', $subject, $send_message , $email);
echo '<h4 style=\"color: #f74d4e;\">Thank you for contacting me!</h4>';
exit();
}
}
我希望這對我來說是有道理的,但我在過去的幾個小時裏一直在努力,仍然試圖弄清楚什麼地方出了問題,我也試着用$ .ajax()和沒有response.One事情,形式是geting加載使用jquery .load()方法彈出框,這就是爲什麼我很重要的是要做到這一點與ajax
請在瀏覽器中看看控制檯日誌(使開發者工具,如果您還沒有!)。看看是否顯示任何錯誤。可能會爲您解釋爲什麼它無法正常工作的問題。也請務必直接檢查您的PHP腳本,以確保您沒有收到任何服務器500錯誤。 – IncredibleHat
只要tryed控制檯,並得到: VM491:5未捕獲的SyntaxError:意外的令牌) 在P(jquery的-3.2.1.min.js:2) 在Function.globalEval(jquery的-3.2.1.min.js:2 )在文本腳本(jquery-3.2.1.min.js:4) 在Qb(jquery-3.2.1.min.js:4) 在A(jquery-3.2.1.min.js:4) XMLHttpRequest上的 。 (jquery-3.2.1.min.js:4) at Object.send(jquery-3.2.1.min.js:4) at Function.ajax(jquery-3.2.1.min.js:4) (jquery-3.2.1.min.js:3) 將嘗試使用不同版本的jQuery。 – stelarossa
它不是你的jQuery版本。通過darthaditya ...語法錯誤查看下面的答案。 – IncredibleHat