Jump to content

ajax form submit problem

shadiadiph

By shadiadiph
in Javascript Help

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
https://forums.phpfreaks.com/topic/199690-ajax-form-submit-problem/
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>

Archived

This topic is now archived and is closed to further replies.

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.