Forum d'entraide PHPFrance

Bonjour,

je souhaiterais créer un formulaire avec un affichage dynamique, en ajax, mais étant novice j'aurais besoin d'aide et de conseils dans ce domaine... Je vous explique, j'ai un formulaire qui se compose en 3 parties :

1ère partie, des sommes :
2ème partie, des cadeaux associés :
3ème partie, un autre choix divers :
Je souhaiterais donc créer un formulaire en Ajax qui tienne compte de deux choses dynamiquement, sans rechargement de la page :
1/ Quand le radio "somme" = 7000 est cliqué, le radio "cado" associé se bloque sur 0 et le div "option" se cache.
2/ Quand je clique sur un radio "somme" supérieur à 9000, le radio "divers" se bloque automatiquement sur choix3 et le div "desc" se cache.

Comment dois-je m'y prendre ? Pouvez-vous m'aider à réaliser ce script ?

karty

Bonsoir ,

point d'ajax pour faire quelque chose comme ça ... restons simple

Changer l'etat d'éléments dans une page suite à un clique , ou changer le style peut trés bian se faire avec du simple javascript , sans avoir à faire de requête au serveur ....

Ton problème est donc comment faire mon script js ..

As tu des connaissances avec ce langage , ( pas besoin d'être expert pour faire ce que tu souhaites )

Pour commencer , regarde du coté des evenement

onclick, onchange ect ...

ensuite , pour afficher cacher un div par exemple .. le net fourmille d'exemples ..
Par exemple:
http://www.editeurjavascript.com/script ... _3_812.php
http://www.journaldunet.com/developpeur ... cher.shtml
http://www.kilasoft.net/modules/pages/i ... pagenum=84

Tu devrais donc facilement trouver ton bonheur ...

Bonsoir stopher,

merci beaucoup pour ta réponse. J'ai pris soin de chercher et j'ai effectivement trouvé des choses très intéressantes.

Le problème, c'est que si j'arrive (grace au onclick et à la fonction afficheId/cacheId) à masquer/afficher le formulaire que je souhaite, celà ne modifie pas le choix par default du radio. C'est à dire qu'une option peut être coché, mais masquer à cause du hidden par la suite, et celà fausse un petit peu la bonne conduite du formulaire car une valeur est coché sans etre visible.

Je souhaiterais donc rajouter une fonction qui ferait un checked automatique dans une liste radio (est-ce possible sans ajax ?) sur une valeur (par ex: value="0") dans un input (id="divers") précis ??? Peux-tu m'aider à configurer ce genre de script, car je suis novice en javascript ?

Pour modifier la valeur d'un input ,

http://www.toutjavascript.com/savoir/savoir06_2.php3

Un peu de recherche ....

Commence ton code , et si tu bloques , n'hésite pas à poster

Merci encore pour ce lien... J'ai testé plusieurs solutions évoquées sur cette page dans le onclick ou en fonction, mais je n'arrive pas à les mettre en place sur la liste radio pour que ça marche, en autres :
ou
Que dois-je développer de plus ?

Montre nous le code complet ..

formulaire et script js ...

Voilà le code complet...
[javascript]<style>
.contenant2 {
visibility:hidden;
}
</style>
<script>
function afficheId(baliseId)
{
if (document.getElementById && document.getElementById(baliseId) != null)
{
document.getElementById(baliseId).style.visibility='visible';
document.getElementById(baliseId).style.display='block';
}
}

function cacheId(baliseId)
{
if (document.getElementById && document.getElementById(baliseId) != null)
{
document.getElementById(baliseId).style.visibility='hidden';
document.getElementById(baliseId).style.display='none';
}
}
</script>
[/javascript]
Sur la page :
[javascript]<form id="form" action="test.php" method="post">

<input name="somme" type="radio" value="7000" onclick="cacheId('contenu');cacheId('contenu2');" />
<input name="somme" type="radio" value="9000" checked="checked" onclick="afficheId('contenu');cacheId('contenu2');" />
<input name="somme" type="radio" value="15000" onclick="afficheId('contenu');cacheId('contenu2');" />
<input name="somme" type="radio" value="20000" onclick="afficheId('contenu');cacheId('contenu2');" />
<input name="somme" type="radio" value="25000" onclick='afficheId("contenu");cacheId("contenu2");this.form.divers.value="CB";' />
<input name="somme" type="radio" value="30000" onclick="afficheId('contenu');afficheId('contenu2');" />

<div id="contenu">
<input name="cado" type="radio" value="0" /><br />
<input name="cado" type="radio" value="1" /><br />
<input name="cado" type="radio" value="2" />
</div>

<div class="desc">
<input name="divers" type="radio" value="cheque" /> cheque<br />
<input name="divers" type="radio" value="CB" /> CB<br />
<div class="contenant2" id="contenu2">
<input name="divers" type="radio" value="other" />
</div>
</div>
<input type="submit" />

</form>[/javascript]
Et c'est donc la partie (this.form.divers.value="CB";) qui ne marche pas...

this correspond ici à l'element courant , donc le "input" et non le formulaire ...

si tu veux checker divers cb , tu peux faire comme ceci :

Tu modifies le code de l'input en ajoutant un id:
<input name="divers" id="diversCB" type="radio" value="CB" /> CB

Puis ton code js sera comme ceci :

document.getElementById('diversCB').checked = true;

D'accord, merci beaucoup pour ton aide, très efficace, et ça me permet d'apprendre en développant. Vraiment cool. =D>

Je continue l'avancée du formulaire, donc je me dis qu'au lieu de créer de multiples sujets, autant continuer à poster ici, surtout que le titre du topic est approprié...

Je souhaite désormais vérifier des données de manière instantané, par exemple pour s'assurer qu'un email ou un pseudo est libre dans une base de données, et l'afficher dynamiquement en ajax. Malheureusement, le code n'a pas l'air de marcher, je vous montre :

Le script dans head:
[javascript]
<script>
$(document).ready(function(){
//on affiche les bonne cotisation
cotisations();

//au focus mail on vide l'information
$("#email").focus(function(){
$("#verifemail").empty();
});
//quand on sort si email n'est pas vide vérification
$("#email").blur(function(){
if($("#email").attr("value")!="")
{
$.ajax({
type: "GET",
url: "verifmail.php?mail="+$("#email").attr("value"),
success:function(data){
$("#verifemail").append(data);
}
});
}
else
{
$("#verifemail").append("L'email ne peux pas etre vide");
}
});

});
</script>
[/javascript]

La suite de la page avec le formulaire :
[javascript]
<form action="test.php" method="post" name="formulaire" id="formulaire">

<input name="email" id="email" type="text" maxlength="50">
<span id="verifemail"></span>

</form>
[/javascript]

La page de vérification php

<?php
if(isset($_GET["mail"]))
{
// connexion à la base de données

  $req_verif_mail="SELECT id FROM membres WHERE email='".htmlspecialchars($_GET["email"])." '";
  $verif_mail=mysql_query($req_verif_mail) or die(mysql_query);
  if(mysql_num_rows($verif_mail)>0)
  {
		echo "Déjà un compte existant";
  }
  else
  {
		echo "Ok lets go";
  }
}
else
{
	  echo "Erreur";
}
?>

Quelqu'un sait d'où vient l'erreur ? Est-ce que ce genre de script est correct, y'a-t-il mieux ? Je ne trouve pas l'erreur ?

Merci d'avance de vos conseils.