My captcha is not working into my registration form - javascript

I'm making my registration form to which if user types correct captcha code then user's data will be stored into database, if captcha code is wrong then it'll print output as a wrong but my problem is if user enters the wrong captcha's code it will store user's data into database as well as showing "wrong code" output, pls help where i'm wrong?
here is my code.
<?php session_start(); ?>
<?php
// show potential errors / feedback (from registration object)
if (isset($registration)) {
if ($registration->errors) {
foreach ($registration->errors as $error) {
echo '<div class="alert-box error"><span>Error: </span>'.$error.'</div>';
}
}
if ($registration->messages) {
foreach ($registration->messages as $message) {
echo '<div class="alert-box success"><span>Success: </span>'.$message.'</div>';
}
}
}
/** Validate captcha */
if (!empty($_REQUEST['captcha'])) {
if (empty($_SESSION['captcha']) || trim(strtolower($_REQUEST['captcha'])) != $_SESSION['captcha']) {
$captcha_message ="Invalid captcha";
$style = "background-color: #FF606C color:#555
border-radius: 0px
font-family:Tahoma,Geneva,Arial,sans-serif font-size:11px;
font-size: 18px
padding: 30px 36px
margin:10px font-weight:bold
text-transform:uppercase border:2px solid #0c0b0b
background-color: #ff7e48 ";
echo'
<div id="result" style="$style">
<h2><div class="alert-box error"><span>error: </span>'.$captcha_message.'</div></h2>
</div>';
} else {
$captcha_message = "Valid captcha";
$style = "background-color: #CCFF99";
}
$request_captcha = htmlspecialchars($_REQUEST['captcha']);
unset($_SESSION['captcha']);
}
?>
<!DOCTYPE html>
<html>
<head>
<title>Registration with Linkvessel and collaborate with college's friends</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function(){
$("#datepicker").datepicker();
});
</script>
<style>
.alert-box {
color:#555;
border-radius: 0px;
font-family:Tahoma,Geneva,Arial,sans-serif; font-size:11px; font-size: 18px;
padding: 30px 36px;
margin:10px;
}
.alert-box span {
font-weight:bold;
text-transform:uppercase;
}
.error {
border:2px solid #0c0b0b;
background-color: #ff7e48;
}
.success{
border:2px solid #0c0b0b;
background-color: #a3ea42;
}
</style>
</head>
<body onload="document.getElementById('captcha-form').focus()">
<div id="header">
<img id="logo_size" src="./images/logo.png" onmousedown="return false">
</div><br><br><br>
<form id="form_box" method="post" action="register.php" name="registerform">
<div id="title">
<h2>REGISTRATION FORM</h2>
</div>
<div class="controls pos_selectbox">
<select id="basic" name="user_college" class="input-medium">
<option>Select College</option>
<option>MAIIT kota</option>
</select>
<select id="basic" name="user_branch" class="input-medium">
<option>Select Branch</option>
<option>Computer science</option>
<option>Civil</option>
<option>Mechanical</option>
<option>Electrical</option>
<option>Bioinformatic</option>
</select>
<select id="basic" name="user_year" class="input-medium">
<option>Select year</option>
<option>1st year</option>
<option>2nd year</option>
<option>3rd year</option>
<option>4th year</option>
<option>Year completed</option>
</select>
</div><br>
<input id="input_pos" type="email" name="user_email" required="" placeholder="Email address" /><br><br>
<input id="input_pos" type="password" name="user_password_new" required="" placeholder="Password" /><br><br>
<input id="input_pos" type="password" name="user_password_repeat" required="" placeholder="Confirm password" /><br><br>
<input id="name_pos" type="text" name="user_firstname" required="" placeholder="First name" />
<input id="name_pos2" type="text" name="user_lastname" required="" placeholder="Last name" /><br><br>
<input id="datepicker" type="text" name="user_dob" required="" placeholder="Date of birth" /><br><br>
<input id="name_pos" type="text" name="user_state" required="" placeholder="State" />
<input id="name_pos2" type="text" name="user_city" required="" placeholder="city" /> <br><br>
<img src="captcha.php" id="captcha" /><br/>
<a href="#" onclick="
document.getElementById('captcha').src='captcha.php?'+Math.random();
document.getElementById('captcha-form').focus();"
id="change-image">Not readable? Change text.</a><br/><br/>
<input type="text" name="captcha" id="captcha-form" autocomplete="off" placeholder="Type code here" /><br><br>
<input type="submit" name="register" id="pos_submit" class="btn btn-primary btn-large" value="Create account.."/>
</form>
</html>
EDITED
<?php
// checking for minimum PHP version
if (version_compare(PHP_VERSION, '5.3.7', '<')) {
exit("Sorry, Simple PHP Login does not run on a PHP version smaller than 5.3.7 !");
} else if (version_compare(PHP_VERSION, '5.5.0', '<')) {
// if you are using PHP 5.3 or PHP 5.4 you have to include the password_api_compatibility_library.php
// (this library adds the PHP 5.5 password hashing functions to older versions of PHP)
require_once("libraries/password_compatibility_library.php");
}
// include the configs / constants for the database connection
require_once("config/db.php");
// load the registration class
require_once("classes/Registration.php");
// create the registration object. when this object is created, it will do all registration stuff automatically
// so this single line handles the entire registration process.
$registration = new Registration();
// show the register view (with the registration form, and messages/errors)
include("views/register.php");
?>

Simple example, remove register.php and on the Else add information on database if captcha is correct.
/** Validate captcha */
if (!empty($_REQUEST['captcha'])) {
if (empty($_SESSION['captcha']) || trim(strtolower($_REQUEST['captcha'])) != $_SESSION['captcha']) {
$captcha_message ="Invalid captcha";
$style = "background-color: #FF606C color:#555
border-radius: 0px
font-family:Tahoma,Geneva,Arial,sans-serif font-size:11px;
font-size: 18px
padding: 30px 36px
margin:10px font-weight:bold
text-transform:uppercase border:2px solid #0c0b0b
background-color: #ff7e48 ";
echo'
<div id="result" style="$style">
<h2><div class="alert-box error"><span>error: </span>'.$captcha_message.'</div></h2>
</div>';
} else {
$captcha_message = "Valid captcha";
$style = "background-color: #CCFF99";
//insert in database here and redirect to index or profil
}
$request_captcha = htmlspecialchars($_REQUEST['captcha']);
unset($_SESSION['captcha']);
}
and replace
<form id="form_box" method="post" action="register.php" name="registerform">
with
<form id="form_box" method="post" action="" name="registerform">

Related

Translating a Contact Form's placeholders / JQuery / JavaScript / Contact Form

Hello,
I've written a multilanguage website using jquery and localStorage. The translator works perfect. There are no bugs.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
var arrLang = {
'pl': {
'home': 'Strona główna',
'about': 'O nas',
'contact': 'Kontakt',
'gallery': 'Galeria',
'callnow': 'Zadzwoń teraz i umów przeprowadzkę!'
},
'en': {
'home': 'Home',
'about': 'About',
'contact': 'Contact',
'gallery': 'Gallery',
'callnow': 'Call now and sign up!'
}
};
function translateLang(lang) {
$('.lang').each(function(index, item) {
$(this).text(arrLang[lang][$(this).attr('key')]);
});
};
$(function() {
//first check for stored language in localStorage i.e. fetch data from localStorage
let stored_lang = localStorage.getItem("stored_lang");
//if any then translate page accordingly
if(stored_lang != null && stored_lang != undefined)
{
lang = stored_lang;
translateLang(lang);
}
$('.translate').click(function() {
var lang = $(this).attr('id');
//on click store language to localStorage
localStorage.setItem("stored_lang",lang);
translateLang(lang);
});
});
</script>
<button id="pl" class="translate">Polski</button>
<button id="en" class="translate">English</button>
<nav class="header-bottom-left">
<ul>
<li class="lang" key="home">Strona główna</li>
<li class="lang" key="about">O nas</li>
<li class="lang" key="gallery">Galeria</li>
<li class="lang" key="contact">Kontakt</li>
</ul>
</nav>
Now I'm having a problem with translating a Contact Form's placeholders. I figured out to use JavaScript document.getElementById('id').placeholder='string'; and it works just great, but the data isn't being saved in localStorage and after the refresh of the site it's showing the basic strings again. I also changed on my translator buttons to so don't be confused about my code above.
<div class="contact-form-container">
<div class="contact-form">
<form id="contact-form" action="contact-form-handler.php" method="POST">
<p class="lang" key="contact-form" style="margin: 0 auto; font-size: 22px; font-family: Open Sans; color: #ff4800; margin-bottom: 8px;">Formularz kontaktowy</p>
<div class="flex-break"></div>
<input id="contact-form-name" class="contact-form-content" type="text" name="name" placeholder="Imię" required><div class="flex-break"></div>
<input id="contact-form-email" class="contact-form-content" type="email" name="email" placeholder="E-mail" required><div class="flex-break"></div>
<input id="contact-form-topic" class="contact-form-content" type="text" name="topic" placeholder="Temat" required><div class="flex-break"></div>
<!-- <select style="flex-basis:12%; padding: 6px;" class="contact-form-content" id="prefix" name="whereFromPrefix">
<option value="ul.">ul.</option>
<option value="os.">os.</option>
<option value=" "></option>
</select>
<input style="flex-basis:67%;" class="contact-form-content" type="text" name="whereFrom" placeholder="Skąd? Adres, Miasto"><div class="flex-break"></div>
<select style="flex-basis:12%; padding: 6px; margin-bottom: 12px;" class="contact-form-content" id="prefix" name="whereToPrefix">
<option value="ul.">ul.</option>
<option value="os.">os.</option>
<option value=" "></option>
</select>
<input style="flex-basis:67%; margin-bottom: 12px;" class="contact-form-content" type="text" name="whereTo" placeholder="Dokąd? Adres, Miasto"><div class="flex-break"></div> -->
<textarea id="contact-form-text" style="line-height:16px; font-size: 14px; font-family: calibri;" class="contact-form-content" name="message" id="contact-form-message" cols="" rows="10" placeholder="Dodatkowe informacje"></textarea>
<div class="flex-break"></div>
<button class="contact-form-content-submit" name="submit" type="submit">Wyślij<img id ="Contact_icon_white" src="img/Contact_icon_white.png" alt="White contact icon"></button>
</form>
</div>
</div>
<div class="header-top-right-translate">
<div id="pl" class="translate translate-button"><p onclick="
document.getElementById('contact-form-name').placeholder='Imię';
document.getElementById('contact-form-email').placeholder='E-mail';
document.getElementById('contact-form-topic').placeholder='Temat';
document.getElementById('contact-form-text').placeholder='Dodatkowe informacje';
">Polski</p></div>
<div><p style="opacity: 0.7; font-size: 12px;">|</p></div>
<div id="en" class="translate translate-button"><p onclick="
document.getElementById('contact-form-name').placeholder='Name';
document.getElementById('contact-form-email').placeholder='E-mail';
document.getElementById('contact-form-topic').placeholder='Topic';
document.getElementById('contact-form-text').placeholder='More information';
">English</p></div>
</div>
Can someone tell me how to change the placeholders inside Contact Form but to not lose them after refreshing the site?

Webpage refreshes to top on incorrect form submission

If I enter an Incorrect email address or password my site refreshes to the top of the page and I see this error
Incorrect email and Pass
I have to scroll back down to where my form is to see a detailed error.
I want to prevent my page going to the top.
I have searched for a solution on here but can't find anything.
HTML Code:
<body>
<form method="post" style="margin-right:450px;">
<table align="center" cellspacing="3px;">
<tr>
<td>
<input style="border:1px #666 solid; border-radius: 4px; width: 180px; padding: 12px 20px; font-size:18px;" type="email" name="mail" required placeholder="Your Email">
</td>
<td>
<input style="border:1px #666 solid; border-radius: 4px; width: 180px; padding: 12px 20px; font-size:18px;" type="password" name="pass" required placeholder="Your Password">
</td>
</tr>
</table>
<br><br>
<button class="button button3" type="submit" name="log" style="color:#FFF; text-align:center; margin-left:70px;">Log In</button></td>
</form>
</body>
PHP Code:
<?php
$con=mysqli_connect("localhost","root","","form_data");
if(isset($_POST['log']))
{
$_SESSION['mail'] = $_POST['mail'];
$email = $_POST['mail'];
$Password = $_POST['pass'];
$query = mysqli_query($con,"select * from registration where (User_name = '$email' or Email= '$email') and Password = '$Password' ");
$check = mysqli_num_rows($query);
if($check == 1)
{
echo "<h1> User Login <h1>";
header("location:exam.php");
}
else
{
echo "<div class='error'> ";
echo "!! Invalid Username Or Password !!";
echo "</div>";
}
}
?>

Page Loader while php processing

I want simple loader on php page.
Stages:
1. At first, I post file data to another php page abc.php through form submit.
2. abc.php takes much time to execute query because there is a condition for every record in file
3. Depending on condition loop inserts data. Every record may satisfy different condition.
4. php page starts with SESSION.
When I run simple code in a sample file..
The code will run smoothly. But not executable on php page.
Sample file code is -
<div id="overlay"></div><iframe src="abc.php">>Your browser does not support iframes.</p></iframe>
css-
#overlay{
width: 100%;
height: 100%;
background-color: gray;
position: fixed;
margin: -0.7%;
opacity: 0.6
}
with a script at the end as -
var ol = document.getElementById("overlay"); window.addEventListener("load", function(){ ol.style.display="none"; });
This code is executable. But not for php file.
Want to run this code while executing abc.php after form submission.
ImportMain.php containing form-
<form id="upload_csv" method="post" enctype="multipart/form-data" action="abc.php" onsubmit="return Validate()" name="myform">
<div id="File">
<div><h4 STYLE="TEXT-ALIGN: CENTER; COLOR: brown;">IMPORT FILE</h4></div>
<!--UPLOAD FILE--------------------------------------------------------------------------------------->
<input type="file" name="uploadfile" class="fileInput">
<!--UPLOAD FILE ERROR MESSAGE------------------------------------------------------------------------->
<div id="uploadfile_error" class="val_error"></div>
<!--ADD CAMPIGN NAME---------------------------------------------------------------------------------->
<div id="CampaignSearch">
<input type="text" name="CampaignName" class="typeahead tt-query textInput"
id="search_text" placeholder="Campaign Name"
style="background: white;">
</div>
<!--EMPTY CAMPAIGN NAME ERROR MESSAGE---------------------------------------------------------------->
<div id="CampaignName_error" class="val_error"></div>
<div id="ProjectDetails">
<!--PROJECT NAME--------------------------------------------------------------------------------------->
<input type="text" name="ProjectName" class="textInput" placeholder="Project Name">
<!--PROJECT NAME ERRRO MESSAGE----------------------------------------------------------------------------------------------------------------------------------------->
<div id="ProjectName_error" class="val_error"></div>
<!--WORK ID--------------------------------------------------------------------------------------->
<input type="text" name="WorkId" class="textInput" Placeholder="WorkId"">
<!--WORK ID ERROR MESSAGE------------------------------------------------------------------------->
<div id="WorkId_error" class="val_error"></div>
<!--CLIENT NAME--------------------------------------------------------------------------------------->
<input type="text" name="ClientName" class="textInput" Placeholder="Client Name"">
<!--WORK ID ERROR MESSAGE------------------------------------------------------------------------->
<div id="ClientName_error" class="val_error"></div>
<!--CLIENT NAME--------------------------------------------------------------------------------------->
<input type="text" name="ManagerName" class="textInput" Placeholder="Manager"">
<!--WORK ID ERROR MESSAGE------------------------------------------------------------------------->
<div id="ManagerName_error" class="val_error"></div>
</div>
<!--SUBMIT BUTTON------------------------------------------------------------------------------------>
<div style="margin-left: auto; margin-right: auto; margin-top: 3px;">
<input type="submit" name="submit" value="UPLOAD" class="bn">
</div>
<!--SAMPLE CSV FORMAT-------------------------------------------------------------------------------->
<div id="csvformat">
<img src="images/csvformat.png" height="45" width="300" >
</div>
</div>
abc.php -
session_start();if(!isset($_SESSION['login_status'])){ header("Location: Main.php") ; }
/*INSERT CAMPAIGN NAME------------------------------------------------------------------------*/
$CampaignId=$_SESSION['CampaignId'];
//ECHO $CampaignId;
$Dup_Database=0;
$Q1 = "SELECT * FROM 1.Contacts where CampaignId='$CampaignId'";
$R1 = mysqli_query($conn, $Q1);
IF ($R1->num_rows > 0)
{
WHILE($ROW1=MYSQLI_FETCH_ARRAY($R1))
{
$email=$ROW1['EmailAddress'];
$Q3 = "SELECT * FROM 1.Contacts where EmailAddress='$email' AND CampaignId <> '$CampaignId' AND EmailStatus<>'SUPPRESSED' AND RPAStatus='COMPLETE' ORDER BY EvaContactid DESC; ";
$R3 = mysqli_query($conn, $Q3);
/*INSERT FOR DUPLICATE RECORDS----------*/
IF ($R3->num_rows > 0)
{
WHILE($ROW3=MYSQLI_FETCH_ARRAY($R3))
{
$EmailStatus=$ROW3['EmailStatus'];
$EmailDetails=$ROW3['EmailDetails'];
$RPADetails=$ROW3['RPADetails'];
$ErrorDetails=$ROW3['ErrorDetails'];
$PCName=$ROW3['PCName'];
$Dup=$ROW3['Dup']+1;
$SentStamp=$ROW3['SentStamp'];
$ReadStamp=$ROW3['ReadStamp'];
$ProfileId=$ROW3['ProfileId'];
$ActionDate=$ROW3['ActionDate'];
$StartTime=$ROW3['StartTime'];
$EndTIme=$ROW3['EndTIme'];
$AHT=$ROW3['AHT'];
$query = "UPDATE 1.Contacts
SET
CampaignId='$CampaignId',
empId='{$_SESSION['login_status']}',
EmailStatus='$EmailStatus',
EmailDetails='$EmailDetails',
RPAStatus='COMPLETE',
RPADetails='$RPADetails',
ErrorDetails='$ErrorDetails',
PCName='$PCName',
Dup='$Dup',
SentStamp='$SentStamp',
ReadStamp='$ReadStamp',
ProfileId='$ProfileId',
ActionDate=now(),
StartTime='$StartTime',
EndTIme='$EndTIme',
AHT='$AHT'
WHERE EmailAddress='$email' AND CampaignId = '$CampaignId' AND RPAStatus='PENDING'
";
mysqli_query($conn, $query);
$Dup_Database++;
break;
}
}else{
/*----*/
}
}
}
$Data_Remain = $Unique_Record - $Dup_Database;
$_SESSION['Data_Remain']=$Data_Remain;

Hiding first form and then displaying second. Secnd form performs multiple submits

I have two forms with single input fields. When the page loads I want the first form to be displayed and on submit of this first form I want to retain the value entered in a session in php for later use. Further on submit of first form I want to unhide the second form using jquery. The second form performs multiple submits. Problem I am facing is that the second form on submit brings back the first form and I am having trouble with submits of the two forms. I want the second form to stay consistent and wish to open the first form only once initially.
Here is the code I am working with :
JS
<script>
$(document).ready(function() {
$("#submitvendor").click(function() {
$("#vendorform").hide(1000);
$("#imeiform").css("display", "block");
})
});
</script>
HTML
<div id="vendorform" class="container" style = " position: relative; top: 50px ;left: 20px ; width: 500px; border: 7px solid #c68c53; border-bottom-left-radius: 30px; border-top-right-radius: 30px; padding: 25px;">
<form id="vendor" class="form-inline" role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST" >
<div class="form-group">
<label >Vendor Reference:&nbsp&nbsp&nbsp&nbsp&nbsp</label>
<input type="text" class="form-control" id="vendorreference" name="vendorreference" placeholder="Enter Vendor Reference here" required>&nbsp&nbsp&nbsp
</div>
<input type="submit" id="submitvendor" name="Submit" value="Submit">
</form>
</div>
<div id="imeiform" class="container" style = " display: none; position: relative; top: 70px ;left: 20px ; width: 500px; border: 7px solid #c68c53; border-bottom-left-radius: 30px; border-top-right-radius: 30px; padding: 25px;">
<form class="form-inline" role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST" >
<div class="form-group">
<label >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspIMEI:&nbsp&nbsp&nbsp&nbsp&nbsp</label>
<input type="text" class="form-control" id="imei" name="imei" placeholder="Enter IMEI here" required >&nbsp&nbsp&nbsp
</div>
<input type="submit" id="imei" class="btn btn-default" name="Submit" value="SUBMIT">
</form>
</div>
PHP
<?php
session_start();
include_once('config.php');
if (isset($_POST['Submit'])) {
if (!isset($_SESSION['vendor'])) {
$_SESSION['vendor'] = $_POST['vendorreference'];
}
echo "Submitted";
}
if (isset($_POST['SUBMIT'])) {
$imei = $_POST['imei'];
echo "Second form submitted";
}
?>
You can achieve this simply using PHP,
HTML
<div id="vendorform" class="container" style = "display:<?php echo ($top_form == "Y" ) ? "block": "none"; ?>; position: relative; top: 50px ;left: 20px ; width: 500px; border: 7px solid #c68c53; border-bottom-left-radius: 30px; border-top-right-radius: 30px; padding: 25px;">
<form id="vendor" class="form-inline" role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST" >
<div class="form-group">
<label >Vendor Reference:&nbsp&nbsp&nbsp&nbsp&nbsp</label>
<input type="text" class="form-control" id="vendorreference" name="vendorreference" placeholder="Enter Vendor Reference here" required>&nbsp&nbsp&nbsp
</div>
<input type="submit" id="submitvendor" name="first_form" value="Submit">
</form>
</div>
<div id="imeiform" class="container" style = "display:<?php echo ($bottom_form == "Y" ) ? "block": "none"; ?>; position: relative; top: 70px ;left: 20px ; width: 500px; border: 7px solid #c68c53; border-bottom-left-radius: 30px; border-top-right-radius: 30px; padding: 25px;">
<form class="form-inline" role="form" action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "POST" >
<div class="form-group">
<label >&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspIMEI:&nbsp&nbsp&nbsp&nbsp&nbsp</label>
<input type="text" class="form-control" id="imei" name="imei" placeholder="Enter IMEI here" required >&nbsp&nbsp&nbsp
</div>
<input type="submit" id="imei" class="btn btn-default" name="second_form" value="SUBMIT">
</form>
</div>
PHP
<?php
session_start();
include_once('config.php');
$top_form = "Y";
$bottom_form = "N";
if (isset($_POST['first_form'])) {
if (!isset($_SESSION['vendor'])) {
$_SESSION['vendor'] = $_POST['vendorreference'];
}
$top_form = "N";
$bottom_form = "Y";
}
if (isset($_POST['second_form'])) {
$imei = $_POST['imei'];
$top_form = "N";
$bottom_form = "Y";
echo "Second form submitted";
}
?>
I've set the two flags at the top which is controlling style behaviour, let me know if it works for you.
The simplest way to hide the first form is to set its css to display:none once it is submitted.
Put your PHP logic at the top. session_start() especially should be near the beginning, before any HTML is sent to the browser. Since PHP can tell when the form is submitted, you can use it to set the appropriate style. No need for Javascript
<?php
session_start();
...
$vendor_style = isset($_POST['Submit'])? 'display:none;': 'display:block;';
$imei_style = isset($_POST['Submit'])? 'display:block;': 'display:none;';
...
?>
Then down the page in the HTML, you can set the display to none or block depending on whether the first form has been submitted
<form id="vendor" style="<?= $vendor_style ?>" class="form-inline"...
...
<form id="imei" style="<?= $imei_style ?>" class="form-inline"...
Obviously you'll have to do some form validation in PHP but you get the idea.

Div Not Floating Right Or Being inline with title

I want it so that when all the input fields are filled, the button automatically enables again but i am finding it hard to do so. I am using php to check the fields and html to enable/disable the button
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css">
</head>
<body>
<?php
$required = array('FName', 'LName', 'Email', 'Subject', 'Comments');
$error = false;
foreach($required as $field) {
if (empty($_POST[$field])) {
$error = true;
}
else{
$error = false;
}
}
if ($error) {
} else {
}
?>
<div class="ContentBox" style="width:auto;">
<h1 class="Title">Contact Us</h1>
<div class="contact_form">
<form method="post" action="ThankYou.php">
<div id="contact_left">
<p>First Name: </p>
<input class="TextBox" type="text" name="FName">
<p>Last Name: </p>
<input class="TextBox" type="text" name="LName">
<p id="HText">Email: (?)<span id="HSpan">Only For Verification Purposes</span></p>
<p><input class="TextBox" type="email" name="Email"></p>
<p style="text-align:center;"><input class="Button_s" name="submit" type="submit value="Submit" id="submit" disabled="disabled"></p>
</div>
<div id="contact_right">
<p>Subject: </p>
<input class="TextBox" type="text" name="Subject">
<p>Comments: </p>
<textarea id="content" rows="10" cols="40" name="Comments"></textarea>
</div>
</form>
</div>
</div>
<?php
function check_input($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
</body>
</html>
PHP code will be processed only in server side. PHP can process the input only after the user clicks the submit button.
You should use javascript in this scenario.
It is possible to use only HMTL and CSS to enable the "submit" button when all the fields are filled: http://jsfiddle.net/du97k26u/.
HTML:
<form method = "post">
<input type = "text" placeholder = "First Name" required />
<input type = "text" placeholder = "Last Name" required />
<input type = "submit" value = "Process" />
</form>
CSS:
form > input {
display: block;
}
form > input:invalid ~ input[type = "submit"] {
display: none;
}

Categories

Resources