JeuWeb - Crée ton jeu par navigateur
[Résolu][Ajax] Formulaire newsletter - Version imprimable

+- JeuWeb - Crée ton jeu par navigateur (https://jeuweb.org)
+-- Forum : Discussions, Aide, Ressources... (https://jeuweb.org/forumdisplay.php?fid=38)
+--- Forum : Programmation, infrastructure (https://jeuweb.org/forumdisplay.php?fid=51)
+--- Sujet : [Résolu][Ajax] Formulaire newsletter (/showthread.php?tid=2744)

Pages : 1 2 3

[Résolu][Ajax] Formulaire newsletter - Reaven - 25-09-2009

Bonjour,

Je suis actuellement en train de créer un site de graphisme afin de partager mes connaissances dans le domaine, et je bute sur une erreur de mon code Ajax concernant un formulaire de Newsletter.

Voici ce que ça donne:

Page oXHR.js:
Code :
function getXMLHttpRequest() {
    var xhr = null;
    
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest();
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
    
    return xhr;
}

Page du Formulaire:

Code :
<html>
<head>
<script type="text/javascript"></script>
<script type="text/javascript">
<!--
    function submitForm(email){
        var xhr= new getXMLHttpRequest();
        
        xhr.open("POST", "t_newsletter.php", true);
        xhr.onreadystatechange= function() {
            if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status== 0)) {
                if(document.getElementById){
                    if(xhr.responseText == 'true') { //envoi OK
                        document.getElementById("msg").innerHTML= "Inscription à la Newsletter réussie !";
                    }else{
                        document.getElementById("msg").innerHTML= xhr.responseText;
                    }
                }
            }
        }
    
        xhr.setRequestHeader('Content-type','application/x-www-form-unlencoded');
        xhr.send('Email='+email);
    }
//-->
</script>
</head>

<body>
        <form method="POST" action="" onsubmit="submitForm(this.email.value);return false">
            <div>Email:<input type="text" name="email" id="email"></div>
            <div><input type="submit" value="S'inscrire"/></div>
        </form>
        <div id="msg"></div>
</body>
</html>

Page de Traitement:
Code PHP :
<?php

session_start();

mysql_connect("localhost","","");

mysql_select_db("newsletter");



$erreurs= array(); //tableau des erreurs



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

    $erreurs[]= 'Veuillez entrer une adresse E-mail';

}



if(!preg_match("#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#", $_POST['email'])){

    $erreurs[]= 'Cette adresse E-mail est invalide';

}



if(count($erreurs) == 0){

    mysq_query("INSERT INTO newsletter VALUES('','".$_POST['email']."'")or die("L'envoi des données a échoué");

    echo "true";

}else{

    for($i=0; $i<count($erreurs); $i++){

        echo $erreurs[$i];

    }

}

?>

Je tiens à préciser que ce code peut bien sûr être amélioré, ce que je pensais faire une fois l'erreur déterminée.
Mon problème se pose en fait sur le traitement du contenu du champ "email". En fait aucune erreur ne s'affiche comme prévu dans le code Ajax et les données ne sont pas envoyées au serveur si le contenu du champ est bon.

Voilà en quoi consiste mon problème pour le moment.
J'espère que quelqu'un pourra m'aider à trouver la solution, et merci à tous ceux qui répondront à ce message.

Reaven

RE: Formulaire Newsletter [AJAX] - Maz - 25-09-2009

J'edit pour que ça reste entre nous.

RE: Formulaire Newsletter [AJAX] - Reaven - 25-09-2009

Ah super tu as mis le doigt sur une erreur (que je comprends par ailleurs et dont j'ai honte Big Grin). Cependant le problème persiste.
J'édite le premier poste et je continue à cherche en attendant d'autres propositions Smile.

Merci beaucoup.
Reaven

RE: Formulaire Newsletter [AJAX] - Maz - 25-09-2009

Si j'étais toi, je ciblerais l'erreur, là desuite je ne saurais pas te dire où elle est car j'utilise AJAX jamais directement mais à travers des librairie qui simplifies pas mal la chose. Il serais bon de vérifier si:
la fonction est bien appelé(un alert dans la fonction)
l'email est correctement envoyé au php(un echo dans le php de l'email avec un alert de xhr.responseText)

RE: Formulaire Newsletter [AJAX] - Reaven - 25-09-2009

En réalité je débute en AJAX et donc je me suis basé sur un tuto afin d'écrire ce code. J'ai vérifié plusieurs fois si le code concordais avec le tutoriel mais je n'ai rien vu.

Je mets tout de même le lien du tutoriel en question.

http://www.pc-infopratique.com/forum-informatique/formulaire-ajax-vt-31367.html

Je vais vérifier encore une fois la concordance.
Reaven.

RE: Formulaire Newsletter [AJAX] - Maz - 25-09-2009

(25-09-2009, 05:54 PM)Reaven a écrit : En réalité je débute en AJAX et donc je me suis basé sur un tuto afin d'écrire ce code. J'ai vérifié plusieurs fois si le code concordais avec le tutoriel mais je n'ai rien vu.

Je mets tout de même le lien du tutoriel en question.

http://www.pc-infopratique.com/forum-informatique/formulaire-ajax-vt-31367.html

Je vais vérifier encore une fois la concordance.
Reaven.

Ton code est pourtant différent étant donné que tu y a greffé la fonction getXMLHttpRequest qu'il n'utilises pas dans leur tuto, cette fonction permet la compatibilité avec plus de navigateurs (notamment IE qui utilises ActiveX au lieu des requête HTTP normalement utilisé par FF et les autres).
Je reboot mon nunux et j'essais de corriger ton code.
EDIT: D'ailleurs en parlant de cette fonction: tu ne la déclares pas avant de l'utiliser, le problème vient probablement de là, inclus la page oXHR.js ou c/c ce code:
Code :
<html>
<head>
<script type="text/javascript">
function getXMLHttpRequest() {
    var xhr = null;
    
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest();
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
    
    return xhr;
}
<!--
    function submitForm(email){
        var xhr= new getXMLHttpRequest();
        
        xhr.open("POST", "t_newsletter.php", true);
        xhr.onreadystatechange= function() {
            if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status== 0)) {
                if(document.getElementById){
                    if(xhr.responseText == 'true') { //envoi OK
                        document.getElementById("msg").innerHTML= "Inscription à la Newsletter réussie !";
                    }else{
                        document.getElementById("msg").innerHTML= xhr.responseText;
                    }
                }
            }
        }
    
        xhr.setRequestHeader('Content-type','application/x-www-form-unlencoded');
        xhr.send('Email='+email);
    }
//-->
</script>
</head>

<body>
        <form method="POST" action="" onsubmit="submitForm(this.email.value);return false">
            <div>Email:<input type="text" name="email" id="email"></div>
            <div><input type="submit" value="S'inscrire"/></div>
        </form>
        <div id="msg"></div>
</body>
</html>


RE: Formulaire Newsletter [AJAX] - Reaven - 25-09-2009

J'avais remarqué cet oubli et je l'ai corrigé. Cependant le noeud semble se dénouer. En effet après avoir corriger le code PHP je n'ai plus qu'une petite erreur d'index.

Voici le tout corriger:

Page oXHR.js:
Code :
function getXMLHttpRequest() {
    var xhr = null;
    
    if (window.XMLHttpRequest || window.ActiveXObject) {
        if (window.ActiveXObject) {
            try {
                xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch(e) {
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
        } else {
            xhr = new XMLHttpRequest();
        }
    } else {
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
    
    return xhr;
}

Page du Formulaire:
Code :
<html>
<head>
<script type="text/javascript" src="includes/oXHR.js"></script>
<script type="text/javascript">
<!--
    function submitForm(email){
        var xhr= new getXMLHttpRequest();
        
        xhr.open("POST", "t_newsletter.php", true);
        xhr.onreadystatechange= function() {
            if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status== 0)) {
                if(document.getElementById){
                    if(xhr.responseText == 'true') { //envoi OK
                        document.getElementById("msg").innerHTML= "Inscription à la Newsletter réussie !";
                    }else{
                        document.getElementById("msg").innerHTML= xhr.responseText;
                    }
                }
            }
        }
    
        xhr.setRequestHeader('Content-type','application/x-www-form-unlencoded');
        xhr.send('Email='+email);
    }
//-->
</script>
</head>

<body>
        <form method="POST" action="" onsubmit="submitForm(this.email.value);return false">
            Email:<input type="text" name="email" id="email">
            <input type="submit" value="S'inscrire"/>
        </form>
        <div id="msg"></div>
</body>
</html>

Page de Traitement:
Code PHP :
<?php

session_start();

mysql_connect("localhost","root","");

mysql_select_db("newsletter");



$mysql_query= mysql_query("SELECT email FROM newsletter");

$mysql_data= mysql_fetch_array($mysql_query);



$erreurs= array(); //tableau des erreurs

$email= $_POST['email'];



if(!empty ($email)){

    if(!preg_match("#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#", $_POST['email'])){

        $erreurs[]= 'Cette adresse E-mail est invalide';

    }else{

        if($_POST['email'] == $mysql_data['email']){

            $erreurs[]= 'Cette adresse E-mail existe déjà';

        }else{

            mysq_query("INSERT INTO newsletter VALUES('','".$_POST['email']."'")or die("L'envoi des données a échoué");

        }

    }

}else{

    $erreurs[]= 'Veuillez entrer une adresse E-mail';

}



if(count($erreurs) == 0){

    echo "true";

}else{

    for($i=0; $i<count($erreurs); $i++){

        echo $erreurs[$i].'<br/>';

    }

}

?>

Le dernier problème qui persiste vient du code php. Voici ce qui s'affiche lors de la validation du formulaire:

Citation :Notice: Undefined index: email in C:\Program Files\EasyPHP\www\FoxStudio\t_newsletter.php on line 10

Je précise que l'erreur s'affiche bien sous ce message Smile.

Merci à toi Maz pour ton aide et merci à ceux qui rejoindraient la conversation Smile.

Reaven

RE: Formulaire Newsletter [AJAX] - Maz - 25-09-2009

essai ça:
Code PHP :
<?php

session_start();

mysql_connect("localhost","root","");

mysql_select_db("newsletter");



$mysql_query= mysql_query("SELECT email FROM newsletter");

$mysql_data= mysql_fetch_array($mysql_query);



$erreurs= array(); //tableau des erreurs

$email= $_POST['Email'];



if(!empty ($email)){

    if(!preg_match("#^[a-z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$#", $_POST['email'])){

        $erreurs[]= 'Cette adresse E-mail est invalide';

    }else{

        if($_POST['email'] == $mysql_data['email']){

            $erreurs[]= 'Cette adresse E-mail existe déjà';

        }else{

            mysq_query("INSERT INTO newsletter VALUES('','".$_POST['Email']."'")or die("L'envoi des données a échoué");

        }

    }

}else{

    $erreurs[]= 'Veuillez entrer une adresse E-mail';

}



if(count($erreurs) == 0){

    echo "true";

}else{

    for($i=0; $i<count($erreurs); $i++){

        echo $erreurs[$i].'<br/>';

    }

}

?>


RE: Formulaire Newsletter [AJAX] - Reaven - 25-09-2009

Qu'est-ce que tu as changé ?

RE: Formulaire Newsletter [AJAX] - Maz - 25-09-2009

Là est tout le secret.