PHP and HTML form - php

Question

Im trying to create a form to send me an email when the user fills all the fields, I followed a tutorial to put it together so whats there works, but I want to implement an option that allows people to pick other... Heres how it is:
I have a form that asks for your: Name, Email, Type and Message.
The type has 4 options: Feedback, Bug Report, Feature Request and other, I would love if when the other radio button is clicked then the text box HAS to have an input, so they cant just skip by pressing other, but if they pick something else that isnt other then I dont want them to have to type in the text box, but no matter what I try it either doesnt work at all or HAS to have an input in the text box even if I dont select the other radio button...
The problem is resolved, I request that this topic remains open so that others can continue to use this page, or incase I break something... Thanks Rasclatt, You were an amazing help :)
<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>
-Thanks in advance, harry

Answer 1

Ok so the validation is at the very bottom. I have it validating basic stuff. If you visit or google jQuery validation, you can see how to validate different fields. It's pretty easy. Make sure in your PHP that you filter ( strip_tags() ) the inputs so that you don't get hacked.
<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>