我目前正在使用 jQuery(隐藏和显示表单选项)和 PHP 处理表单并将值发送到电子邮件的表单。jQuery 工作正常,PHP 正在成功发送电子邮件。但是,我只希望选择包含在电子邮件中的选项。
PHP代码:
<?php
if(isset($_POST['email'])) {
$email_to = "sales@email.net";
$email_subject = "Enquiry";
$thankyou_url = "http://www.url.com";
function died($error) {
echo "We are very sorry, but there were error(s) found with the form you submitted. ";
echo "These errors appear below.<br /><br />";
echo $error."<br /><br />";
echo "Please go back and fix these errors.<br /><br />";
die();
}
// validation expected data exists
if(!isset($_POST['name']) ||
!isset($_POST['address']) ||
!isset($_POST['address2']) ||
!isset($_POST['address3']) ||
!isset($_POST['postcode']) ||
!isset($_POST['tel']) ||
!isset($_POST['email']) ||
!isset($_POST['design']) ||
!isset($_POST['woodtype']) ||
!isset($_POST['font']) ||
!isset($_POST['woodtype2']) ||
!isset($_POST['font2']) ||
!isset($_POST['woodtype3']) ||
!isset($_POST['font3']) ||
!isset($_POST['woodtype4']) ||
!isset($_POST['font4']) ||
!isset($_POST['woodtype5']) ||
!isset($_POST['font5']) ||
!isset($_POST['woodtype6']) ||
!isset($_POST['font6']) ||
!isset($_POST['line1']) ||
!isset($_POST['line2']) ||
!isset($_POST['message'])) {
died('We are sorry, but there appears to be a problem with the form you submitted.');
}
$name = $_POST['name']; // required
$address = $_POST['address']; // not required
$address2 = $_POST['address2']; // not required
$address3 = $_POST['address3']; // not required
$postcode = $_POST['postcode']; // not required
$tel = $_POST['tel']; // not required
$email_from = $_POST['email']; // required
$design = $_POST['design']; // not required
$woodtype = $_POST['woodtype']; // not required
$font = $_POST['font']; // not required
$woodtype2 = $_POST['woodtype2']; // not required
$font2 = $_POST['font2']; // not required
$woodtype3 = $_POST['woodtype3']; // not required
$font3 = $_POST['font3']; // not required
$woodtype4 = $_POST['woodtype4']; // not required
$font4 = $_POST['font4']; // not required
$woodtype5 = $_POST['woodtype5']; // not required
$font5 = $_POST['font5']; // not required
$woodtype6 = $_POST['woodtype6']; // not required
$font6 = $_POST['font6']; // not required
$line1 = $_POST['line1']; // required
$line2 = $_POST['line2']; // not required
$message = $_POST['message']; // not required
$error_message = "";
$email_message = "New Order\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
$email_message .= "Name: ".clean_string($name)."\n";
$email_message .= "Address: ".clean_string($address)."\n";
$email_message .= "Address2: ".clean_string($address2)."\n";
$email_message .= "Address3: ".clean_string($address3)."\n";
$email_message .= "Postcode: ".clean_string($postcode)."\n";
$email_message .= "Tel: ".clean_string($tel)."\n";
$email_message .= "Email: ".clean_string($email_from)."\n";
$email_message .= "Design: ".clean_string($design)."\n";
$email_message .= "Woodtype: ".clean_string($woodtype)."\n";
$email_message .= "Font: ".clean_string($font)."\n";
$email_message .= "Woodtype: ".clean_string($woodtype2)."\n";
$email_message .= "Font: ".clean_string($font2)."\n";
$email_message .= "Woodtype: ".clean_string($woodtype3)."\n";
$email_message .= "Font: ".clean_string($font3)."\n";
$email_message .= "Woodtype: ".clean_string($woodtype4)."\n";
$email_message .= "Font: ".clean_string($font4)."\n";
$email_message .= "Woodtype: ".clean_string($woodtype5)."\n";
$email_message .= "Font: ".clean_string($font5)."\n";
$email_message .= "Woodtype: ".clean_string($woodtype6)."\n";
$email_message .= "Font: ".clean_string($font6)."\n";
$email_message .= "Line1: ".clean_string($line1)."\n";
$email_message .= "Line2: ".clean_string($line2)."\n";
$email_message .= "Message: ".clean_string($message)."\n";
$headers = 'From: '.$email_from."\r\n".
'Reply-To: '.$email_from."\r\n" .
'X-Mailer: PHP/' . phpversion();
@mail($email_to, $email_subject, $email_message, $headers);
header("Location: http://www.url.com");
} else {
echo "There has been an error sending your comments. Please try later.";
}
?>
jQuery:
<script type="text/javascript">
$(document).ready(function(){
$("#select1").change(function(){
if ($(this).val() == "Design A" ) {
$("#hide1").slideDown("fast"); //Slide Down Effect
} else {
$("#hide1").slideUp("fast"); //Slide Up Effect
}
});
$("#select1").change(function(){
if ($(this).val() == "Design B" ) {
$("#hide2").slideDown("fast"); //Slide Down Effect
} else {
$("#hide2").slideUp("fast"); //Slide Up Effect
}
});
$("#select1").change(function(){
if ($(this).val() == "Design C" ) {
$("#hide3").slideDown("fast"); //Slide Down Effect
} else {
$("#hide3").slideUp("fast"); //Slide Up Effect
}
});
$("#select1").change(function(){
if ($(this).val() == "Design D" ) {
$("#hide4").slideDown("fast"); //Slide Down Effect
} else {
$("#hide4").slideUp("fast"); //Slide Up Effect
}
});
$("#select1").change(function(){
if ($(this).val() == "Design E" ) {
$("#hide5").slideDown("fast"); //Slide Down Effect
} else {
$("#hide5").slideUp("fast"); //Slide Up Effect
}
});
$("#select1").change(function(){
if ($(this).val() == "Design F" ) {
$("#hide6").slideDown("fast"); //Slide Down Effect
} else {
$("#hide6").slideUp("fast"); //Slide Up Effect
}
});
});
</script>
最后的 HTML 是:
<form class="contact_form" action="sendform.php" method="post" name="contact_form" onSubmit="alert('Thank you for your order, we will be in touch shortly. You will now be redirected to the homepage.');">
<fieldset style="padding:10px; margin:0 auto; width:939px; padding:10px; background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#FFF)); border-radius:10px;">
<legend style="background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD)); border-radius:5px; padding:5px; border:#6C6C6C 2px solid;">Customer Details</legend>
<br />
<br />
<ul>
<li> <span class="required_notification">* Denotes Required Field</span> </li>
<li>
<label for="name">Name:</label>
<input type="text" name="name" placeholder="John Doe" required />
</li>
<li>
<label for="address">Address: <br />
(Required for delivery)</label>
<input type="text" name="address" placeholder="The Willows" />
</li>
<li>
<label for="address2"></label>
<input type="text" name="address2" placeholder="Romsey Road" />
</li>
<li>
<label for="address3"></label>
<input type="text" name="address3" placeholder="East Wellow" />
</li>
<li>
<label for="postcode">Postcode:</label>
<input type="text" name="postcode" placeholder="SO51 6BG" />
</li>
<li>
<label for="tel">Telephone:</label>
<input type="tel" name="tel" required="required" placeholder="02380 123456" />
</li>
<li>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="john_doe@example.com"/>
<span class="form_hint">Proper format "name@something.com"</span> </li>
</ul><br /><br />
</fieldset>
<br />
<br />
<fieldset style="padding:5px; width:939px;
padding:10px; background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EEE)); border-radius:10px;">
<legend style="background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD)); border-radius:5px; padding:5px; border:#6C6C6C 2px solid;">Sign Details</legend>
<ul>
<li style="border:none;">
<div class="input select">
<label for="select1">Choose a Design</label>
<select name="design" id="select1">
<option value="default">Select Design</option>
<option value="Design A">Design A</option>
<option value="Design B">Design B</option>
<option value="Design C">Design C</option>
<option value="Design D">Design D</option>
<option value="Design E">Design E</option>
<option value="Design F">Design F</option>
</select>
</div>
</li>
<li style="border:none; padding:0;">
<div class="hide" id="hide1">
<div class="input select">
<label for="select1">Wood Type:</label>
<select name="woodtype" id="select1">
<option value="">Select Wood</option>
<option value="Oak">Oak</option>
<option value="Mahogany">Mahogany</option>
</select>
</div>
<div class="input select">
<label for="select1">Font:</label>
<select name="font" id="select1">
<option value="">Choose A Font</option>
<option value="Century (Default)">Century (Default)</option>
<option value="Roman">Roman</option>
<option value="Helvetica">Helvetica</option>
<option value="Old English">Old English</option>
</select>
</div>
</div>
</li>
<li style="border:none; padding:0;">
<div class="hide" id="hide2">
<div class="input select">
<label for="select2">Wood Type:</label>
<select name="woodtype2" id="select2">
<option value="">Select Wood</option>
<option value="Oak">Oak</option>
<option value="Mahogany">Mahogany</option>
</select>
</div>
<div class="input select">
<label for="select2">Font:</label>
<select name="font2" id="select2">
<option value="">Choose A Font</option>
<option value="Roman (Default)">Roman (Default)</option>
<option value="Century">Century</option>
<option value="Helvetica">Helvetica</option>
<option value="Old English">Old English</option>
</select>
</div>
</div>
</li>
<li style="border:none; padding:0;">
<div class="hide" id="hide3">
<div class="input select">
<label for="select3">Wood Type:</label>
<select name="woodtype3" id="select3">
<option value="default">Select Wood</option>
<option value="Birch Only">Birch Only</option>
</select>
</div>
<div class="input select">
<label for="select3">Font:</label>
<select name="font3" id="select3">
<option value="default">Choose A Font</option>
<option value="Old English (Default)">Old English (Default)</option>
<option value="Century">Century</option>
<option value="Roman">Roman</option>
<option value="Helvetica">Helvetica</option>
</select>
</div>
</div>
</li>
<li style="border:none; padding:0;">
<div class="hide" id="hide4">
<div class="input select">
<label for="select4">Wood Type:</label>
<select name="woodtype4" id="select4">
<option value="default">Wood</option>
<option value="Oak">Oak</option>
<option value="Mahogany">Mahogany</option>
</select>
</div>
<div class="input select">
<label for="select4">Font:</label>
<select name="font4" id="select4">
<option value="default">Choose A Font</option>
<option value="Helvetica (Default)">Helvetica (Default)</option>
<option value="Century">Century</option>
<option value="Roman">Roman</option>
<option value="Old English">Old English</option>
</select>
</div>
</div>
</li>
<li style="border:none; padding:0;">
<div class="hide" id="hide5">
<div class="input select">
<label for="select5">Wood Type:</label>
<select name="woodtype5" id="select5">
<option value="default">Select Wood</option>
<option value="Birch Only">Birch Only</option>
</select>
</div>
<div class="input select">
<label for="select5">Font:</label>
<select name="font5" id="select5">
<option value="default">Choose A Font</option>
<option value="Times New Roman Numerals">Times New Roman Numerals</option>
</select>
</div>
</div>
</li>
<li style="border:none; padding:0;">
<div class="hide" id="hide6">
<div class="input select">
<label for="select6">Wood Type:</label>
<select name="woodtype6" id="select6">
<option value="default">Wood</option>
<option value="Oak">Oak</option>
<option value="Mahogany">Mahogany</option>
</select>
</div>
<div class="input select">
<label for="select6">Select Font:</label>
<select name="font6" id="select6">
<option value="default">Choose A Font</option>
<option value="Times New Roman Numerals">Times New Roman Numerals</option>
</select>
</div>
</div>
</li>
<li>
<label for="line1">Line 1:</label>
<textarea name="line1" cols="40" rows="1" placeholder="The Willows" required ></textarea>
</li>
<li>
<label for="line2">Line 2:</label>
<textarea name="line2" cols="40" rows="1" ></textarea>
</li>
<li>
<label for="message">Specific Requirements:</label>
<textarea name="message" cols="40" rows="6" placeholder="All uppercase."></textarea>
</li>
<li>
<button class="submit" type="submit" style="cursor: pointer; padding:5px;">Submit Order</button>
</li>
</ul>
</fieldset>
</form>
我是 PHP 和 jQuery 的新手(我在使用 HTML 和 CSS 方面有更多经验),所以如果有任何错误或有更简单的解决方案,请告诉我!
提前感谢您的帮助!