Newbie seeking advice, will be much appreciated if someone can help me out!!!
So I have a simple form on my site:
<form id="quote" method="post" class="contact" action="mail.php">
<fieldset>
<div id="form_name">
<label for="name" class="fixedwidth"> Please enter your full name:</label>
<input id="name" name="name" type="text" required aria-required="true" autofocus>
</div>
<div id="form_mail">
<label for="email" class="fixedwidth"> Please enter your email address:</label>
<input id="email" name="email" type="email" required aria-required="true">
</div>
<div id="form_tel">
<label for="tel" class="fixedwidth">Please enter you phone number:</label>
<input id="tel" name="tel" type="tel" required aria-required="true" >
</div>
<div id="form_message">
<label for="message" class="fixedwidth"> Leave a message:</label>
<textarea id="message" name="message" cols="20"rows="7"></textarea>
</div>
<div id="form_submit">
<input type="submit" value="Submit">
</div>
I want to email the details onto myself. I'm using mail.php for this:
<?php
$myemail = "myemail#gmail.com";
$name = $_POST['name'];
$email = $_POST['email'];
$tel = $_POST['tel'];
$message = $_POST['message'];
$subject = 'Website query';
$body = "Name: $name E-mail: $email Telephone Number: $tel Subject: $subject Message: $message";
mail($myemail, $subject, $body);
?>
When a user hits the "submit" button, I want a thank you response to appear below the form and the form to be cleared.
Can anyone help me out with this?
Thanks a million!
You actually do not need javascript to do this, just put everything on the same page and check if POST values are sent.
<form id="quote" method="post" class="contact" action="">
<fieldset>
<div id="form_name">
<label for="name" class="fixedwidth"> Please enter your full name:</label>
<input id="name" name="name" type="text" required aria-required="true" autofocus>
</div>
<div id="form_mail">
<label for="email" class="fixedwidth"> Please enter your email address:</label>
<input id="email" name="email" type="email" required aria-required="true">
</div>
<div id="form_tel">
<label for="tel" class="fixedwidth">Please enter you phone number:</label>
<input id="tel" name="tel" type="tel" required aria-required="true" >
</div>
<div id="form_message">
<label for="message" class="fixedwidth"> Leave a message:</label>
<textarea id="message" name="message" cols="20"rows="7"></textarea>
</div>
<div id="form_submit">
<input type="submit" value="Submit">
</div>
</fieldset>
</form>
<?php if(isset($_POST['email'])) { // & other checks
$myemail = "myemail#gmail.com";
$name = $_POST['name'];
$email = $_POST['email'];
$tel = $_POST['tel'];
$message = $_POST['message'];
$subject = 'Website query';
$body = "Name: $name E-mail: $email Telephone Number: $tel Subject: $subject Message: $message";
if(mail($myemail, $subject, $body)){
echo "MAIL SENT";
}
} ?>
Just add value="" to your inputs to clear them on reload.
On the other hand if you do not want the page to reload at all you will need javascript with AJAX
NB: I haven't checked your code for errors I'm just giving you the logic but at first glance it seems ok.
Related
Assume that I have a PHP page that has three forms.
Form one, it will ask the user to enter the email address while the code is hidden.
<label for="email">Email Address:</label> <input type="text" id="email" name="email">
<input type="hidden" id="code" name="code" value="42"> <input type="submit" value="Submit1">
Form two will be showing after step 1. In this step, the user will be asked to enter the code in step 1 (which is equal to 42).
<input type="number" id="code2" name="code2"> <input type="submit" value="Submit2">
Form three, will be showing after entering corrected code in step 2.
<input type="number" id="code2" name="code2"> <input type="submit" value="Submit3">
How can I program it?
You could try this approach :
<?php
function getFormContent() {
$email = $_POST['email'] ?? null; //$email equals to null if it is undefined, to prevent errors
if (!$email) {
echo '<input type="text" name="email" placeholder="Email.." />';
echo '<input type="hidden" id="code" name="code" value="42">';
} else {
echo '<input type="hidden" name="email" value="'.$email.'" />'; //keep email set after submitting first step
}
if ($email && $_POST['code']) {
if (isset($_POST['code2']) && $_POST['code2'] == $_POST['code']) {
//final form
}
else { //second step
echo '<input type="number" id="code2" name="code2">';
echo '<input type="hidden" id="code" name="code" value="42">'; //we still need this in case user submitted a wrong code
}
}
}
?>
<form method="post">
<?= getFormContent() ?>
<input type="submit" />
</form>
You need to state the action of the form as the name of the file.
So, if the file you are working on is name example.php it should look like so:
$email = trim(get_variable_value('email'));
$code = trim(get_variable_value('code'));
$code2 = trim(get_variable_value('code2'));
//make sure to validate the input!! if it's not valid send back
<? if(!isset($email)){ //alternatively, you can add a hidden input `stage`. I just don't like it, as it can be bypassed.
?>
<form name="transferToNewForm" action="example.php" method="post">
<label for="email">Email Address:</label> <input type="text" id="email" name="email">
<input type="hidden" id="code" name="code" value="42">
<input type="submit" value="Submit1">
</form>
<? }
if(isset($email) && isset($code) && $code == 42){ ?>
<form name="transferToNewerForm" action="example.php" method="post">
<label for="email">Email Address:</label> <input type="text" id="email" name="email" value="<?= $email ?>" readonly>
<input type="number" id="code2" name="code2">
<input type="submit" value="Submit2">
</form>
<? }
if(isset($email) && isset($code2) && $code2 == 42){ ?>
<form name="finalFrom" action="theActualPageYouWant.php" method="post">
<label for="email">Email Address:</label> <input type="text" id="email" name="email" value="<?= $email ?>" readonly>
<input type="number" id="code2" name="code2">
<input type="submit" value="Submit3">
</form>
<? } ?>
I'm working on a form and form handler. Method is _POST and I handle it using PHP. Now , When I wanna Handle The Form , it said $username is undefined.
My Form :
<html>
<head>
<title>Register</title>
<script type="text/javascript" src="includes/register_form_validator.js" ></script>
</head>
<body>
<form method="post" action="includes/register_form_handler.php" name="register_form" >
<label for="username" >Username :</label><input placeholder="username" type="text" /><br>
<label for="password">Password :</label><input type="password" name="password" /><br>
<label for="cpassword">Confirm Password :</label><input type="password" name="cpassword" /><br>
<label for="email">E-Mail :</label><input type="email" name="email" onChange="" /><br>
<input type="submit" value="Submit" />
</form>
</body>
</html>
handler :
<?php
// Do a Form Validation , Makes sure that resource is Valid///////////
$actual_link = "http://$_SERVER[HTTP_HOST]" . "/dcreview/register.php";
if (!isset($_SERVER['HTTP_REFERER'])) {
echo "Invalid Form";
exit;
} else {
if ($_SERVER['HTTP_REFERER'] != $actual_link) {
echo "Invalid Form";
exit;
}
}
///////////////////////////////////////////////////////////////////
// Processes Form //
$user = $_POST["username"];
$pass = $_POST['password'];
$email = $_POST['email'];
password_hash($pass, PASSWORD_BCRYPT);
?>
Replace your Username HTML with this line
<label for="username" >Username :</label><input name="username" placeholder="username" type="text" /><br>
Your username doesn't have a name attribute. Use this:
<input name="username" placeholder="username" type="text" />
I've got a Bootstrap 3 form on my website. The form sends messages fine, however when the user submits the form the fields aren't clearing afterwards - how do I fix this?
This is the 'contact.php' code below.
Link to the 'contact_me.js' https://jsfiddle.net/wookie/6uag6goe/
<form class="form-horizontal" role="form" method="post" action="contact.php">
<div class="form-group">
<label for="name" class="control-label">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="First & Last Name" value="<?php echo htmlspecialchars($_POST['name']); ?>">
<?php echo "<p class='text-danger'>$errName</p>";?>
</div>
<div class="form-group">
<label for="email" class="control-label">Email</label>
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
<?php echo "<p class='text-danger'>$errEmail</p>";?>
</div>
<div class="form-group">
<label for="service" class="control-label">Service</label>
<select class="form-control" id="service" name="service">
<option>Please select a service:</option>
<option>service1</option>
<option>service2</option>
<option>service3</option>
<option>service4</option>
<option>service5</option>
<option>service6</option>
</select>
</div>
<div class="form-group">
<label for="message" class="control-label">Message</label>
<textarea class="form-control" rows="4" name="message">
<?php echo htmlspecialchars($_POST[ 'message']);?>
</textarea>
<?php echo "<p class='text-danger'>$errMessage</p>";?>
</div>
<div class="form-group">
<label for="human" class="control-label">2 + 3 = ?</label>
<input type="text" class="form-control" id="human" name="human" placeholder="Your Answer">
<?php echo "<p class='text-danger'>$errHuman</p>";?>
</div>
<div class="form-group">
<input id="submit" name="submit" type="submit" value="Send Message" class="btn btn-lg btn-default btn-block">
</div>
<div class="form-group">
<?php echo $result; ?>
</div>
Change this
$('#contactForm').trigger("reset");
to
$('#contactForm')[0].reset();
Let your form has an id contactForm then:
$('#contactForm').on('submit', function() {
$(this).each(function() {
this.reset();
});
});
You are echoing out the posted data. You only want to do that when there is an error in the posted data.
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="<?php echo htmlspecialchars($_POST['email']); ?>">
However you are doing your server side error detection you need to only do the echo above if there is an error. Say you store a $isError variable then you would change this to:-
<input type="email" class="form-control" id="email" name="email" placeholder="example#domain.com" value="<?php echo $isError ?htmlspecialchars($_POST['email']) : ""; ?>">
I m trying to show/hide textarea when clicked on particular radio button.I need to validate the textarea such that user has to enter details in the textarea.I m trying with 3 radio buttons when user clicks on 3rd radio button which is Other textarea should be displayed and it should be validated such that the user fills the textarea whereas for rest 2 radio buttons textarea should not be displayed. How can I do this?
Here is the code
<script type="text/javascript">
$(function() {
$("input[type='radio']").change(function(){
if($(this).val()=="Other, please give details")
{
$("#otherAnswer").show();
}
else
{
$("#otherAnswer").hide();
}
});
});
</script>
if (isset($_POST['submit'])) {
$error = "";
if (!empty($_POST['email'])) {
$email = $_POST['email'];
if (!preg_match("/^[_a-z0-9]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i", $email)){
$error .= "The e-mail address you entered is not valid. <br/>";
}
} else {
$error .= "You didn't type in an e-mail address. <br />";
}
if (empty($_POST["mail"])) {
$error = "Reason is required";
} else {
$mail = $_POST["mail"];
}
<form action="" method="post" style="margin-top:20px;">
<input type="hidden" name="subject" value="Form Submission" />
<input type="hidden" name="redirect" value="" />
<label style="font-size:14px;">E-mail:</label>
<input type="text" name="email" value="" style="margin-left:30px;"<?php if (isset($_POST['email'])) { echo $_POST['email']; } ?>" />
<br/>
<br/>
<label >
<input name="mail" type="radio" id="mail" value="I receive too many e-mails" />I receive too many e-mails<br /></label>
<label ><input name="mail" id="mail1" type="radio" value="I don’t find the e-mails interesting or useful" />I don’t find the e-mails interesting or useful</label>
<br/>
<label >
<input name="mail" type="radio" id="mail2" value="Other, please give details" />Other, please give details:</label><br/>
<textarea style="display:none;" type="text" name="otherAnswer" id="otherAnswer"/></textarea>
<input type="submit" class="submit" name="submit" value="SEND" />
</form>
JS Code:
<script>
$(document).ready(function() {
$("#otherAnswer").hide();
$(".opt").change(function(){
var id=$(this).attr("id");
if(id=="mail2")
{
$("#otherAnswer").show();
}
else
{
$("#otherAnswer").hide();
}
});
$("#feedbackform").submit(function(){
var selected_val=$(".opt:checked").val();
if(selected_val=="other_reason")
{
if($("#otherAnswer").val()=="")
{
alert("please enter reason");
// you can display message next to text area.
return false;
}
}
})
});
</script>
HTML code:
<form action="" method="post" style="margin-top:20px;" id="feedbackform">
<input type="hidden" name="subject" value="Form Submission" />
<input type="hidden" name="redirect" value="" />
<label style="font-size:14px;">E-mail:</label>
<input type="text" name="email" value="" style="margin-left:30px;"<?php if (isset($_POST['email'])) { echo $_POST['email']; } ?>" />
<br/>
<label >
<input name="mail" type="radio" id="mail" value="I receive too many e-mails" class="opt"/>I receive too many e-mails<br /></label>
<label ><input name="mail" id="mail1" type="radio" value="I don’t find the e-mails interesting or useful" class="opt"/>I don’t find the e-mails interesting or useful</label>
<br/>
<label >
<input name="mail" type="radio" id="mail2" value="other_reason" class="opt"/>Other, please give details:</label><br/>
<textarea type="text" name="answer" id="otherAnswer"/></textarea>
<input type="submit" class="submit" name="submit" value="SEND" />
</form>
solved both show hide and validation problem.
I've given class to radio button and called function of click event.
Better if you use external css.
please write php related code as per your need.
Right now, I'm validating a contact form using java/ajax, and am generating the error messages in javascript with the following
messages:
{
fname: "Please fill in your name",
email: "Your email will help us contact you",
subject: "Please fill in the subject of your message",
recipient: "Please let us know who you would like to contact",
message: "Please fill out your message",
captcha: "Please answer 2x3"
}
which generates
<label class="error">The error message for this id</label>.
I'm not really sure how a label is generated, but I'm wanted to just replace the empty text inputs with the value of the error message when it's not filled out.
I've tried using
fname.value = "the error message";
but that doesn't seem to work. Any ideas on how to get the error message to show up within the input instead of generating a label?
Form markup:
<form name="myform" id="myform" action="" method="post">
<fieldset>
<label for="fname" id="name_label">First Name</label>
<input type="text" name="fname" id="fname" value="">
<label for="lname" id="lname_label">Last Name</label>
<input type="text" name="lname" id="lname" value="">
</fieldset>
<fieldset>
<label for="email" id="email_label">Email</label>
<input type="text" name="email" id="email" value="">
<label for="phone" id="phone_label">Phone Number</label>
<input type="phone" name="phone" id="phone" value="">
</fieldset>
<fieldset>
<label for="message" id="message_label">Message</label>
<textarea name="message" id="message" size="30" value=""></textarea>
<label for="captcha" id="captcha_label">What's 2x3?</label>
<input type="text" name="captcha" id="captcha" value="">
</fieldset><
input type="submit" name="submit" value="Submit">
</form>
<p>
<img src="%3C?php%20echo%20get_template_directory_uri();%20?%3E/images/loader.gif" id="loading" alt="Loader" name="loading">
</p>
<div id="results"></div>
Use the following JS:
document.myform.fname.value = messages_parent_obj.messages.fname;
I've put together a jsFiddle here: http://jsfiddle.net/dWYWe/ (note that I wrapped messages in a parent object since your snippet implied there was one).