我试图创建一个表单,当用户填写所有字段时向我发送电子邮件,我按照教程将其组合在一起,这样就可以工作了,但我想实现一个选项,允许人们选择其他。。。情况如下:
我有一个表格,要求你:姓名,电子邮件,类型和信息。
该类型有4个选项:Feedback、Bug Report、Feature Request和other,我希望当点击另一个单选按钮时,文本框必须有一个输入,所以他们不能通过按下other来跳过,但如果他们选择了其他不是的东西,我不希望他们必须在文本框中键入,但无论我尝试什么,它要么根本不起作用,要么即使我没有选择另一个单选按钮,也必须在文本框中输入。。。
问题已经解决,我请求这个主题保持开放,以便其他人可以继续使用这个页面,或者在我破坏了一些东西的情况下。。。谢谢Rasclatt,你是一个了不起的帮助:)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<link href="contact/css/contactForm.css" rel="stylesheet">
<title>Contact Us</title>
<?php error_reporting(0); ?>
<?php if(isset($_POST['Email'])): ?>
<?php
print_r($_POST);
// This is where you process the email and display the thank you page
$to = 'harryfelton12@gmail.com';
$subject = 'ALERT! Website Form Submission';
$message = 'Users Email: '.strip_tags($_POST['Email'])."'n";
$message .= 'Submitted Message: '.strip_tags($_POST['Comment'])."'n";
$message .= 'Message Type: '.strip_tags($_POST['Type'])."'n";
$headers = 'From: harrywebsite@form.com' . "'r'n" .
'Reply-To: '.strip_tags($_POST['Email']) . "'r'n";
// If the mail is successful, display thanks or display failed
?>
<?php if(mail($to, $subject, $message, $headers)): ?>
// Display the thank you page }
<div id="comments_form">
<h2 style="size:35px;">Thanks For Your Message!</h2>
<p style="font-size: 20px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">You Will Be Redirected Shortly!</p>
<p style="font-size: 15px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">Expect your message to be responded to within 2 working days</p>
<script type="text/javascript">
setTimeout('redirectPage()', 3000)
function redirectPage() {
location.href="index.html"
};
</script>
<?php else: ?>
<div id="comments_form">
<h2 style="size:35px;">Uh Oh! Your Message Could Not Be Sent</h2>
<p style="font-size: 20px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">An Unexpected Error Occured While Trying To Send Your Message</p>
<p style="font-size: 15px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">You Are Being Redirected To The Home Page</p>
<script type="text/javascript">
setTimeout('redirectPage()', 3000)
function redirectPage() {
location.href="index.html"
};
</script>
<?php endif ?>
</div>
<?php else: ?>
<form method="post" id="comments_form">
<div class="row">
<div class="label">
Your Name
</div>
<!--.label end-->
<div class="input">
<input type="text" id="fullname" class="detail" name="Name"
value="<?php echo isset($_POST['Name'])? $_POST['Name'] : ''; ?>" />
<?php if(in_array('Name', $validation)): ?>
<span class="error"><?php echo $error_messages['Name']; ?></span>
<?php endif; ?>
</div>
<!--.input end-->
<div class="context">
e.g. John Smith or Jane Doe
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Your Email
</div>
<!--.label end-->
<div class="input">
<input type="text" id="email" class="detail" name="Email" value="<?php echo isset($_POST['Email'])? $_POST['Email'] : ''; ?>" />
<?php if(in_array('Email', $validation)): ?>
<span class="error"><?php echo $error_messages['Email']; ?></span>
<?php endif; ?>
</div>
<!--.input end-->
<div class="context">
We wont spam you! We only need this to reply to questions you might pose
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Type Of Message
</div>
<!--.label end-->
<div class="input">
<input type="radio" name="Type" onChange="GetValue(this)" value="Feedback" checked="checked" />
Feedback <br />
<input type="radio" name="Type" onChange="GetValue(this)" value="Feature Request" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Feature Request')? 'checked="checked"' : ''; ?> />
Feature Request<br>
<input type="radio" name="Type" onChange="GetValue(this)" value="Bug Report" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Bug Report')? 'checked="checked"' : ''; ?> />
Bug Report<br>
<input type="radio" name="Type" onChange="GetValue(this)" value="Other" id="other" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Other')? 'checked="checked"' : ''; ?> />
Other<br />
<input type="text" style="display:none;" id="option" name="Type" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'option')? 'checked="checked"' : ''; ?> />
<?php if(in_array('Type', $validation)): ?>
<span class="error"> <?php echo $error_messages['Type']; ?> </span>
<?php endif; ?>
</div>
<!--.input end-->
<div class="context">
This is to help us better respond to your message
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Your Message
</div>
<!--.label end-->
<div class="input2">
<textarea id="Comment" name="Comment" class="mess"><?php echo isset($_POST['Comment'])? $_POST['Comment'] : ''; ?></textarea>
<?php if(in_array('Comment', $validation)): ?>
<span class="error"><?php echo $error_messages['Comment']; ?></span>
<?php endif; ?>
</div>
<!--.input end-->
</div>
<!--.row end-->
<div class="submit">
<input type="submit" id="submit" name="Submit" value="Send Message" />
</div>
</form>
<?php endif; ?>
<script>
// This function just checks if the 'other' gets checked
function GetValue(ThisVal) {
var Writing = $(ThisVal).val();
// This just shows you what is happening via the feedback div
$('#feederback').html(Writing);
if (Writing == 'Other') {
// If other, disable the submit
$("#submit").prop("disabled", true);
// Fade in the message textarea
$('#option').fadeIn('fast');
// Check the message area to see if there is text in it already.
// If there is text enable the submit button
CheckVal();
} else {
// If not other, fade out the message
$('#option').fadeOut('fast');
// Enable the submit button
$('#submit').prop("disabled", false);
}
}
function CheckVal() {
var SetMess = $('#option').val();
$('#feedback').html(SetMess);
if (SetMess !== '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
}
// As one types, check that the message is not empty
$('#option').keyup(function () {
CheckVal();
});
// As one clicks into the field, see if it has content
$('#option').click(function () {
CheckVal();
});
$(document).ready(function() {
// validate form
$("#comments_form").validate({
// This will allow you to extend the validator functions
invalidHandler:
function(form, validator) {
// $("#get_online").val("CHECK");
},
rules: {
// For every named input that you want to validate,
// you create a little set of prefs
Name: {
required: true,
},
Email: {
required: true,
email: true
},
Type: { required: true },
Comment: { required: true },
},
messages: {
// Here are just the custom messages you can modify per field
Name: {
required: 'Please Enter Your Name',
},
Email: {
required: 'Please Enter An Email',
email: 'Email address not valid',
},
Type: { required: 'Please Select A Type' },
Comment: { required: 'Please Enter A Message'},
},
});
});
</script>
-提前感谢,harry
好的,所以验证在最底层。我用它来验证基本的东西。如果你访问或谷歌jQuery验证,你可以看到如何验证不同的字段。这很容易。确保在PHP中过滤(strip_tags()
)输入,这样就不会被黑客入侵。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<link href="contact/css/contactForm.css" rel="stylesheet">
<title>Contact Us</title>
<?php error_reporting(0); ?>
<?php if(isset($_POST['Email'])): ?>
<?php
print_r($_POST);
// This is where you process the email and display the thank you page
$to = 'harryfelton12@gmail.com';
$subject = 'ALERT! Website Form Submission';
$message = 'Users Email: '.strip_tags($_POST['Email'])."'n";
$message .= 'Submitted Message: '.strip_tags($_POST['Comment'])."'n";
$message .= 'Message Type: ';
$message .= ($_POST['Type'] !== 'Option')? $_POST['Type']."'n": strip_tags($_POST['option'])."'n";
$headers = 'From: harrywebsite@form.com' . "'r'n" .
'Reply-To: '.strip_tags($_POST['Email']) . "'r'n";
// If the mail is successful, display thanks or display failed
?>
<?php if(mail($to, $subject, $message, $headers)): ?>
// Display the thank you page }
<div id="comments_form">
<h2 style="size:35px;">Thanks For Your Message!</h2>
<p style="font-size: 20px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">You Will Be Redirected Shortly!</p>
<p style="font-size: 15px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">Expect your message to be responded to within 2 working days</p>
<script type="text/javascript">
setTimeout('redirectPage()', 3000)
function redirectPage() {
location.href="index.html"
};
</script>
<?php else: ?>
<div id="comments_form">
<h2 style="size:35px;">Uh Oh! Your Message Could Not Be Sent</h2>
<p style="font-size: 20px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">An Unexpected Error Occured While Trying To Send Your Message</p>
<p style="font-size: 15px; font-family:Arial, Helvetica, sans-serif; color:#000; margin-left: 25px;">You Are Being Redirected To The Home Page</p>
<script type="text/javascript">
setTimeout('redirectPage()', 3000)
function redirectPage() {
location.href="index.html"
};
</script>
<?php endif ?>
</div>
<?php else: ?>
<form method="post" id="comments_form">
<div class="row">
<div class="label">
Your Name
</div>
<!--.label end-->
<div class="input">
<input type="text" id="fullname" class="detail" name="Name"
value="<?php echo isset($_POST['Name'])? $_POST['Name'] : ''; ?>" />
<?php if(in_array('Name', $validation)): ?>
<span class="error"><?php echo $error_messages['Name']; ?></span>
<?php endif; ?>
</div>
<!--.input end-->
<div class="context">
e.g. John Smith or Jane Doe
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Your Email
</div>
<!--.label end-->
<div class="input">
<input type="text" id="email" class="detail" name="Email" value="<?php echo isset($_POST['Email'])? $_POST['Email'] : ''; ?>" />
<?php if(in_array('Email', $validation)): ?>
<span class="error"><?php echo $error_messages['Email']; ?></span>
<?php endif; ?>
</div>
<!--.input end-->
<div class="context">
We wont spam you! We only need this to reply to questions you might pose
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Type Of Message
</div>
<!--.label end-->
<div class="input">
<input type="radio" name="Type" onChange="GetValue(this)" value="Feedback" checked="checked" />
Feedback <br />
<input type="radio" name="Type" onChange="GetValue(this)" value="Feature Request" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Feature Request')? 'checked="checked"' : ''; ?> />
Feature Request<br>
<input type="radio" name="Type" onChange="GetValue(this)" value="Bug Report" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Bug Report')? 'checked="checked"' : ''; ?> />
Bug Report<br>
<input type="radio" name="Type" onChange="GetValue(this)" value="Other" id="other" <?php echo (isset($_POST['Type']) && $_POST['Type'] == 'Other')? 'checked="checked"' : ''; ?> />
Other<br />
<input type="text" style="display:none;" id="option" name="option" <?php echo (isset($_POST['option']))? $_POST['option']: ''; ?> />
<?php if(in_array('Type', $validation)): ?>
<span class="error"> <?php echo $error_messages['Type']; ?> </span>
<?php endif; ?>
</div>
<!--.input end-->
<div class="context">
This is to help us better respond to your message
</div>
<!--end .context-->
</div>
<!--.row end-->
<div class="row">
<div class="label">
Your Message
</div>
<!--.label end-->
<div class="input2">
<textarea id="Comment" name="Comment" class="mess"><?php echo isset($_POST['Comment'])? $_POST['Comment'] : ''; ?></textarea>
<?php if(in_array('Comment', $validation)): ?>
<span class="error"><?php echo $error_messages['Comment']; ?></span>
<?php endif; ?>
</div>
<!--.input end-->
</div>
<!--.row end-->
<div class="submit">
<input type="submit" id="submit" name="Submit" value="Send Message" />
</div>
</form>
<?php endif; ?>
<script>
// This function just checks if the 'other' gets checked
function GetValue(ThisVal) {
var Writing = $(ThisVal).val();
// This just shows you what is happening via the feedback div
$('#feederback').html(Writing);
if (Writing == 'Other') {
// If other, disable the submit
$("#submit").prop("disabled", true);
// Fade in the message textarea
$('#option').fadeIn('fast');
// Check the message area to see if there is text in it already.
// If there is text enable the submit button
CheckVal();
} else {
// If not other, fade out the message
$('#option').fadeOut('fast');
// Enable the submit button
$('#submit').prop("disabled", false);
}
}
function CheckVal() {
var SetMess = $('#option').val();
$('#feedback').html(SetMess);
if (SetMess !== '') {
$('#submit').prop('disabled', false);
}
else {
$('#submit').prop('disabled', true);
}
}
// As one types, check that the message is not empty
$('#option').keyup(function () {
CheckVal();
});
// As one clicks into the field, see if it has content
$('#option').click(function () {
CheckVal();
});
$(document).ready(function() {
// validate form
$("#comments_form").validate({
// This will allow you to extend the validator functions
invalidHandler:
function(form, validator) {
// $("#get_online").val("CHECK");
},
rules: {
// For every named input that you want to validate,
// you create a little set of prefs
Name: {
required: true,
},
Email: {
required: true,
email: true
},
Type: { required: true },
Comment: { required: true },
},
messages: {
// Here are just the custom messages you can modify per field
Name: {
required: 'Please Enter Your Name',
},
Email: {
required: 'Please Enter An Email',
email: 'Email address not valid',
},
Type: { required: 'Please Select A Type' },
Comment: { required: 'Please Enter A Message'},
},
});
});
</script>