handling form using POST - javascript

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" />

Related

Three forms actions in one php page

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>
<? } ?>

Bootstrap form fields not clearing after submit

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']) : ""; ?>">

show/hide textarea with validation.when displayed clicked on radio button

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.

What's the best way to email form details?

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.

Javascript do not submit form TRUE

<script type="text/javascript">
function myFunction(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();}
</script>
<form id="form1" action="php/create.php">
Name </br><input type="text" name="inputName" value="" id=""> </input>
Hemsida </br><input type="text" name="inputPage" value="http://" id=""> </input>
<input type="button" onclick="return myFunction()" value="Submit"/>
</form>
<form id="form2" action="php/createhemerb.php">
<input type="text" name="inputFon" value="" id="fnid" hidden/>
<input type="text" name="inputJob" value="" id="fnid" hidden/>
</form>
I reach out to the php files but the both come out "please fill out the form 1" and "please fill out the form 2"
if(!$_POST['submit']) {
echo "please fill out the form";
header ('Location: please fill out the form 1');}
I have tried things back and fourth for hours i can not get it to work.
Please do the following to fix your issue:
Add method='post' to your forms
If you intend to check the value of $_POST['submit'], you need to name your button 'submit'.
You can't use echo and then header(''), it will set a 'header already sent exception'.
header('Location: some text') has no meaning, header('Location: file.html') is the correct syntax.
Full code:
<script type="text/javascript">
function myFunction(){
document.getElementById("form1").submit();
document.getElementById("form2").submit();
}
</script>
<form id="form1" action="php/create.php" method="post">
Name </br><input type="text" name="inputName" value="" id=""> </input>
Hemsida </br><input type="text" name="inputPage" value="http://" id=""> </input>
<input type="button" onclick="return myFunction()" value="Submit" name="submit"/>
</form>
<form id="form2" action="php/createhemerb.php" method="post">
<input type="text" name="inputFon" value="" id="fnid" hidden/>
<input type="text" name="inputJob" value="" id="fnid" hidden/>
</form>
PHP:
if(empty($_POST) || !$_POST['submit']) {
echo "please fill out the form";
//you can't set the header after echoing
//header ('Location: please fill out the form 1');//use header('Location: error.html') instead.
//or output a Javascript redirect echo "<script>window.location = 'error.html';</script>";
}
Hope this helps!

Categories

Resources