custom php error message fadein

Question

I have written the following code as part of the user signup process for my website. Obviously once the user has filled out their email and clicks submit the form data is sent through this:

<?php

if(isset($_POST['email'])){

$email_from = $_POST['email'];

function died($error) {
    echo $error;
    die();
}

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

$error_message = "";
$email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';
    if(!preg_match($email_exp,$email_from)) {

  $error_message .= ' <script type="text/javascript">
  alert("The email address you entered does not appear to be valid");
  window.location = "http://www.domain.com/";
  </script> ' ;
    }

if(strlen($error_message) > 0) {
    died($error_message);
}

etc, etc, etc....

What i would really appreciate some help with is this bit of script:

$error_message .= ' <script type="text/javascript">
  alert("The email address you entered does not appear to be valid");
  window.location = "http://www.domain.com/";
  </script> ' ;
    }

How can create an error message that just fades in (and out on click) on the html page, rather than just being a js alert infront of the blank white php page before redirecting to the html page??

Thank you!

hsnm · Answer 1 · 2012-09-21T21:18:06.570

2

How about using jQuery's fadeIn function? http://api.jquery.com/fadeIn/ In case you don't know how to use jQuery, you should simply link your html page to jQuery's .js script and use the functions as you need.

Update:

To answer your comment. According to a discussion in http://stackoverflow.com/questions/3708850/is-there-an-onload-event-for-input-elements, here is what you may do:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script type="text/javascript">
    function test() { 
        alert('test');
    }
    </script>
</head>
<body >
    <?php 
    if($condition) { 
        print '<input type="hidden" />
    <script>
    test();
    </script>';
    }

    ?>


</body>

Then, you can do whatever you want in test(), e.g., calling the fadeIn. Also, you can specify your desired condition in the PHP if-statement.

edited Sep 21 '12 at 21:18

answered Sep 19 '12 at 18:55

hsnm

658
1
8
20

would i not need to link to that from the php page? – Sep 19 '12 at 19:05
You can just link it in your php page inside your tag, e.g., where jquery-1.8.1.min.js is on http://code.jquery.com/jquery-1.8.1.min.js – hsnm Sep 19 '12 at 19:09
Hi hsnm, so in the php page it would become - $error_message .= ' ' ;} and then I would just write the script as normal in the index.html page? – Sep 21 '12 at 12:26
@user1677820 I'm answering your question in the body of my answer above. – hsnm Sep 21 '12 at 21:15

score 2 · Answer 2 · answered Sep 19 '12 at 18:58

2

<span class="fadeInMessage" style="display:none;">"The email address you entered does not appear to be valid"</span>

This would start off invisible. Then you would write the following code:

$(function(){
    $('.fadeInMessage').fadeIn();
});

answered Sep 19 '12 at 18:58

Zevi Sternlicht

5,399
19
31

would this simply be in place of the alert("this email...")? – Sep 19 '12 at 19:06
yup. You would echo or place it in a variable and later echo it, it will appear at first invisible and then would appear slowly due to the call! – Zevi Sternlicht Sep 19 '12 at 19:06
and so would i keep the window.location as it is? the would go in the index.html file? – Sep 21 '12 at 12:29
@user1677820 I dont understand. If you want to redirect him then you have decide if you want to redirect him after the message and if so how. Perhaps by clicking something or by waiting a certain amount of time. Then you would call window.location as usual. Dont really get your problem – Zevi Sternlicht Sep 21 '12 at 13:45

score 0 · Answer 3 · answered Sep 19 '12 at 20:08

I agree with the other two answers; you should use jQuery's fadeIn function. However, if you don't want to or can't use jQuery, this should get you started on a pure Javascript implementation:

HTML:

<div id="message">Hello world!</div>

Javascript:

var msg = document.getElementById( 'message' );
msg.style.opacity = 0;

function fadeIn() {
    if( msg.style.opacity < 1 ) {
        msg.style.opacity = parseFloat(msg.style.opacity) + 0.01;        
        setTimeout( fadeIn, 25 );
    }
}

function fadeOut() {
    if( msg.style.opacity > 0 ) {
        msg.style.opacity = parseFloat(msg.style.opacity) - 0.01;
        setTimeout( fadeOut, 25 );
    }
}        

fadeIn();

msg.onclick = function() { fadeOut(); }

Here's a jsFiddle demonstrating: http://jsfiddle.net/GgYS8/

so how would i integrate this with the php doc? would i just put the
in the index.html file, update the css file and include the javascript in the php as it is placed above? could i just use include "index.html" and include "index.css" in my php file? — , Sep 19 '12 at 20:49
The `
` above is the container for the message you want to display to the user. The Javascript can be placed in a ` — Ethan Brown, Sep 19 '12 at 21:13

custom php error message fadein

3 Answers3