メールを送信するフォームを作成していますが、新しいページをロードせず、同じページの HTML と CSS の値を変更するだけです。
私はそれを実装しようとしましたが、完成に近づいていますが、正しく動作しません。送信をクリックすると、フォームが検証されず、PHP ページが読み込まれ、"Thank you..." と表示され、メールが届きます。これを理解してデバッグするのを手伝っていただければ、本当に感謝しています。ありがとう!
jQueryが正しくリンクされていることが確認できました。私はこの順序でセットアップしています:
<html>
<head>
<script> (link for jquery)
<style>
<script>
validateForm() JavaScript
jQuery
<body> (no loading functions via onload)
HTML フォーム:
<form id='form' method='post' action='sendemail.php'>
Name: <br />
<input type="text" id="name" name="name" />
<br /><br />
Email: <br />
<input type="email" id="email" name="email" />
<br /><br />
Subject: <br />
<input type="text" id="subject" name="subject" />
<br /><br />
Comments: <br />
<textarea id="comments" name="comments" rows="10" cols="60"></textarea>
<br /><br />
<input type="image" src="..." name="myFormSubmitted" value="Submit" />
</form>
<div id="formResponse"></div>
PHP - sendmail.php:
<?php
if(isset($_POST['myFormSubmitted'])) {
$message = '';
// Construct the message
$message .= <<<TEXT
Name: {$_POST['name']}
Email: {$_POST['email']}
Subject: {$_POST['subject']}
Comments: {$_POST['comments']}
{$checkString}
TEXT;
$to = 'sendMeHere@example.com';
$subject = $_POST['subject'];
$from = $_POST['name'];
$fromEmail = $_POST['email'];
$header = 'From: ' . $from . '<' . $fromEmail . '>';
// Send the email
mail($to, $subject, $message, $header);
echo 'Thank you for your Email. We will get in touch with you very soon.';
}
?>
jQuery:
//On form submit, call validateForm, then post to PHP if validated
$("#form").submit(function(e) {
if (validateForm()) {
$.post(
'sendemail.php',
{
name: $('#name').val(),
email: $('#email').val(),
comments: $('#comments').val(),
myFormSubmitted: 'yes'
},
function(data) {
$("#formResponse").html(data).fadeIn('100'); //Place echo in div
//Modify HTML & CSS here
$('#name, #email, #comments').val(''); //Clear the inputs - I don't understand this line
},
'text'
);
}
//Prevent event from bubbling
e.preventDefault();
e.stopPropagation();
return false;
});
JavaScript 検証関数:
$(document).ready(function() {
function validateForm() {
var validName = false;
var validEmail = false;
var validSubject = false;
var validComments = false;
//Perform validation here...
if (validName && validEmail && validSubject && validComments) {
return true;
} else {
return false;
}
});