Creating AJAX registration form

Creating AJAX registration form - javascript

I created a registration form following an online tutorial.
The current code doesn't insert anything into a database yet. I am just trying to get the basic error messages working.
When the form is submitted the error message "There was an error" is shown. This comes from my action page where the register button has been pressed.
I am not sure what has caused this.
I know there is a lot of code.
Any help is appreciated.
Main Page(With my form):
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(event){
event.preventDefault();
var forename = $("#txtfirstname").val();
var surname = $("#txtsurname").val();
var username = $("#txtusername").val();
var password = $("#txtpassword").val();
$(".form-message").load("aregisteraction.php", {
forename : forename,
surname : surname,
username : username,
password : password
});
});
});
</script>
</head>
<body>
<?php
require 'leftnav.php';
?>
<div class="two-thirds column">
<h1> Not Registered?</h1>
<h3>Register</h3>
<form method="post" action="aregisteraction.php">
<p>
<label for="txtfirstname" >Firstname: </label> </br>
<input type="text" name="firstname" id="txtfirstname" />
</p>
<p>
<label for="txtsurname" >Surname: </label> </br>
<input type="text" name="surname" id="txtsurname" />
</p>
<p>
<label for="ddage" >Age: </label> </br>
<select name="ddage">
<option value="0">Select a value</option>
<option value="1">0-10</option>
<option value="2">11-30</option>
<option value="3">31-50</option>
<option value="4">51-70</option>
<option value="4">71+</option>
</select>
</p>
<p>
<label >Gender: </label> </br>
<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
</p>
<p>
<label for="txtusername" >Email: </label> </br>
<input type="text" name="username" id="txtusername" />
</p>
<p>
<label for="txtpassword" >Password: </label> </br>
<input type="password" name="password" id="txtpassword" />
</p>
<p>
<label for="txtpassword1" >Re-enter Password: </label> </br>
<input type="password" name="password1" id="txtpassword1" />
</p>
<input type="submit" name="register" value="Register" />
<p class="form-message"></p>
</form>
Action Page:
<?php
if(isset($_POST['register'])){
$forename = $_POST['forename'];
$surname = $_POST['surname'];
$username = $_POST['username'];
$password = $_POST['password'];
$errorEmpty = false;
$errorEmail = false;
if(empty($forename)||empty($surname)||empty($username)||empty($password)){
echo "<span> Fill in all fields </span>";
$errorEmpty = true;
}
elseif (!filter_var($username, FILTER_VALIDATE_EMAIL)) {
echo "<span class='form-error'> Fill in a valid email </span>";
$errorEmail = true;
}
else{
echo "<span class='form-success'> Success </span>";
}
}
else{
echo "There was an error!";
}
?>
<script>
$("#txtfirstname, #txtsurname, #txtusername, #txtpassword").removeClass("input-error");
var errorEmpty ="<?php echo $errorEmpty; ?>";
var errorEmail ="<?php echo $errorEmail; ?>";
if(errorEmpty == true){
$("#txtfirstname, #txtsurname, #txtusername, #txtpassword").addClass("input-error");
}
if(errorEmail == true){
$("#txtusername").addClass("input-error");
}
if(errorEmail == false && errorEmpty == false){
$("#txtfirstname, #txtsurname, #txtusername, #txtpassword").val("");
}
</script>

In your JavaScript you doesn't send any value for register.
Two options: add a value to register:
$(document).ready(function(){
$("form").submit(function(event){
event.preventDefault();
var forename = $("#txtfirstname").val();
var surname = $("#txtsurname").val();
var username = $("#txtusername").val();
var password = $("#txtpassword").val();
$(".form-message").load("aregisteraction.php", {
forename : forename,
surname : surname,
username : username,
password : password,
register: "ok",
});
});
});
Or simply test $_POST on another field (as register is a button and will always contains a value in the form).
Also, to test values of your form in PHP you can user print_r():
print_r($_POST);

Related

Use javascript code in php in function.php file

I write this code for a login form in function.php file in Wordpress:
$name = $_POST['dx'];
$pass = $_POST['SX'];
$submitbutton= $_POST['commit'];
if ( isset($submitbutton) ) {
if( isset($name) && empty($name) ){
echo '<script> var errorMsg = document.getElementById("errorMsg");
errorMsg.innerHTML = "username is empty";
errorMsg.style.display = "block"; </script>';
}
else if( isset($pass) && empty($pass) ){
$name = "";
$pass = "";
echo '<script> var errorMsg = document.getElementById("errorMsg");
errorMsg.innerHTML = "password is empty";
errorMsg.style.display = "block"; </script>';
}
}
I got an error Cannot read property 'style' of null
HTML code
<div class="login">
<ul class="errorMessages" id="errorMsg">
<li></li>
</ul>
<form method="post" action="">
<p>
<label for="dx">username</label><br>
<input type="text" name="dx" value="" id="dx" maxlength="20">
</p>
<p>
<label for="SX">password</label><br>
<input id="SX" type="password" name="SX" value="" maxlength="30"
class="keyboardInput" vki_attached="true">
</p>
<div class="separator"></div>
<p class="submit">
<input type="submit" name="commit" value="login">
</p>
</form>
</div>
I want to check the form fields, if fields were empty, show the error messege above the form.
Something like this image:
How can I use script code in right way in PHP? and how can I resolve this error?

<div class="login">
<ul class="errorMessages" id="errorMsg">
</ul>
<form method="post" action="">
<p>
<label for="dx">username</label><br>
<input type="text" name="dx" value="" id="dx" maxlength="20">
</p>
<p>
<label for="SX">password</label><br>
<input id="SX" type="password" name="SX" value="" maxlength="30" class="keyboardInput" vki_attached="true"><img src="http://account.taminm.ir/wp-content/uploads/2020/01/keyboard.png" alt="Display virtual keyboard interface" class="keyboardInputInitiator" title="Display virtual keyboard interface">
</p>
<div class="separator"></div>
<p class="submit">
<input type="submit" name="commit" value="login">
</p>
</form>
</div>
<script type="text/javascript">
const loginWrapper = document.querySelector('.login'),
errorContainer = loginWrapper.querySelector('.errorMessages'),
form = loginWrapper.querySelector('form');
form.addEventListener('submit', function(e) {
e.preventDefault();
const username = form.querySelector('#dx').value.trim(),
password = form.querySelector('#SX').value.trim();
if ( !username ) {
errorContainer.innerHTML = 'username is empty';
} else if (!password) {
errorContainer.innerHTML = 'password is empty';
} else {
form.submit()
}
});
</script>

Undefined Index error php (Submit tag doesn't enter the information in mysql table)

I have to enter the data from a form to a database table. I created the test database and the employee table in phpMyAdmin. When I run it on localhost I get the undefined index error for variables Name, Surname..., and the submit tag doesn't upload the form info into the table in the database. How can I solve this problem?
This is my code:
page.php
<?php
include_once('db.php');
$sql = " ";
$vlere = mysqli_query($sql,$conn);
if (isset($_POST['submit'])) {
$Name = $_POST['name'];
$Surname = $_POST['surname'];
$Birthday = $_POST['birthday'];
$Email = $_POST['email'];
$Telephone = $_POST['telephone'];
$Address = $_POST['address'];
$Company = $_POST['company'];
$Role = $_POST['role'];
$sql = "INSERT INTO employee(Name, Surname, Birthday, Email, Telephone, Address, Company, Role) VALUES('$Name', '$Surname', '$Birthday', '$Email', '$Telephone', '$Address', '$Company', '$Role')";
$vlere = mysqli_query($sql,$conn);
}
if (!empty($vlere)) {
echo "Empty";
}
else {
echo "Inserted";
}
?>
index.html
<html>
<head>
<title>Human Resource</title>
</head>
<body>
<h3><center>Enter the <b>EMPLOYEE</b> information</center></h3>
<form action="page.php" method="post">
Name:
<input type="text" name="name" ></br></br>
Surname:
<input type="text" name="surname" ></br></br>
<div>
Birthday:
<input type="date" name="birthday" required pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"/>
</div>
</br></br>
<div>
Email:
<input type="email" name="email" size="40" maxLength="40" required placeholder="username#gmail.com" pattern=".+#gmail.com">
</div>
</br></br>
<div>
Telephone:
<input type="tel" name="telephone" max="15" required placeholder="xxx-xxx-xxxx" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
</div>
</br></br>
<div>
Address: <input type="address" name="address" required />
</div>
</br></br>
Company Name:
<form>
<select id="company">
<option value="AT Consulting">AT Consulting</option>
<option value="IKUB.al">IKUB.al</option>
<option value="InfoSoft">InfoSoft</option>
<option value="ATOM Computers">ATOM Computers</option>
</select>
</form>
Field:
<input type="text" id="field" />
<button onclick="func1()">Add</button>
<script>
function func1(){
var x = document.getElementById("company");
var option = document.createElement("option");
option.innerHTML = document.getElementById("field").value;
x.add(option);
}
</script>
</br></br>
Role: <input type="text" name="role" >
</br></br>
<input type="submit" name="submit" value="submit" />
</form>
<script src="script/jquery-1.8.0.min.js" type="text/javascript"></script>
<script src="script/first_script.js" type="text/javascript"></script>
</body>
first_script.js
$("#sub").click( function() {
$.post( $("#myForm").attr("action"),
$("#myForm :input").serializeArray(),
function(info){ $("#result").html(info);
});
clearInput();
});
$("#myForm").submit( function() {
return false;
});
function clearInput() {
$("#myForm :input").each( function() {
$(this).val('');
});
}
db.php
<?php
$conn = mysqli_connect('localhost', 'root', '');
$db = mysqli_select_db('test');
?>
Thank you for taking your time to answer me.

How to add onkeypress save in php form

**This is my php index.php file. I want to type first name and last name type and auto it has to be save the database. I wrote the code using ajax. but, this is not working properly. Please can any one help me. **
index.php
<?php
$connection = mysql_connect("localhost", "root", "");
$db = mysql_select_db("type", $connection);
if(isset($_POST['submit'])){
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
if($firstName !=''||$lastName !=''){
//Insert Query of SQL
$query = mysql_query("insert into users(firstName, lastName) values ('$firstName', '$lastName')");
echo "<br/><br/><span>Data Inserted successfully...!!</span>";
}
else{
echo "<p>Insertion Failed <br/> Some Fields are Blank....!!</p>";
}
}
mysql_close($connection);
?>
<html>
<head>
<meta><title>Home Page</title>
<script type="text/javascript">
$(document).on('keyup','firstName','lastName',function(){
var rel = $(this).attr('rel');
var flatvalue = $(this).val();
$("#firstName"+rel).val(flatvalue);
});
</script>
</head>
<body>
<form action="" method="post">
<label for="firstName">First Name</label>
<input type="text" name="firstName" ><br><br>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" ><br><br>
<input type="submit" id="submit" name="submit" value="submit"/>
</form>
</body>
</html>

onKeyPress event not proper because it call many times as per user hit.
Use onBlur event instead of onKeyPress for submit the form and save it to MySql users table.
Try below example,
PHP
<?php
$connection = mysql_connect("localhost", "jaydeep_mor", "jaydeep_mor");
$db = mysql_select_db("jaydeep_mor", $connection);
if(isset($_POST['firstName']) && isset($_POST['lastName'])){
$firstName = $_POST['firstName'];
$lastName = $_POST['lastName'];
if($firstName != '' || $lastName != ''){
//Insert Query of SQL
$query = mysql_query("insert into users(firstName, lastName) values ('$firstName', '$lastName')");
header("Location: test.php?msg=Data Inserted successfully...!!");
}
else{
echo "<p>Insertion Failed <br/> Some Fields are Blank....!!</p>";
}
}
mysql_close($connection);
?>
HTML / JAVASCRIPT
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<meta><title>Home Page</title>
<script type="text/javascript">
function saveData(){
document.forms["userDataForm"].submit();
}
</script>
</head>
<body>
<?php if(isset($_GET['msg']) && trim($_GET['msg'])!=""){ ?>
<br /><div><?php echo $_GET['msg']; ?></div><br />
<?php } ?>
<form action="test.php" method="post" name="userDataForm">
<label for="firstName">First Name</label>
<input type="text" name="firstName" value="<?php echo isset($_POST['firstName'])?$_POST['firstName']:''; ?>" ><br><br>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" value="<?php echo isset($_POST['lastName'])?$_POST['lastName']:''; ?>" onblur="return saveData();" ><br><br>
<!--input type="submit" id="Submit" name="Submit" value="submit"/-->
</form>
</body>
</html>

<?php
$connection = mysql_connect("localhost", "root", "");
$db = mysql_select_db("type", $connection);
if(isset($_REQUEST['firstName'])){
$firstName = $_REQUEST['firstName'];
$lastName = $_REQUEST['lastName'];
if($firstName !=''||$lastName !=''){
//Insert Query of SQL
$query = mysql_query("insert into users(firstName, lastName) values ('$firstName', '$lastName')");
echo "<br/><br/><span>Data Inserted successfully...!!</span>";
die();
}
else{
echo "<p>Insertion Failed <br/> Some Fields are Blank....!!</p>";
die();
}
}
//mysql_close($connection);
?>
<html>
<head>
<meta><title>Home Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#submit').click(function(){ alert('d');
var firstname = $('#firstName').val();
var lastname = $('#lastName').val();
$.ajax({
url:'',
data:{'firstname':firstname,'lastname':lastname, },
type: 'POST',
success: function(data){
alert("Data Save: " + data);
}
});
});
});
</script>
</head>
<body>
<label for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName"><br><br>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" id="lastName"><br><br>
<input type="submit" id="submit" name="submit" value="submit"/>
</body>
</html>

may be this can help you,
if you want to do it via form submit then just you need to give the url of your controller function in the action method of the form
<form action="" method="post">
<label for="firstName">First Name</label>
<input type="text" name="firstName" ><br><br>
<label for="lastName">Last Name</label>
<input type="text" name="lastName" ><br><br>
<input type="submit" id="submit" name="submit" value="submit"/>
</form>
if you want to do it via ajax then you can add id attribute for first_name and last_name input and can do it in following way,
$('#submit').on('click', function(){
var first_name = $("#first_name").val();
var last_name = $("#last_name").val();
$.ajax({
url: url of your controler, //url of your controller function
type: "POST",
data: {'first_name' : first_name,'last_name':last_name},
success: function (data) {
//whatever you want to do on success
} else {
//in case of no data
}
}
});
});
in the same way you can give a class attribute to the input box and on keyup event can save the data via class

have you try doing it this way
$('body').delegate('input[type="text"]', 'keypress keydown keyup change propertychange paste', function(event) {
event.stopImmediatePropagation();
if (event.type === 'keydown' || event.type === 'keypress') {
return;
}
//insert what you want to do here
//perform some ajax
/*
$.ajax({
url: 'index.php',
method: 'POST',
data: {
'firstName' : $('input[name=firstName]).val(),
'lastName' : $('input[name=lastName]).val()
},
success: function(mResponse) {
alert(mResponse);
}
});
*/
});

Script not working as expected when transposed to PHP

I have written java script to validate signup information but it is not working when i joined it to action.php file.but it works fine in html file.
it also dosen't work after refreshing of the page.i am not getting what is wrong with it.please do help to solve this problem.
it is signup page.
<?php include 'conn.php'; ?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="signup.css">
</head>
<body onload="form.reset();"">
<div class="container">
<div id="grad">
<ul>
<li style="">Helping Hands...</li>
<li style="float:right"><a class="active" href="#about"> Have an account? Log in</a></li>
</ul>
</div>
<form name=form action="#" onsubmit="return validate()" autocomplete=on method="post">
<div class="outsidebox" >
<div class='login'>
<h2>Register</h2>
<div class="agree1">
<label style="margin-left: 30px;"> <input id="ngo" type="radio" name="option" value="ngo" checked>NGO</label>
<label style="margin-left:30px;"><input id="ind" type="radio" name="option" value="ind">INDIVIDUAL</label>
</div>
<span><input name='uname' placeholder='Username' type='text' value='<?php echo $_SESSION['name']; $_SESSION['name']='';?>'>
<p id="username" style="font-size: 12px;color:red;"></p>
</span>
<span><input name='email' placeholder='E-Mail Address' type='text'>
<p id="email" style="font-size: 12px;color:red;"></p></span>
<span> <input name='password' placeholder='Password' type='password'>
<p id="password" style="font-size: 12px;color:red;"></p></span>
<span><input name='passwordcon' placeholder=' Confirm Password' type='password'>
<p id="passwordcon" style="font-size: 12px;color:red;"></p></span>
<span><input name='fullname' placeholder='Enter Your Full Name ' type='text'>
<p id="fullname" style="font-size: 12px;color:red;"></p></span>
<div id="a1" >
<strong>PLEASE SELECT FIELDS</strong><br>
<div class="fields">
<select name="fields" id="fields">
<option value="child">Child Welfare</option>
<option value="education">Child Education</option>
<option value="relief">Disaster Management and relief</option>
<option value="envir">Environment</option>
<option value="animals">Animals</option>
</select>
</div>
</div>
<div class='agree'>
<input id='agree' name='agree' type='checkbox'>
<label for='agree'></label>Accept rules and conditions
</div>
<input class='animated' type='submit' value='Register'>
<a class='forgot' href='#'>Already have an account?</a>
</div>
</div>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ngo").click(function(){
$("#a1").show();
});
$("#ind").click(function(){
$("#a1").hide();
});
});
</script>
<script language="javascript">
function validate(){
var flag=1;
var form=document.forms.form;
var user=form.username.value;
if(user==null || user==""){
user="please enter username";
document.getElementById("username").innerHTML=user;
flag=0;
}
else{
document.getElementById("username").innerHTML="";
}
var email=form.email.value;
if(email==null ||email==""){
email="please enter email";
document.getElementById("email").innerHTML=email;
flag=0;
}
else{
document.getElementById("email").innerHTML="";
}
var password=form.password.value;
if(password==null || password==""){
password="please enter password";
document.getElementById("password").innerHTML=password;
flag=0;
}
else{
document.getElementById("password").innerHTML="";
}
var passwordcon=form.passwordcon.value;
if(passwordcon==null || passwordcon==""){
passwordcon="please conform password";
document.getElementById("passwordcon").innerHTML=passwordcon;
flag=0;
}
else{
document.getElementById("passwordcon").innerHTML="";
}
if(passwordcon!=password){
passwordcon =" pasword confirmation fail";
document.getElementById("passwordcon").innerHTML=passwordcon;
flag=0;
}
else{
document.getElementById("passwordcon").innerHTML="";
}
var fullname=form.fullname.value;
if (fullname==null || fullname=="") {
fullname="Enter full name";
document.getElementById("fullname").innerHTML=fullname;
flag=0;
}
else{
document.getElementById("fullname").innerHTML="";
}
if(flag==0){
return false;
}
else{
return true;
`enter code here` }
}
</script>
</html>
it is my action.php as inputs.php in which i have written defined session variables.to send error to signup page;and also i am performing
email validation check.Then i check username is used or not to insert this
into the database.
.
<?php include 'conn.php'; ?>
<?php
if($_SERVER["REQUEST_METHOD"]=="POST")
{
$password=$_POST["password"];
$fullname=$_POST["fullname"];
$uname=$_POST["uname"];
$ngo=$_POST["option"];
$field=$_POST["field"];
$email=$_POST["email"];
$_SESSION['uerr']='';
$_SESSION['emailerr']='';
if (!filter_var($email, FILTER_VALIDATE_EMAIL) === true){
$emailerr="Inavalid Email";
$_SESSION['email']=$emailerr;
$sql="SELECT * FROM user WHERE uname='$uname' LIMIT 1";
$result=mysqli_query($conn,$sql);
$countu= mysqli_num_rows($result);
echo "in emailerr".$countu;
if($countu==0)
{
$_SESSION['fullname']=$fullname;
$_SESSION['field']=$field;
$_SESSION['name']=$uname;
$_SESSION['emailerr']=$emailerr;
$_SESSION['email']='';
die(header('Location:signup2.php'));
}
else{
$uerr="USER NAME already taken";
$_SESSION['fullname']=$fullname;
$_SESSION['field']=$field;
$_SESSION['name']='';
$_SESSION['uerr']=$uerr;
$_SESSION['emailerr']=$emailerr;
$_SESSION['email']='';
echo "in esle";
die(header('Location:signup2 .php'));
}
}
/* $sql="SELECT * FROM user WHERE uname='$uname' LIMIT 1";
$result=mysqli_query($conn,$sql);
$countu= mysqli_num_rows($result);
$sql="SELECT * FROM user WHERE email='$email' LIMIT 1";
$result=mysqli_query($conn,$sql);
$counte = mysqli_num_rows($result);
if($counte==1 && $countu==1)
{
$uerr="USER NAME already taken";
$emailerr="email already taken";
$_SESSION['fullname']=$fullname;
$_SESSION['field']=$field;
$_SESSION['emailerr']=$emailerr;
$_SESSION['uerr']=$uerr;
echo "in bothlerr";
die(header('Location:signup1.php'));
}
elseif($counte==1)
{
$emailerr="email already taken";
$_SESSION['fullname']=$fullname;
$_SESSION['field']=$field;
$_SESSION['name']=$uname;
$_SESSION['emailerr']=$emailerr;
$_SESSION['email']='';
echo "in boeerr";
die(header('Location:signup1.php'));
}
elseif($countu==1)
{
$uerr="USER NAME already taken";
$_SESSION['fullname']=$fullname;
$_SESSION['field']=$field;
$_SESSION['email']=$email;
$_SESSION['uerr']=$uerr;
$_SESSION['name']='';
echo "in uerr";
die(header('Location:signup1.php'));
}
else{
if($ngo="ngo"){
date_default_timezone_set("Asia/Kolkata");
$date=date("Y-m-d h:i:s");
$sql="INSERT INTO user(uname,email,password,dtime,full_name,field) VALUES ( '$uname', '$email', '$password','$date','$fullname','$field')";
mysqli_query($conn,$sql);
echo "in ngo data inserted";
}
else{
date_default_timezone_set("Asia/Kolkata");
$date=date("Y-m-d h:i:s");
$field='none';
$sql="INSERT INTO user(uname,email,password,dtime,full_name,field) VALUES ( '$uname', '$email', '$password','$date','$fullname','$field')";
mysqli_query($conn,$sql);
echo "in ind datainserted";
}
}*/
}
?>
and last one is main signup.html file in which javascript works well.
i want to perform some error checking that is why i have saved it as
signup2.php in htdocs
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="signup.css">
</head>
<body onload="form.reset();"">
<div class="container">
<div id="grad">
<ul>
<li style="">Helping Hands...</li>
<li style="float:right"><a class="active" href="#about"> Have an account? Log in</a></li>
</ul>
</div>
<form name=form action="#" onsubmit="return validate()" autocomplete=on method="post">
<div class="outsidebox" >
<div class='login'>
<h2>Register</h2>
<div class="agree1">
<label style="margin-left: 30px;"> <input id="ngo" type="radio" name="option" value="ngo" checked>NGO</label>
<label style="margin-left:30px;"><input id="ind" type="radio" name="option" value="ind">INDIVIDUAL</label>
</div>
<span><input name='username' placeholder='Username' type='text'>
<p id="username" style="font-size: 12px;color:red;"></p>
</span>
<span><input name='email' placeholder='E-Mail Address' type='text'>
<p id="email" style="font-size: 12px;color:red;"></p></span>
<span> <input name='password' placeholder='Password' type='password'>
<p id="password" style="font-size: 12px;color:red;"></p></span>
<span><input name='passwordcon' placeholder=' Confirm Password' type='password'>
<p id="passwordcon" style="font-size: 12px;color:red;"></p></span>
<span><input name='fullname' placeholder='Enter Your Full Name ' type='text'>
<p id="fullname" style="font-size: 12px;color:red;"></p></span>
<div id="a1" >
<strong>PLEASE SELECT FIELDS</strong><br>
<div class="fields">
<select name="fields" id="fields">
<option value="child">Child Welfare</option>
<option value="education">Child Education</option>
<option value="relief">Disaster Management and relief</option>
<option value="envir">Environment</option>
<option value="animals">Animals</option>
</select>
</div>
</div>
<div class='agree'>
<input id='agree' name='agree' type='checkbox'>
<label for='agree'></label>Accept rules and conditions
</div>
<input class='animated' type='submit' value='Register'>
<a class='forgot' href='#'>Already have an account?</a>
</div>
</div>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#ngo").click(function(){
$("#a1").show();
});
$("#ind").click(function(){
$("#a1").hide();
});
});
</script>
<script language="javascript">
function validate(){
var flag=1;
var form=document.forms.form;
var user=form.username.value;
if(user==null || user==""){
user="please enter username";
document.getElementById("username").innerHTML=user;
flag=0;
}
else{
document.getElementById("username").innerHTML="";
}
var email=form.email.value;
if(email==null ||email==""){
email="please enter email";
document.getElementById("email").innerHTML=email;
flag=0;
}
else{
document.getElementById("email").innerHTML="";
}
var password=form.password.value;
if(password==null || password==""){
password="please enter password";
document.getElementById("password").innerHTML=password;
flag=0;
}
else{
document.getElementById("password").innerHTML="";
}
var passwordcon=form.passwordcon.value;
if(passwordcon==null || passwordcon==""){
passwordcon="please conform password";
document.getElementById("passwordcon").innerHTML=passwordcon;
flag=0;
}
else{
document.getElementById("passwordcon").innerHTML="";
}
if(passwordcon!=password){
passwordcon =" pasword confirmation fail";
document.getElementById("passwordcon").innerHTML=passwordcon;
flag=0;
}
else{
document.getElementById("passwordcon").innerHTML="";
}
var fullname=form.fullname.value;
if (fullname==null || fullname=="") {
fullname="Enter full name";
document.getElementById("fullname").innerHTML=fullname;
flag=0;
}
else{
document.getElementById("fullname").innerHTML="";
}
if(flag==0){
return false;
}
else{
return true;
}
}
</script>
</html>

You need to clean up your code and format your HTML properly before proceeding with troubleshooting should you still not be able to achieve your intended purpose after this exercise.
As pointed out in comments below your initial post, you code contains lots of problems and need to be well formed;
Your </head> element should have a <title> instance.
You should have <body onload="form.reset();"> (without the extra double quotes at the end, after the semi-column).
Remember to close your <div class="container">; it's currently not.
Your <p> elements should not be child elements of <span> as this is actually not allowed according to your declared document type definition, <!DOCTYPE html>.... more details here, for <p>, and here, for <span>.
Close your <body> tag right before your </html>; not after </form>.
Your JavaScript contents are still part of your page content and as such should be within the opened and closed body tag if not declared in your head section.
Feel free to omit the language="javascript" attribute on your <script> element; it's obsolete.

How to Save the optins in a text file without disturbing the email notif

I am using a custom optin page with a form , I want to tweak it a little bit,
I want to save all the optins on a txt file on the server without
disturbing the other functions of the form.
2nd thing I want is to show a custom Page after the optin form is
submitted.
Currently the form works like this
USER SUBMITS > PAGE REFRESHES FOR HIM > I GET AN EMAIL WITH THE SUBMITTED DATA.
Here is the form code
<div class="form fix ">
<p class="form-text">Fill This Out and See Your <br>Timeshare Report</p>
<form name="contactform" action="mail-script.php" method="POST">
<label for="fname">First Name:
<input type="text" name="fname" id="fname" />
</label><br>
<label for="lname">Last Name:
<input type="text" name="lname" id="lname" />
</label><br>
<label for="email">Email Address:
<input type="text" name="email" id="email" />
</label><br>
<label for="phone">Phone Number:
<input type="text" name="phone" id="phone" />
</label><br>
<label for="phone">Alternate Phone:
<input type="text" name="phone" id="aphone" />
</label><br>
<label for="resort">Resort Name:
<input type="text" name="resort" id="resort" />
</label><br>
<label for="amount">Amount Owed? $:
<input type="number" name="amount" id="amount" />
<p style="font-size: 12px !important;margin-top: -14px;padding-right: 30px;text-align:right;">
If Paid Off Leave Zero, Else Put Amount</p>
</label><br>
<div class="checkbox">
<div class="check-text fix">
<p>I'm Considering To</p>
</div>
<div class="check-one fix">
<input type="checkbox" name="call" id="" value="sell"/> Sell It <br>
<input type="checkbox" name="call" id="" value="buy"/> Buy It <br>
<input type="checkbox" name="call" id="" value="rent "/> Rent It
</div>
<div class="check-two fix">
<input type="checkbox" name="call" id="" value="cancel"/> Cancel Mortgage <br>
<input type="checkbox" name="call" id="" value="ownership"/> End Ownership <br>
<input type="checkbox" name="call" id="" value="give"/> Give It Back
</div>
</div>
<p class="captcha">
<img src="captcha_code_file.php?rand=<?php echo rand(); ?>" id='captchaimg' ><br>
<label for='message'>Enter the code above here :</label><br>
<input id="6_letters_code" name="6_letters_code" type="text"><br>
<small>Can't read the image? click <a href='javascript: refreshCaptcha();'>here</a> to refresh</small>
</p>
<input id="submit" type="submit" value="" />
<p class="submit-text">Ensure all fields are completed and correct, allowing you more benefits, while preventing abuse of our data.</p>
</form>
</div>
</div>
This is the mail script which sends me the email
<?php
/* Set e-mail recipient */
$myemail = "**MYEMAIL**";
/* Check all form inputs using check_input function */
$fname = check_input($_POST['fname'], "Enter your first name");
$lname = check_input($_POST['lname'], "Enter your last name");
$email = check_input($_POST['email']);
$phone = check_input($_POST['phone']);
$resort = check_input($_POST['resort']);
$amount = check_input($_POST['amount']);
$call = check_input($_POST['call']);
/* If e-mail is not valid show error message */
if (!preg_match("/([\w\-]+\#[\w\-]+\.[\w\-]+)/", $email))
{
show_error("E-mail address not valid");
}
/* If URL is not valid set $website to empty */
if (!preg_match("/^(https?:\/\/+[\w\-]+\.[\w\-]+)/i", $website))
{
$website = '';
}
/* Let's prepare the message for the e-mail */
$message = "Hello!
Your contact form has been submitted by:
First Name : $fname
Last Name : $lname
E-mail: $email
Phone : $phone
Resort: $resort
Amount: $amount
Call : $call
End of message
";
/* Send the message using mail() function */
mail($myemail, $subject, $message);
/* Redirect visitor to the thank you page */
header('Location: index.html');
exit();
/* Functions we used */
function check_input($data, $problem='')
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
if ($problem && strlen($data) == 0)
{
show_error($problem);
}
return $data;
}
function show_error($myError)
{
?>
if (strtolower($_POST['code']) != 'mycode') {die('Wrong access code');}
<html>
<body>
<b>Please correct the following error:</b><br />
<?php echo $myError; ?>
</body>
</html>
<?php
exit();
}
?>
Here is the online url of the page http://timesharesgroup.com/sell/index.html

you can add this code to your script after all the validation is done:
$text = "$fname\n$lname\n$email\n$phone\n$resort\n$amount\n$call\n\n";
file_put_contents('file.txt', $text, FILE_APPEND);
OR even better csv file:
$fields = array($fname,$lname,$email,$phone,$resort,$amount,$call);
$fp = fopen('file.csv', 'a');
fputcsv($fp, $fields);
fclose($fp);

Develop Reference

JavaScript is the programming language of the Web.

Creating AJAX registration form - javascript

Related

Use javascript code in php in function.php file

Undefined Index error php (Submit tag doesn't enter the information in mysql table)

How to add onkeypress save in php form

Script not working as expected when transposed to PHP

How to Save the optins in a text file without disturbing the email notif

Categories

Resources