PHP form validation, uses Javascript for error messages - php

OK so I have an email form on index.php. I am using mail_check.php to validate that both fields are filled in.
(there are more that is being validated, but not included as it is not the issue)
The main issue is that from the mail_check.php I want to be sent back to the index.php with a message in placed in the div id="mailrespond". I have chosen both PHP and Javascript to achieve this.
Index.php
<div id="mailrespond"></div>
<form method="post" action="mail_check.php">
<span>Name: <input type="text" name="name" maxlength="30" /></span><br />
<span>Email: <input type="text" name="email" maxlength="30" /></span><br />
<input type="submit" value="Sign Up" name="registration">
</form>
</div>
mail_check.php
if(isset($_POST['registration']))
$name = $_POST['name'];
$email = $_POST['email'];
if(empty($email) || empty($name)){
// if email and name are empty
//header ("location: index.php");
?>
<script language="javascript" type="text/javascript">
window.location.replace("index.php");
function msg() {
// creating elements are a safer method then innerHTML
dv = document.createElement('div'); // creates a Div element
dv.setAttribute('class', 'error_msg'); // adds error styling
txt = document.createTextNode('please enter your name and email '); // create the message
dv.appendChild(txt); // place the text node on the element
document.getElementById("mailrespond").appendChild(dv);
}
window.onload = msg;
</script>
<?php }
The code goes on, but My issue is that I am not getting the feed back messages. I am a little new to this all - if you can help that would be much appreciated! :)

<---- #downvoter please leave a reason! Thanks
Try this (and don't call a form field name, please since a form can have a name too)
Index.php
<!DOCTYPE html>
<html>
<head>
<title>Mail respond</title>
<script>
window.onload=function() {
document.getElementById("mailform").onsubmit=function(){
if (this.fullname.value=="" || this.email.value=="") {
alert("Please fill in name and email");
return false;
}
return true; // allow form submission
}
}
</script>
</head>
<body>
<div id="mailrespond"></div>
<form method="post" action="mail_check.php" id="mailform">
<span>Name: <input type="text" name="fullname" maxlength="30" /></span><br />
<span>Email: <input type="text" name="email" maxlength="30" /></span><br />
<input type="submit" value="Sign Up" name="registration">
</form>
</div>
</body>
</html>
mail_check.php
<?PHP
if(isset($_POST['registration']))
$name = $_POST['fullname'];
$email = $_POST['email'];
if(empty($email) || empty($name)){
// if email and name are empty - only seen if JavaScript is turned off
?>
<h3>You did not fill in name and email</h3>
<p>please wait to be redirected or click <a href='index.php'>here</a></p>;
<meta http-equiv="refresh" content="3; url=http://example.com/index.php" />
<script type="text/javascript">
window.onload=function() {
setTimeout(function() {
window.location.replace("index.php");
},3000);
}
</script>
<?php } ?>

You're redirecting to index.php in the msg function, so it does nothing else.
You should do it by pure PHP, set a component in $_SESSION, redirect by PHP to index.php and in the index.php check if the component exists.

Related

PHP Forms With JQuery Requiring to press submit twice

So I want to replace the form submission with a thank you message after you submit, I need the PHP because this will eventually deal with databases in that php, however right now... The only way it works, is that is Type in a name, press submit. It goes back to a blank form, enter nothing (nothing in address) and submit again and it works...
right now the only way i could think of making it work would be some dummy checkbox where when checked value changes the post is sent. However i don't think that will pass with my groupmates
wondering how i can make it only have to submit once.
Index.PHP
<!DOCTYPE HTML>
<html>
<head>
<?php include_once "thankyou.php"; ?>
<script type="text/javascript" src="jquery-3.1.0.js"></script>
<script type="text/javascript">
$("document").ready(function() {
$("#ContactUs_Submit").click(function(evt) {
<?php $inputName = $_POST["ContactUs_Name"]; ?>
$("#ContactUs_CommentsDiv").replaceWith("<?php
thankyou($inputName); ?>");
return false;
});
});
</script>
</head>
<body>
<div id="ContactUs_CommentsDiv">
<form method="post">
<!-- WITH JQUERY USE SINGLE URL, WITH PAGES-->
<label for="ContactUs_Name">Name: </label>
<input type="text" name="ContactUs_Name" id="ContactUs_Name" />
<br/>
<Label for="ContactUs_Email">Email: </Label>
<input type="email" name="ContactUs_Email" id="ContactUs_Email" />
<br/>
<input id="ContactUs_Submit" type="submit">
</form>
</div>
</body>
</html>
thankyou.php
<?php
function thankyou($name) {
echo "<p> Thank you for your input ";
//if ($_POST["ContactUs_Name"] != "") {
// echo " " . $_POST["ContactUs_Name"];
// }
if ($name != ""){
echo $name;
}
echo "!";
}
?>
Can you not just use AJAX to do this?

Hide form with php on submit?

I have a simple php - password protecton / login based on a form which works. PHP-code is in page "secure.php" and includes the html-file "accessed.html" when user + pass is correct.
But i want the form to hide when hidden page (accessed.html) is shown.
I have tried wrapping the form in a div and using javascript and display: none to hide, but it doesnt work - not locally or on server.
What am i doing wrong? It doesnt have to be js hiding the form after login..
PHP in top
<?php
$user = $_POST['user'];
$pass = $_POST['pass'];
if($user == "a"
&& $pass == "a")
{
include("accessed.html");
echo "<script>
document.getElementById('wrap').style.display = 'none';
</script>";
}
if(isset($_POST))
?>
And the form in the body:
<div id="wrap">
<form method="POST" action="secure.php">
User <input type="text" name="user"></input>
Pass <input type="text" name="pass"></input>
<input type="submit" name="submit" value="access page"></input>
</form>
</div>
Move the <script> to after wherever you display "#wrap"
If you want to do it on the server side (PHP) just use an if statement.
I think this is what you are looking for my friend
<html>
<body>
<div id="wrap">
<form method="POST" action="temp.php" target = "hidden">
<input type="text" name="user">User</input>
<input type="text" name="pass">Pass</input>
<input type="submit" name="submit" value="access page" onclick = "closediv()"></input>
</form>
</div>
<iframe name = "hidden" id = "hidden" style = "display: none"></iframe>
<script>
function closediv(){
document.getElementById("wrap").style.display = "none";
}
</script>
</body>
</html>
With the above code, you'll need to do your PHP processing on the current page. If this isn't doing what you want it to do and I misread your question, let me know and we can work on your predicament.

Submit button not working?

I have this small test page trying to mess around and figure out PHP code, from what I understand, after filling the forms and hitting submit, something should happen. Depending on what you entered.
<!DOCTYPE html>
<html>
<head>
<title>PHP Testing Page</title>
</head>
<body>
<?php
echo "Testing Page, working great!\n";
$theDate = date("M-d-Y ");
echo "Today is " . $theDate;
$email1 = $_POST['email1'];
$email2 = $_POST['email2'];
function checkEmail()
{
$email1 = $_POST['email1'];
$email2 = $_POST['email2'];
echo $email1;
echo $email2;
if($email1==$email2)
{
echo "\nE-Mail Addresses match.";
}
else
{
echo "\nCheck to make sure your E-Mails match";
}
}
?>
<form name="checkingEmail" action="." method="post">
E-Mail: <input type="text" name="email1" value="E-Mail Here" />
<br />
Retype E-Mail: <input type="text" name="email2" value="Confirm E-Mail" />
<br />
<input type="button" value="Submit" onClick="checkEmail()">
</form>
</body>
</html>
After the forms are filled (via visiting page) and the Submit button is clicked, nothing happens. Can someone explain please?
********EDIT******FIXED**
Found a work around! No functions, works like a charm.
<!DOCTYPE html>
<html>
<head>
<title>PHP Testing Page</title>
</head>
<body>
<?php
echo "Testing Page, working great!\n";
$theDate = date("M-d-Y ");
echo "Today is " . $theDate;
?>
<form name="checkingEmail" action="test.php" method="post">
E-Mail: <input type="text" name="email1" value="E-Mail Here" />
<br />
Retype E-Mail: <input type="text" name="email2" value="Confirm E-Mail" />
<br />
<input type="submit" value="Submit">
</form>
<?php
$email1 = $_POST["email1"];
$email2 = $_POST["email2"];
if($email2==null)
{
/*I believe this just stops it from checking the rest of the conditions, that
way it won't echo anything until someones enters valid (non-null) input*/
$email2 = "notnull";
}
else if($email1==$email2)
{
echo "Good Job.";
}
else
{
echo "Failure to comply.";
}
?>
</body>
I have the check outside of a function, so I don't have to call it or anything like that. Also, with the first if statement, if $email2 is null (When they first load it) it will
simply change $email2 to "notnull" and stop checking statements because it found a valid
one. (Not 100%)
Where is your submit button ?
<input type="button" value="Submit" onClick="checkEmail()">
^
The type should be submit
As mentioned on this answer comments, you can't call a php function from javascript.
When you do it you'll call checkEmail from a javascript, which isn't defined.
So, you'll get the following error:
Uncaught ReferenceError: checkEmail is not defined
type should be submit;
If you change it to the submit and then run it, it should be fine. You should use submit type with Form elements.

php javascript alertbox have to click 2 times before it show

I'm doing php that is textbox a value empty it will open a alertbox (I'm using javascript in here )
this is my code
<?php
include('config.php');
if(isset($_POST['submit'])){
$username=$_POST['username'];
?>
<script>
function validate(){
if(document.forms[0].username.value==""){
window.alert("You must enter both values");
return false;
}
}
</script>
<?php
}
?>
<html>
<div><p>Member Profile</p>
<form action="testing.php" method="POST" onsubmit="return validate();">
Username<br>
<input class="user" type="text" name="username" id="username" /><br>
<input type="submit" name="submit" value="register" />
</form>
</div>
</html>
The problem is i have to click 2 times before the alert show
please help me to solve this problem
It's because the script is inside the php if(isset){} block, one click submits the form, which generates the script and then it works the second time.. try this setup instead:
<?php
include ('config.php');
if (isset($_POST['submit']))
{
$username = $_POST['username'];
}
?>
<html>
<head>
<script>
function validate () {
if (document.forms[0].username.value == "") {
window.alert("You must enter both values");
return false;
}
}
</script>
</head>
<body>
<div>
<p>
Member Profile
</p>
<form action="testing.php" method="POST" onsubmit="return validate();">
Username
<br>
<input class="user" type="text" name="username" id="username" />
<br>
<input type="submit" name="submit" value="register" />
</form>
</div>
</body>
</html>
Edit:
I've moved the script tag inside the head tag. I'm not sure if there are any implications for having the script outside but just to be sure I've moved it.
2nd Edit: (OCD is kicking in)
I've added body tags, not sure if you copied and pasted this code but it looked weird to me :)

PHP form not processing in process.php

I'm having difficulty figuring out why my PHP form is processing on process.php but not returning to the form page with the appropriate $messages. Am I missing a line of code? I wrote this all up myself and it's the first time.
Here is my html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Contact Form - jQuery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h3>Contact Us</h3>
<?php echo $contact_message; ?>
<form id="myForm" method="post" action="process.php">
<input name="name" type="text" value="<?php echo $_POST[name]; ?>" placeholder="Name" required/>
<br>
<input name="email" type="email" value="<?php echo $_POST[email]; ?>" placeholder="you#yourmail.com" required/>
<br>
<textarea name="message" class="message" placeholder="We can answer your questions." required>
<?php echo $_POST[message]; ?>
</textarea>
<br>
<button type="submit" name="submit" class="btn send">
<img src="img/send.png">
</button>
<br>
<?php echo $contact_success_message; ?>
</form>
<!--close contact form-->
</body>
</html>
And here is my process.php
<?php
//checks for valid email
function is_valid_email($email) {
$result = true;
$pattern = '/^([a-z0-9])(([-a-z0-9._])*([a-z0-9]))*\#([a-z0-9])(([a-z0-9-])*([a-z0-9]))+(\.([a-z0-9])([-a-z0-9_-])?([a-z0-9])+)+$/i';
if(!preg_match($pattern, $email)) {
$result = false;
}
return $result;
}
//when send is pressed, validate fields
if(isset($_POST['submit'])) {
$valid = true;
$contact_message = '';
if ( $_POST['name'] == "" ) {
$contact_message .= "You forgot to tell us your name. ";
$valid = false;
}
if ( !is_valid_email($_POST['email']) ) {
$contact_message .= "A valid email is required, don't worry we don't share it with anyone. ";
$valid = false;
}
if ( $_POST['message'] == "" ) {
$contact_message .= "What did you want to ask us? ";
$valid = false;
}
//if everything checks out, send the message!
if ( $valid == true ) {
$safe_email = str_replace("\r\n","",$_POST[email]);
$mail = "From: $_POST[name]\n";
$mail .= "Email: $_POST[email]\n";
$mail .= "$_POST[message]\n";
mail('ME#MYEMAIL.COM','New Contact from RN+',$mail,"From: $safe_email\r\n");
$contact_success_message = 'Brilliant I say! We will be in contact with you shortly.';
//clear form when submission is successful
unset($_POST);
}
}
?>
I could have sworn that I've used this before but this time it's not returning to the contact page.
It looks like you meant to use the code like this:
form.php
<?php include 'process.php'; ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test Contact Form - jQuery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.form.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<h3>Contact Us</h3>
<?php echo $contact_message; ?>
<form id="myForm" method="post" action="process.php">
<input name="name" type="text" value="<?php echo $_POST[name]; ?>" placeholder="Name" required/><br>
<input name="email" type="email" value="<?php echo $_POST[email]; ?>" placeholder="you#yourmail.com" required/><br>
<textarea name="message" class="message" placeholder="We can answer your questions." required><?php echo $_POST[message]; ?></textarea><br>
<button type="submit" name="submit" class="btn send"><img src="img/se
__
formnd.png"></button><br>
<?php echo $contact_success_message; ?>
</form><!--close contact form-->
</body>
</html>
The form processor will set the appropriate variables you are outputting in your HTML code. Since process.php checks if the method is POST, you don't have to do that in the form page.
If you want process.php to redirect back to your form, you need to add a PHP header code like: header('Location: http://www.example.com/form.php');
If you want to carry through any data back to the original page, include it in the URL as a GET variable: header('Location: http://www.example.com/form.php?message='.$messagetext); You can then retrieve this on your form page through use of GET: echo $contact_success_message = $_GET['message'];
Do not forget to exit(); or die(); after your redirect!
If you don't have any reason for excluding a single PHP page, you could merge the two (form and process) into one php page.
<?php
//checks for valid email function
...
if(isset($_POST['submit'])) {
...
}
?>
...your HTML goes here...
This will display just the form if no data has been submitted, and if the form has been submitted will "reload" the page, perform the action, and display the appropriate message. Change the form action to action="" so the file will post to itself.
I would recommend using jQuery validation. It is easier and will help with any issues you might have in returning the message.
http://docs.jquery.com/Plugins/Validation
Something like this...
$("#myForm").validate({
rules: {
name: { required: true; }
},
messages: {
name: "You forgot to tell us your name.",
}
});
You can do this for email fields and for your whole form. You can find plenty of examples online.
Just include your other fields. If you do it this way the validation is client side and the form will process and then you forward to a thank you for contacting us page.

Categories