Rendre input disponible en fonction d'un div

6 octobre 2009 à 18:30:59

Bonjour à tous !
Je viens poser mon problème en espérant que vous aurez le temps de m'aider.

Je suis entrain de programmer un formulaire d'inscription avec BDD et tout.
L'utilisateur rentre ça date de naissance. Grâce à AJAX je vérifie si cette date est valide (histoire de ne pas être né un 31 février). Si la date est valide j'affiche dans un <div> une petite image qui dit que la date est valide. Et je voudrais alors faire apparaitre un bouton submit pour envoyer la requête dans la BDD. Mais je n'arrive pas a vérifier ce qui se trouve dans le <div>.

voici mon code :

inscription.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <title>Nouveau Membre</title>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
					
		<script type="text/javascript">
		function ajax_verifdate(str1,str2,str3)
		{
		var xhr;
		try {
		xhr=new XMLHttpRequest;
		}
		catch(e)
		{
		xhr=new ActiveXObject("Microsoft.XMLHTTP");
		}
		xhr.onreadystatechange=function()
		{
		if(xhr.readyState==4)
		{
		document.getElementById('verifdate').innerHTML = xhr.responseText;
		}
		}
		var url="verifdate.php";
		url=url+"?jour="+str1+"&mois="+str2+"&an="+str3;
		xhr.open("GET",url,true);
		xhr.send(null);
                }
</script>
					
    </head>
<body>

<form name="formulaire" action="inscription.php" method="post">
<label for="inscription_naissance">Date de Naissance</label> : 
<em><label for="jour">Jour</label></em> :
<select name="jour" id="jour" OnChange="ajax_verifdate(this.value, document.formulaire.mois.value,document.formulaire.an.value);">
	<?php
	for ($cpt = 1; $cpt <= 31; $cpt++)
	{
	echo '<option value="'.$cpt.'">'.$cpt.'</option>';
	}
	?>
</select>

<em><label for="mois">Mois</label></em> :
<select name="mois" id="mois" OnChange="ajax_verifdate(document.formulaire.jour.value,this.value, document.formulaire.an.value);">
	<?php
	for ($cpt = 1; $cpt <= 12; $cpt++)
	{
	echo '<option value="'.$cpt.'">'.$cpt.'</option>';
	}
	?>
</select>

<em><label for="an">Année</label></em> :
<select name="an" id="an" OnChange="ajax_verifdate(document.formulaire.jour.value, document.formulaire.mois.value,this.value);"> 
	<?php
	for ($cpt =2009 ; $cpt >= 1900; $cpt--)
	{
	echo '<option value="'.$cpt.'">'.$cpt.'</option>';
	}
	?>
</select>
<div id='verifdate'> <img src="images/theme_vert/accept.png" alt="date valide" title="Cette date est valide !" /></div>
<div id='validation'>  </div>
</form>
    </body>
</html>

verifdate.php

<?php

$str1=$_GET['jour'];
$str2=$_GET['mois'];
$str3=$_GET['an'];

$result = checkdate($str2,$str1,$str3);

  if( $result == true )
  {
      echo '<img src="images/theme_vert/accept.png" alt="date valide" title="Cette date est valide !" />';
  }
  else
  {
      echo '<img src="images/theme_vert/cancel.png" alt="date invalide" title="Cette date est invalide !" />';
  }
?>

J'ai bien essayer dans ma function verifdate de rajouter la condition suivante :

if(document.getElementById('verifdate').innerHTML == '<img src="images/theme_vert/accept.png" alt="date valide" title="Cette date est valide !" />')

et alors d'afficher dans le <div id='validation'> ça : <input type="image" src="images/theme_vert/valider.jpg" alt="valider" title="Clique pour valider !" />.

Mais ça ne marche pas. Toute autre remarque sera également la bienvenue.
La rubrique "Comment récupérer/modifier le contenu d'un élément (DIV par exemple) ?" dans la FAQ ne m'a pas aider.

Merci de votre aide

TrexXx

6 octobre 2009 à 18:38:49

Tu n'as pas besoin de PHP (et donc encore moins de AJAX) pour vérifier qu'une date est valide, tu peux très bien le faire en Javascript directement. Tu écris une fonction pour ca et si elle retourne true alors tu actives ton bouton submit, sinon tu le laisse désactiver.

VdkBULL

6 octobre 2009 à 18:55:22

En faite c'est qu'ici j'ai parlé de la date mais il y'a plusieurs conditions.
-une date valide (donc ajax pas nécessaire)
-un pseudo non utilisé (ajax nécessaire ou alors je sais pas faire autrement)
-taper 2 fois le même mot de passe
-adresse e-mail non utilisé et de forme valide

Et donc quand la personne a rempli ces 4 conditions y'a 4 petites images qui sont placées dans des <div> qui signifient que c'est OK et c'est à ce moment là que je veux que le bouton "valider" apparaisse. J'espère que vous m'avez suivit !
Donc si je sais le faire pour 1, et bien je saurai le faire pour mes 4 conditions !
merci

VdkBULL

9 octobre 2009 à 18:57:19

Quelqu'un pour me filer un coup de main ?
merci

TrexXx

9 octobre 2009 à 20:29:19

Tiens ça devrai t'aider :

Index.php :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
    <head>
        <title>Bienvenue sur mon site !</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
        <script type="text/javascript" src="prototype.js"></script>
        <script type="text/javascript" src="form.js"></script>
    </head>
    <body>
        <div id="messages">

        </div>
        <form action="index.php" method="post" id="formulaire">
            <p>
                <label for="pseudo">Pseudo</label>
                <input type="text" name="pseudo" id="pseudo" />
                <input type="button" id="verifier_pseudo" value="Verifier que le pseudo est correst" />
                <img class="verif" src="images/erreur.png" alt="erreur" />
            </p>

            <p>
                <label for="password">Password : </label>
                <input type="password" name="password" id="password" />
                <img class="verif" src="images/erreur.png" alt="erreur" />
            </p>

            <p>
                <label for="confirmation_password">Confirmation password : </label>
                <input type="password" name="confirmation_password" id="confirmation_password" />
                <img class="verif" src="images/erreur.png" alt="erreur" />
            </p>

            <p>
                <label for="email">E-mail : </label>
                <input type="text" name="email" id="email" />
                <input type="button" id="verifier_email" value="Verifier que le mail est valide et non utilisé" />
                <img class="verif" src="images/erreur.png" alt="erreur" />
            </p>

            <p>
                <input type="submit" value="Envoyer" disabled="true" id="submit" />
            </p>
        </form>
    </body>
</html>

form.js :

Event.observe(window, 'load', initEvent);

var ok = [false, false, false, false];

function initEvent()
{
    Event.observe('verifier_pseudo', 'click', pseudo_verifierClick);
    Event.observe('password', 'keyup', passwordKeyup);
    Event.observe('confirmation_password', 'keyup', passwordKeyup);
    Event.observe('verifier_email', 'click', verifier_emailClick);
}

function pseudo_verifierClick()
{
    if ($F('pseudo').length != 0) {
        new Ajax.Request('pseudo.php', {
            method: 'post',
            postBody: $H({pseudo: $F('pseudo')}).toQueryString(),

            onSuccess: function(transport)
            {
                if (transport.responseText == 'true') {
                    $$('.verif')[0].src = 'images/valide.png';
                    ok[0] = true;
                }
                else {
                    $$('.verif')[0].src = 'images/erreur.png';
                    ok[0] = false;
                }
            },

            onFailure: function()
            {
                $$('.verif')[0].src = 'images/erreur.png';
                ok[0] = false;
            }
        });
    }
    else {
        ok[0] = false;
    }

    verifierSubmit();
}

function passwordKeyup()
{
    if ($F('password') == $F('confirmation_password')) {
        $$('.verif')[1].src = 'images/valide.png';
        $$('.verif')[2].src = 'images/valide.png';

        ok[1] = true;
        ok[2] = true;
    }
    else {
        $$('.verif')[1].src = 'images/erreur.png';
        $$('.verif')[2].src = 'images/erreur.png';

        ok[1] = false;
        ok[2] = false;
    }

    verifierSubmit();
}

function verifier_emailClick()
{
    new Ajax.Request('email.php', {
        method: 'post',
        postBody: $H({email: $F('email')}).toQueryString(),

        onSuccess: function(transport)
        {
            if (transport.responseText == 'true') {
                $$('.verif')[3].src = 'images/valide.png';
                ok[3] = true;
            }
            else {
                $$('.verif')[3].src = 'images/erreur.png';
                ok[3] = false;
            }
        },

        onFailure: function()
        {
            $$('.verif')[3].src = 'images/erreur.png';
            ok[3] = false;
        }
    });

    verifierSubmit();
}

function verifierSubmit()
{
    var bool = true;

    for (var i = 0; i < ok.length; i++) {
        if (ok[i] == false) {
            bool = false;
        }
    }

    if (bool == true) {
        $('submit').disabled = false;
    }
    else {
        $('submit').disabled = true;
    }
}

pseudo.php :

<?php
    if (isset($_POST['pseudo']))
    {
        $pseudo = $_POST['pseudo'];
        $pdo = new PDO('mysql:host=localhost;dbname=test', 'root', '');
        $query = $pdo->prepare('select count(*) as nbre_pseudo from utilisateur where pseudo=:pseudo');
        $query->execute(array(':pseudo' => $pseudo));
        $query = $query->fetch();

        if ($query['nbre_pseudo'] == 0)
        {
            echo 'true';
        }
        else
        {
            echo 'false';
        }
    }
?>

email.php :

<?php
    if (isset($_POST['email']))
    {
        $email = $_POST['email'];

        if (filter_var($email, FILTER_VALIDATE_EMAIL) != false)
        {
            $pdo = new PDO('mysql:host=localhost;dbname=test', 'root', '');
            $query = $pdo->prepare('select count(*) as nbre_email from utilisateur where email=:email');
            $query->execute(array(':email' => $email));
            $query = $query->fetch();

            if ($query['nbre_email'] == 0)
            {
                echo 'true';
            }
            else
            {
                echo 'false';
            }
        }
        else
        {
            echo 'false';
        }
    }
?>

TrexXx