AJAX&PHP form validation doesn't work

26 New Member

Hi, I recently learned how to use AJAX, but I'm having a problem with it. What I'm trying to do is validate a form with PHP, and write the output of the validation in the same page. From the last question I have asked in bytes.com, I was introduced to AJAX(well, I always knew it, but I never used it). So, I wrote the following code accordingly:

index.html:

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

<head>
 
<title> Unimail </title>
 
<script type="text/javascript" src="/scripts/main.js"></script>

<link rel="shortcut icon" href="/images/favicon.ico" />

<link rel="stylesheet" type="text/css" href="/styles/main.css" />
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta property="og:description" content="Free one-time use email" />

<meta property="og:title" content="Unimail email service" />

<meta name="author" content="Unimail" />

<meta property="og:site_name" content="Unimail" />
 
</head>
 
<body>
 
<div id="wrapper">

<div id="top">

    <div class="header">

        <img src="/images/email_logo4.jpg" alt="Unimail" />

    </div>

    <div class="navig">

        <ul class="navbar">

            <li><a href="http://localhost/index.html"><span>Home</span></a></li>

            <li><a href="#">About us</a></li>

            <li><a href="#">FAQ</a></li>

            <li><a href="#">Contact</a></li>

            <li><a href="#">Other services</a></li>

        </ul>

    </div>

</div>
 
<div id="body">

    <br />

    <p> Hello! Welcome to Unimail! With Unimail, you can send emails without registering. No inbox, no pre-chosen address, no name. One-time email! </p>
 
    <br /><br />
 
    <form name="sendmail" action="/scripts/send.php" method="post" class="sender">
 
        <p>Recipient's address </p> <input name="recipient" type="text" id="recipient" /><br />

        <p> Title </p><input name="title" type="text" id="title" />

        <p> Body </p><textarea rows="15" cols="65" name="body" id="body" ></textarea><br />

        <input name="submit" type="submit" value="Send!" onclick="getObject();"/>

        <span id="error"> </span>
 
    </form>

    <p> Remember! You will not be able to receive any reply! </p>

</div>

<div id="footer">

    <p> This site was created for occasional emailing. Please do not attempt to use this site to spam emails. </p>

</div>
 
</div>
 
</body>
 
</html>

send.php:

Expand|Select|Wrap|Line Numbers

 
<?php
 
require_once('class.phpgmailer.php');
 
$emailRep = "";

$titleRep = "";

$bodyRep = "";
 
function verifyEmail($email)

{

    if (filter_var($email, FILTER_VALIDATE_EMAIL) == true)

    {

        return true;

    }
 
    $emailRep = "Error: Invalid email address!";

}
 
function verifyTitle($title)

{

    if (strlen($title) > 0)

    {

        return true;

    }
 
    $titleRep = "Error: Empty titles are not allowed!";

}
 
function verifyBody($body)

{

    if (strlen($body) > 19)

    {

        return true;

    }
 
    $bodyRep = "Error: Your email must consist of at least 20 character!";

}
 
$to = $_POST['recipient'];

$subject = $_POST['title'];

$message = $_POST['body'];
 
if (verifyEmail($to) && verifyTitle($subject) && verifyBody($message))

{

    $mail = new PHPGMailer();

    $mail->Username = 'unimail.auto@gmail.com';

    $mail->Password = '***********';

    $mail->From = 'unimail.auto@gmail.com';

    $mail->FromName = 'Unimail';

    $mail->Subject = $subject;

    $mail->AddAddress($to);

    $mail->Body = $message;

    $mail->Send();
 
    echo "Message sent!";

}
 
else

{

    echo $emailRep . "<br />" . $titleRep . "<br />" . $bodyRep;

}
 
?>

main.js:

Expand|Select|Wrap|Line Numbers

 
function getObject()

{

    var http;
 
    try

    {

        http = new XMLHttpRequest();

    }
 
    catch(e)

    {

        try

        {

            http = new ActiveXObject("Msxml2.XMLHTTP");

        }
 
        catch(e)

        {

            http = new ActiveXObject("Microsoft.XMLHTTP");

        }

    }
 
    function getServer()

    {

        if (http.readyState == 4)

        {    

            if (http.responseText.match("Error") == "Error")

            {

                document.getElementById("error").style.color = "red";

                document.getElementById("error").innerHTML = "  " + http.responseText;

            }
 
            else

            {

                document.getElementById("error").style.color = "green";

                document.getElementById("error").innerHTML = "  " + http.responseText;

            }    

        }

    }
 
    var email = document.getElementById("recipient");

    var title = document.getElementById("title");

    var body = document.getElementById("body");
 
    http.open("POST", "send.php", true);

    http.onreadystatechange = getServer();

    http.send(null);

}

However, it is not working. From what I understand, after checking for flow in each of the files, there's a problem with my JS code. I may be wrong, but from what I tested it seems that it's a problem with the JS.

What's wrong?? I can't figure it out!

Thanks! :D

Dec 12 '10 #1

Subscribe Reply

2660

Dormilich

8,658

Recognized Expert Moderator Expert

there are several problems:

- index.html #49. whatever getObject() does, after it is done the form will submit, the page reload and thus no JavaScript output visible.

- main.js #46. a DOM-0 event handler expects a function to be passed, not a function return value. i.e. http.onreadystatechange = getServer;

Dec 12 '10 #2

liams

New Member

Thanks for the reply!

How could I fix the problem with getObject() so that I will be able to display what I want, the way I want(in the same page). I know this is a simple question, but I'm not very familiar with how AJAX works :P

Dec 12 '10 #3

Dormilich

8,658

Recognized Expert Moderator Expert

either use a click button or prevent the form from submitting (either by preventing the default action or by explicitly returning false from the event attribute)

Dec 12 '10 #4

liams

New Member

I did this according to this example:
http://www.tizag.com/ajaxTutorial/aj...ttprequest.php

Why does it stay on the same page for them, and not for me? I would really like to avoid doing such things like preventing the form from submitting.

Edit:

I removed the action="/scripts/send.php" from index.html. However, it is still not working. I'm getting no output.

Dec 13 '10 #5

Dormilich

8,658

Recognized Expert Moderator Expert

Why does it stay on the same page for them, and not for me?

because they don’t use a submit button.

Dec 13 '10 #6

liams

New Member

Thanks for the reply:D

Can you give me any example for a code that actually works? I have no idea how to work with event attributes(I only recently started doing websites.. I'm more of a desktop guy).

Dec 13 '10 #7

Dormilich

8,658

Recognized Expert Moderator Expert

I have no idea how to work with event attributes(I only recently started doing websites.. I'm more of a desktop guy).

how much do you want to understand JavaScript Events?

Can you give me any example for a code that actually works?

do you have a working page, so that I can check whether the AJAX itself works?

Dec 13 '10 #8

liams

New Member

I want to understand JS events as much as I can. My goal is to be good.
About the page, I don't use any external hosting. I run it with my Apache server.

Dec 13 '10 #9

Dormilich

8,658

Recognized Expert Moderator Expert

I want to understand JS events as much as I can.

this will not be a piece of cake …

on another thread I wrote a short summary about Events.

you should additionally read some resources:
- Peter Paul Koch’s Quirksmode.org (Intro, ToC)
- the DOM-Events specifications: DOM-2-Events, DOM-3-Events (there should be something for IE on the MSDN website, too). note that these documents are technical, they exactly describe how events work, i.e. it is not meant as tutorial. still, the introduction section is worth a read to understand the event flow.

Dec 13 '10 #10

liams

New Member

It's going to take me some time to go over all that. In the meanwhile, I would like to try to fix my current code. I'll deal with staying on the same page later, it's just that I just checked and http.responseText is just nothing! It outputs as " ". I can't fix it =/

Dec 13 '10 #11

Dormilich

8,658

Recognized Expert Moderator Expert

first you have to make sure that you send data to the server. considering the code from post #1 you don‘t send data at all (http.send(null);).

also, you should make sure your server script responds as planned (temporarly use $_GET instead of $_POST and pass the data in the URL)

Dec 13 '10 #12

liams

New Member

But I don't even send any data. My PHP code gets the data directly from the form, there's no need to send it. Or is there?? Because in these few lines:

Expand|Select|Wrap|Line Numbers

 $to = $_POST['recipient'];

$subject = $_POST['title'];

$message = $_POST['body'];

These are the only lines where I grab user-generated data from the forms. Why do I need to send any data? I'm only using AJAX to be able to call a PHP validation script, and display it's output on the same page, instead of loading a new page.

I'm really confused...=/

Dec 13 '10 #13

Dormilich

8,658

Recognized Expert Moderator Expert

AJAX does not have anything to do with forms. they are completely different things.

the PHP script that is called by the XMLHttpRequest object only receives data submitted by that object. where those data originate from does not matter.

in your case the regular form submit is rather a fallback should JavaScript be disabled.

Dec 13 '10 #14

liams

New Member

Well, I tried changing my code but still no luck!

main.js changed:

Expand|Select|Wrap|Line Numbers

 function getObject(f)

{

    var http;

    var url = "send.php";

    var email = f.elements['recipient'];

    var subject = f.elements['title'];

    var body = f.elements['body'];

    var parameters = "e=" + email + "&s=" + subject + "&b=" + body;

and

Expand|Select|Wrap|Line Numbers

http.open("GET", url+"?"+parameters, true);

in send.php

Expand|Select|Wrap|Line Numbers

 $to = $_GET['e'];

$subject = $_GET['s'];

$message = $_GET['b'];

and in index.html

Expand|Select|Wrap|Line Numbers

<form name="sendmail" action="" method="" class="sender">

Expand|Select|Wrap|Line Numbers

 
<input name="submit" type="submit" value="Send!" onclick="getObject(this.form);"/>
 

Doesn't work at all.. and I'm getting a totally different url!
index.html?recipient=s&title=d&body=d&submit=Send!

Ok, I'm gonna shoot myself...

Dec 13 '10 #15

Dormilich

8,658

Recognized Expert Moderator Expert

index.html?recipient=s&title=d&body=d&submit=Send!

this is what you get from submitting the form. try alerting the parameter variable from above. (ah, yes, and change the submit button in a click button to prevent the form submission)

PS. AJAX works behind the lines, you normally see nothing from AJAX itself.

Dec 13 '10 #16

liams

New Member

Now after changing it to type="button" I'm getting a wonderful Not Found error. But hey, at least I'm getting it on the same page, and in green too.
Not Found

The requested URL /send.php was not found on this server.

Amazingly enough, send.php is on the same folder main.js is. Not same as index.html though. Perhaps this causes the problem?

Dec 13 '10 #17

Dormilich

8,658

Recognized Expert Moderator Expert

Perhaps this causes the problem?

let me answer very short—yes.

Dec 13 '10 #18

liams

New Member

I moved all files to the same directory. Paths are correct now, and it seems that the "error" <span> does change but there's no text. Only a new line is inserted into the "error" <span>. I seriously have no idea what's the problem. And I mean..really....It should work! Also, the URL stays the same as if the parameters and GET are ignored completely!

FULL CODE:

index.html

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html lang="en-US" xml:lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

<head>
 
<title> Unimail </title>
 
<script type="text/javascript" src="main.js"></script>

<link rel="shortcut icon" href="/images/favicon.ico" />

<link rel="stylesheet" type="text/css" href="/styles/main.css" />
 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<meta property="og:description" content="Free one-time use email" />

<meta property="og:title" content="Unimail email service" />

<meta name="author" content="Unimail" />

<meta property="og:site_name" content="Unimail" />
 
</head>
 
<body>
 
<div id="wrapper">

<div id="top">

    <div class="header">

        <img src="/images/email_logo4.jpg" alt="Unimail" />

    </div>

    <div class="navig">

        <ul class="navbar">

            <li><a href="http://localhost/index.html"><span>Home</span></a></li>

            <li><a href="http://localhost/about.html">About us</a></li>

            <li><a href="#">FAQ</a></li>

            <li><a href="#">Contact</a></li>

            <li><a href="#">Other services</a></li>

        </ul>

    </div>

</div>
 
<div id="body">

    <br />

    <p> Hello! Welcome to Unimail! With Unimail, you can send emails without registering. No inbox, no pre-chosen address, no name. One-time email! </p>
 
    <br /><br />
 
    <form name="sendmail" action="" method="" class="sender">
 
        <p>Recipient's address </p> <input name="recipient" type="text" id="recipient" /><br />

        <p> Title </p><input name="title" type="text" id="title" />

        <p> Body </p><textarea rows="15" cols="65" name="body" id="body" ></textarea><br />

        <input name="submit" type="button" value="Send!" onclick="getObject(this.form);"/>

        <span id="error"> </span>
 
    </form>

    <p> Remember! You will not be able to receive any reply! </p>

</div>

<div id="footer">

    <p> This site was created for occasional emailing. Please do not attempt to use this site to spam emails. </p>

</div>
 
</div>
 
</body>
 
</html>

Expand|Select|Wrap|Line Numbers

 
function getObject(f)

{

    var http;

    var url = "send.php";

    var email = f.elements['recipient'].value;

    var subject = f.elements['title'].value;

    var body = f.elements['body'].value;

    var parameters = "e=" + email + "&s=" + subject + "&b=" + body;
 
    try

    {

        http = new XMLHttpRequest();

    }
 
    catch(e)

    {

        try

        {

            http = new ActiveXObject("Msxml2.XMLHTTP");

        }
 
        catch(e)

        {

            http = new ActiveXObject("Microsoft.XMLHTTP");

        }

    }
 
    function getServer()

    {

        if (http.readyState == 4)

        {

            if (http.responseText.match("Error") == "Error")

            {

                document.getElementById("error").style.color = "red";

                document.getElementById("error").innerHTML = "  " + http.responseText;

            }
 
            else

            {

                document.getElementById("error").style.color = "green";

                document.getElementById("error").innerHTML = "  " + http.responseText;

            }    

        }

    }
 
    http.open("GET", url+"?"+parameters, true);

    http.onreadystatechange = getServer;

    http.send(null);

}

Expand|Select|Wrap|Line Numbers

 
<?php
 
require_once('class.phpgmailer.php');
 
$emailRep = "";

$titleRep = "";

$bodyRep = "";
 
function verifyEmail($email)

{

    if (filter_var($email, FILTER_VALIDATE_EMAIL) == true)

    {

        return true;

    }
 
    $emailRep = "Error: Invalid email address!";

}
 
function verifyTitle($title)

{

    if (strlen($title) > 0)

    {

        return true;

    }
 
    $titleRep = "Error: Empty titles are not allowed!";

}
 
function verifyBody($body)

{

    if (strlen($body) > 19)

    {

        return true;

    }
 
    $bodyRep = "Error: Your email must consist of at least 20 character!";

}
 
$to = $_GET['e'];

$subject = $_GET['s'];

$message = $_GET['b'];
 
if (verifyEmail($to) && verifyTitle($subject) && verifyBody($message))

{

    $mail = new PHPGMailer();

    $mail->Username = 'unimail.auto@gmail.com';

    $mail->Password = '*******************';

    $mail->From = 'unimail.auto@gmail.com';

    $mail->FromName = 'Unimail';

    $mail->Subject = $subject;

    $mail->AddAddress($to);

    $mail->Body = $message;

    $mail->Send();
 
    echo "Message sent!";

}
 
else

{

    echo $emailRep . "<br />" . $titleRep . "<br />" . $bodyRep;

}
 
?>

Dec 14 '10 #19

Dormilich

8,658

Recognized Expert Moderator Expert

on line #45 (JavaScript) insert: alert(parameters);, what does this give?

Dec 14 '10 #20

liams

New Member

When I wrote A as the email, B as the subject, and C as the title in my form it gave:

e=A&s=B&b=C

Dec 14 '10 #21

Dormilich

8,658

Recognized Expert Moderator Expert

your PHP needs some debugging then.

first, use an email address, otherwise your email check will fail for sure.

second, PHP is not as sloppy with its variable’s scope as JavaScript. the assignments on lines #16, #26 & #36 do not change anything (because they are local to the function).

what I consider the best solution is to control the programme flow. therefore the check functions have to break the programme flow if the condition is not met.

Expand|Select|Wrap|Line Numbers

 function verifyTitle($text)

{

    # abort if the text length is zero

    if (strlen(trim($text)) == 0)

    {

        throw new LengthException("Empty titles are not allowed!");

    }

    # further input validation/sanitising

    return $text;

}

the other check functions must be coded appropriately. (use an UnexpectedValueException() for verifyEmail() and LengthException() for verifyBody()).

putting it together.

Expand|Select|Wrap|Line Numbers

 # I left off the function definitions here
 
# start controlling the flow

try

{

    $title = verifyTitle($_GET['s']);

    $body  = verifyBody($_GET['b']);

    $email = verifyEmail($_GET['e']);

    $mail  = new PHPGMailer();

    // etc.

}

# collect any errors and output the error message

catch (Exception $e)

{

    echo $e->getMessage();

}

# end of flow control

should at any place fire the Exception, all code until the next catch() block is not executed. inside the catch() block you have full access to the error.

Dec 14 '10 #22

liams

New Member

Awesome!! Thanks!! it works now!! Just one more question!

It only displays one of the exceptions caught. If more than 1 is caught, how do I display them correctly?

Thanks !!! =D

Dec 14 '10 #23

Dormilich

8,658

Recognized Expert Moderator Expert

that doesn’t happen. Exceptions are thrown once at a time.

all code until the next catch() block is not executed

Dec 14 '10 #24

liams

New Member

So what happens if a bad title and body is input? I want to display two error messages. How do I do this?

Dec 14 '10 #25

Dormilich

8,658

Recognized Expert Moderator Expert

you can’t, because checkBody() will not be executed after the previous check failed. this may seem inconvenient for you, but it makes sense for your PHP programme. it must be cancelled when an error occurs. the presence of any further errors is irrelevant at this point.

of course you can create a script that only checks the validaty of each input, but that’s something you should implement in JavaScript.

Dec 14 '10 #26

liams

New Member

Alright! Thanks!!

Dec 14 '10 #27

AJAX&PHP form validation doesn't work

Similar topics