Jump to content

ajax form submit problem

shadiadiph

By shadiadiph
in Javascript Help

 Share

Recommended Posts

shadiadiph Advanced Member

shadiadiph

Posted
Posted

Hi i have spent days and days trying to make my first ajax form it is almost working but unfortunately my knowledge of javascript is limited when i dont enter any of the fields it returns all the errors correctly but when i submit only one of the fields all the other errors stop functioning any help wouyld be appreciated.

 

form.php

<?php
session_start();
ini_set ("display_errors", "1");
error_reporting(E_ALL);

$errorheading='';
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test Form</title>
<style type="text/css">
#wrapper{ 
margin: 0 auto;
width: 1000px; 
background: #fff;
border: 0px solid #ff0000;
}
#content { 
float: left;
width: 800px;
height: auto;
display: inline;
color: #ccc;
background: transparent;
border: 0px solid #ff0000;
margin: 12px 0px 0px 5px;
padding: 0px 0px 0px 0px;
}
.contentholder { 
width: auto;
height: auto;
border-collapse: collapse;
color: #ccc;
background: transparent;
border: 0px solid #ff0000;
margin: 0px 0px 0px 10px;
padding: 0px 0px 0px 10px;
}
.dataform{
width: 765px;
height: auto;
border-collapse: collapse;
border: 1px solid #686c3b;
background: transparent;
margin: 5px 0px 0px 10px;
}
.dataform td{
width: auto;
height: auto;
background: #fff;
border: 0px solid #ff0000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.dataform .formtitle{
width: auto;
text-align: left;
color: #28166f;
font-size: 13px;
font-family: arial,tahoma;
font-weight: bold;
text-decoration: underline;
background: #fff;
border: 0px solid #ff0000;
padding: 10px 0px 7px 50px;
}
.dataform .formtitlemess{
width: auto;
text-align: left;
color: #555;
font-size: 13px;
font-family: arial,tahoma;
font-weight: bold;
background: #fff;
border: 0px solid #ff0000;
padding: 5px 0px 7px 50px;
}
.dataform .head{
width: 160px;
text-align: right;
color: #555;
font-size: 13px;
font-family: arial,tahoma;
font-weight: normal;
background: #fff;
border: 0px solid #ff0000;
padding: 0px 0px 0px 0px;
}
.dataform .errorhead{
width: 160px;
text-align: right;
color: #eb3d00;
font-size: 13px;
font-family: arial,tahoma;
font-weight: normal;
background: #fcebdd;
border: 0px solid #ff0000;
padding: 0px 0px 0px 0px;
}
.dataform .mediumname{
width: 300px;
text-align: left;
background: #fff;
border: 0px solid #ff0000;
}
.dataform .mediumname input{
width: 120px;
height: auto;
color: #000;
font-size: 12px;
font-family: arial,tahoma;
font-weight: normal;
background: transparent;
border: 1px solid #b0bec7;
margin: 3px 0px 2px 3px;
padding: 2px 0px 0px 2px;
}
.dataform .errormediumname{
width: 300px;
background: #fcebdd;
border: 0px solid #ff0000;
}
.dataform .errormediumname input{
width: 120px;
height: auto;
color: #000;
font-size: 12px;
font-family: arial,tahoma;
font-weight: normal;
background: #fff;
border: 1px solid #b0bec7;
margin: 3px 0px 2px 3px;
padding: 2px 0px 0px 2px;
}
.dataform .longname{
width: 300px;
text-align: left;
background: #fff;
border: 0px solid #ff0000;
}
.dataform .longname input{
width: 200px;
height: auto;
color: #000;
font-size: 12px;
font-family: arial,tahoma;
font-weight: normal;
background: transparent;
border: 1px solid #b0bec7;
margin: 3px 0px 2px 3px;
padding: 2px 0px 0px 2px;
}
.dataform .errorlongname{
width: 300px;
background: #fcebdd;
border: 0px solid #ff0000;
}
.dataform .errorlongname input{
width: 200px;
height: auto;
color: #000;
font-size: 12px;
font-family: arial,tahoma;
font-weight: normal;
background: #fff;
border: 1px solid #b0bec7;
margin: 0px 0px 0px 3px;
padding: 2px 0px 0px 2px;
}
.dataform .blankerror{
width: 240px;
text-align: left;
color: #fff;
font-size: 11px;
font-family: arial,tahoma;
font-weight: bold;
background: #fff;
border: 0px solid #ff0000;
padding: 0px 0px 0px 0px;
}
.dataform .formerror{
width: 240px;
text-align: left;
color: #eb3d00;
font-size: 11px;
font-family: arial,tahoma;
font-weight: bold;
background: #fcebdd;
border: 0px solid #ff0000;
padding: 0px 0px 0px 0px;
}
.dataform .datasubmitmedium{
width: auto;
height: auto;
border: 0px solid #ff0000;
margin: 3px 0px 0px 0px;
}
.dataform .datasubmitmedium input{
width: 65px;
height: 22px;
text-align: center;
color: #000;
font-size: 13px;
font-family: arial,tahoma;
font-weight: bold;
background: #fff;
border: 1px solid #686c3b;
margin: 3px 0px 0px 5px;
padding: 0px 0px 0px 0px;
}
#wrapper:after { 
    content:'';
    display:block;
    clear:both;
}
</style>


<script type="text/javascript">

function Ajax(){
var xmlHttp;
try{	
	xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
}catch (e){
	try{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
	}catch (e){
	    try{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}catch (e){
			alert("No AJAX!?");
			return false;
		}
	}
}

xmlHttp.onreadystatechange=function(){
     if (xmlHttp.readyState == 4) {
     if(xmlHttp.status == 200) {
document.getElementById('usernameerror').innerHTML=xmlHttp.responseXML.getElementsByTagName("usernameerror")[0].firstChild.nodeValue;
document.getElementById('usernameerror').className = 'formerror';
document.getElementById('emailerror').innerHTML=xmlHttp.responseXML.getElementsByTagName("emailerror")[0].firstChild.nodeValue;
document.getElementById('emailerror').className = 'formerror';
document.getElementById('email2error').innerHTML=xmlHttp.responseXML.getElementsByTagName("email2error")[0].firstChild.nodeValue;
document.getElementById('email2error').className = 'formerror';
document.getElementById('passworderror').innerHTML=xmlHttp.responseXML.getElementsByTagName("passworderror")[0].firstChild.nodeValue;
document.getElementById('passworderror').className = 'formerror';
document.getElementById('password2error').innerHTML=xmlHttp.responseXML.getElementsByTagName("password2error")[0].firstChild.nodeValue;
document.getElementById('password2error').className = 'formerror';
  }
}
}
      var url="formval.php";      
      var username = document.getElementById("username");
      var email = document.getElementById("email");
      var email2 = document.getElementById("email2");
      var password = document.getElementById("password");
      var password2 = document.getElementById("password2");
      var params = "username="+username.value+"&email="+email.value+"&email2="+email2.value+"&password="+password.value+"&password2="+password2.value;
// var params = "email="+email.value;
      xmlHttp.open("POST", url, true);
      xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xmlHttp.send(params);
}

</script>



</head>
<body>

<div id="wrapper">

<div id="content">

<table class="contentholder">
<tr><td class="pageheading">Sign Up</td></tr>
<tr><td>
<form name="signup">
<table class="dataform">
<tr><td class="formtitle" colspan="3">Step 1</td></tr>
<tr><td class="formtitlemess" colspan="2">Please fill out the form below, all fields marked with <span class="required">*</span> are required.</td><td class="titleformerror"><?=$errorheading?></td></tr>
<tr>
<td><div id="usernamehead" class="head"><span class="required">* </span>Username</div></td>
<td><div id="usernameinput" class="mediumname"><input type="text" name="username" id="username" /></div></td>
<td><div id="usernameerror" class="blankerror"></div></td>
</tr>
<tr>
<td><div id="emailhead" class="head"><span class="required">* </span>Email</div></td>
<td><div id="emailinput" class="longname"><input type="text" name="email" id="email" /></div></td>
<td><div id="emailerror" class="blankerror"></div></td>
</tr>
<tr>
<td><div id="email2head" class="head"><span class="required">* </span>Email Again</div></td>
<td><div id="email2input" class="longname"><input type="text" name="email2" id="email2" /></div></td>
<td><div id="email2error" class="blankerror"></div></td>
</tr>
<tr>
<td><div id="passwordhead" class="head"><span class="required">* </span>Password</div></td>
<td><div id="passwordinput" class="mediumname"><input type="password" name="password" id="password" /></div></td>
<td><div id="passworderror" class="blankerror"></div></td>
</tr>
<tr>
<td><div id="password2head" class="head"><span class="required">* </span>Password Again</div></td>
<td><div id="passwordinput" class="mediumname"><input type="password" name="password2" id="password2" /></div></td>
<td><div id="password2error" class="blankerror"></div></td>
</tr>
<tr>
<td class="head"> </td>
<td class="datasubmitmedium"><input type="button" value="Next" onclick="Ajax();" /></td>
<td class="blankerror"> </td>
<tr>
<tr>
<td colspan="3"> </td>
</tr>
<tr>
<td colspan="3"><div id="errorholder"></div></td>
</tr>
</table>
</form>
</td></tr>
</table>


</div>





</div>

</body>
</html>

 

formval.php

<?php

//---------------------START STEP ONE------------------------------------------

// form globals
$formerror=array();
$countformerrors='';
$username='';
$usernameerror='';
$alphanum='';
$alphanum="/^[a-zA-Z0-9._-]*$/";
$email='';
$emailerror='';
$email2='';
$email2error='';
$emailreg='';
$emailreg="/^[a-z0-9]+([_.-][a-z0-9]+)*@([a-z0-9]+([.-][a-z0-9]+)*)+\\.[a-z]{2,4}$/";
$password='';
$passworderror='';
$password2='';
$password2error='';


// post username

if(isset($_POST['username']))
{
$username='';
$username = $_POST['username'];
$username = trim($username);
$username = stripslashes($username);
$usernamelen = strlen($username);
}
if(!isset($_POST['username']))
{
$username='';
$usernamelen='';
}


// post email

if(isset($_POST['email']))
{
$email='';
$email = $_POST['email'];
$email = trim($email);
$email = stripslashes($email);
}

if(!isset($_POST['email']))
{
$email='';
}

if(isset($_POST['email2']))
{
$email2='';
$email2 = $_POST['email2'];
$email2 = trim($email2);
$email2 = stripslashes($email2);
}
if(!isset($_POST['email2']))
{
$email2='';
}

// post password

if(isset($_POST['password']))
{
$password='';
$password = $_POST['password'];
$password = trim($password);
$password = stripslashes($password);
$passwordlen = strlen($password);
}
if(!isset($_POST['password']))
{
$password='';
$passwordlen='';
}

if(isset($_POST['password2']))
{
$password2='';
$password2 = $_POST['password2'];
$password2 = trim($password2);
$password2 = stripslashes($password2);
$password2len = strlen($password2);
}
if(!isset($_POST['password2']))
{
$password2='';
$password2len='';
}


if ($username==false)
{
$usernameerror='Username is required.';
$formerror[]='No Username';
}
if (($username==true) && (preg_match($alphanum, $username)==false))
{
$usernameerror='Username is invalid A-z 1-9 -_ are allowed.';
$formerror[]='Username Invalid';
}
if (($username==true) && (preg_match($alphanum, $username)==false) && ($usernamelen<4))
{
$usernameerror='Username is invalid A-z 1-9 -_ are allowed and must be at least 4 characters long.';
$formerror[]='Username Invalid & Short';
}
if (($username==true) && (preg_match($alphanum, $username)==true) && ($usernamelen<4))
{
$usernameerror='Username must be at least 4 characters long.';
$formerror[]='Short Username';
}
if (($username==true) && (preg_match($alphanum, $username)==true) && ($usernamelen>4))
{
$usernameerror='';
}


if ($email==false)
{
$emailerror='Email is required.';
$formerror[]='No Email';
}
if (($email==true) && (preg_match($emailreg, $email)==false))
{
$emailerror='Invalid Email Address.';
$formerror[]='Email Invalid';
}
if (($email==true) && (preg_match($emailreg, $email)==true))
{
$emailerror='';
}

if ($email2==false)
{
$email2error='Email Again is required.';
$formerror[]='No Email Again';
}
if (($email2==true) && (preg_match($emailreg, $email2)==false))
{
$email2error='Invalid Email Again Address.';
$formerror[]='Email Again Invalid';
}
if ((($email==true) && (preg_match($emailreg, $email)==true)) && (($email2==true) && (preg_match($emailreg, $email2)==true)))
{
if ($email==$email2)
{
$email2error='';
}
if ($email<>$email2)
{
$email2error='Email and Email Again are not the same.';
$formerror[]='Email Mismatch';
}
}


if ($password==false)
{
$passworderror='Password is required.';
$formerror[]='No Password';
}
if (($password==true) && (preg_match($alphanum, $password)==false))
{
$passworderror='Password is invalid A-z 1-9 -_ are allowed.';
$formerror[]='Password Invalid';
}
if (($password==true) && (preg_match($alphanum, $password)==false) && ($passwordlen<4))
{
$passworderror='Password is invalid A-z 1-9 -_ are allowed and must be at least 4 characters long.';
$formerror[]='Password Invalid & Short';
}
if (($password==true) && (preg_match($alphanum, $password)==true) && ($passwordlen<4))
{
$passworderror='Password must be at least 4 characters long.';
$formerror[]='Short Password';
}
if (($password==true) && (preg_match($alphanum, $password)==true) && ($passwordlen>4))
{
$passworderror='';
}


if ($password2==false)
{
$password2error='Password Again is required.';
$formerror[]='No Password Again';
}
if (($password2==true) && (preg_match($alphanum, $password2)==false))
{
$password2error='Password Again is invalid A-z 1-9 -_ are allowed.';
$formerror[]='Password Again Invalid';
}
if (($password2==true) && (preg_match($alphanum, $password2)==false) && ($password2len<4))
{
$password2error='Password Again is invalid A-z 1-9 -_ are allowed and must be at least 4 characters long.';
$formerror[]='Password Again Invalid & Short';
}
if (($password2==true) && (preg_match($alphanum, $password2)==true) && ($password2len<4))
{
$password2error='Password Again must be at least 4 characters long.';
$formerror[]='Short Password Again';
}
if ((($password==true) && ($passworderror==false)) && (($password2==true) && ($password2error==false)))
{
if ($password<>$password2)
{
$password2error='Password and Password Again are not the same.';
$formerror[]='Password Mismatch';
}
if ($password==$password2)
{
$password2error='';
}
}

header("Content-type: text/xml");
echo "<?xml version='1.0' encoding='ISO-8859-1'?>";
echo "<formerrors>";
echo "<usernameerror>$usernameerror</usernameerror>";
echo "<emailerror>$emailerror</emailerror>";
echo "<email2error>$email2error</email2error>";
echo "<passworderror>$passworderror</passworderror>";
echo "<password2error>$password2error</password2error>";
echo "</formerrors>";


?>

Link to comment
Share on other sites
shadiadiph Advanced Member

shadiadiph

Posted
  • Author
Posted

i have kind of found a work around but i know its not the right way to do it it seems that if an xml object has no value it returns an error so if there was no error i just changed my php to give the xml a value of 0 then on the javascript made a new variable and if it equals 0 show one class if moire than that show another class so it displays zero in white is there any way to set an eLementById to nothing? or does anyone know a better way if the responseXML is null not to do anything so it doesn't say object expected???

 

PHP

header("Content-type: text/xml");
echo "<?xml version='1.0' encoding='ISO-8859-1'?>";
echo "<formerrors>";
if ($usernameerror==true)
{
echo "<usernameerror>$usernameerror</usernameerror>";
}
if ($usernameerror==false)
{
echo "<usernameerror>0</usernameerror>";
}
if ($emailerror==true)
{
echo "<emailerror>$emailerror</emailerror>";
}
if ($emailerror==false)
{
echo "<emailerror>0</emailerror>";
}
if ($email2error==true)
{
echo "<email2error>$email2error</email2error>";
}
if ($email2error==false)
{
echo "<email2error>0</email2error>";
}
if ($passworderror==true)
{
echo "<passworderror>$passworderror</passworderror>";
}
if ($passworderror==false)
{
echo "<passworderror>0</passworderror>";
}
if ($password2error==true)
{
echo "<password2error>$password2error</password2error>";
}
if ($password2error==false)
{
echo "<password2error>0</password2error>";
}
echo "</formerrors>";

 

JAVASCRIPT


<script type="text/javascript">

function Ajax(){
var xmlHttp;
try{	
	xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
}catch (e){
	try{
		xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
	}catch (e){
	    try{
			xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		}catch (e){
			alert("No AJAX!?");
			return false;
		}
	}
}

xmlHttp.onreadystatechange=function(){
     if (xmlHttp.readyState == 4) {
     if(xmlHttp.status == 200) {

var a = document.getElementById('usernameerror').innerHTML=xmlHttp.responseXML.getElementsByTagName("usernameerror")[0].firstChild.nodeValue;
if (a==0)
{
document.getElementById('usernameerror').className = 'blankerror';
}
else
{
document.getElementById('usernameerror').className = 'formerror';
}
var b = document.getElementById('emailerror').innerHTML=xmlHttp.responseXML.getElementsByTagName("emailerror")[0].firstChild.nodeValue;
if (b==0)
{
document.getElementById('emailerror').className = 'blankerror';
}
else
{
document.getElementById('emailerror').className = 'formerror';
}
var c = document.getElementById('email2error').innerHTML=xmlHttp.responseXML.getElementsByTagName("email2error")[0].firstChild.nodeValue;
if (c==0)
{
document.getElementById('email2error').className = 'blankerror';
}
else
{
document.getElementById('email2error').className = 'formerror';
}
var d = document.getElementById('passworderror').innerHTML=xmlHttp.responseXML.getElementsByTagName("passworderror")[0].firstChild.nodeValue;
if (d==0)
{
document.getElementById('passworderror').className = 'blankerror';
}
else
{
document.getElementById('passworderror').className = 'formerror';
}
var e = document.getElementById('password2error').innerHTML=xmlHttp.responseXML.getElementsByTagName("password2error")[0].firstChild.nodeValue;
if (e==0)
{
document.getElementById('password2error').className = 'blankerror';
}
else
{
document.getElementById('password2error').className = 'formerror';
}
  }
}
}
      var url="formval.php";      
      var username = document.getElementById("username");
      var email = document.getElementById("email");
      var email2 = document.getElementById("email2");
      var password = document.getElementById("password");
      var password2 = document.getElementById("password2");
      var params = "username="+username.value+"&email="+email.value+"&email2="+email2.value+"&password="+password.value+"&password2="+password2.value;
// var params = "email="+email.value;
      xmlHttp.open("POST", url, true);
      xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
      xmlHttp.send(params);
}

</script>

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.