prompt

Sujet résolu

18 août 2010 à 13:12:15

Bonjour,
Mon probleme du jour est :
J'aimerais pouvoir me débarasser de la fonction prompt dans mon script, la fenetre qui s'ouvre m'énerve.

Pour ce faire je souhaite placer les 3 éléments html suivants (une zone où l'utilisateur rentre son texte - un bouton valider pour envoyer ce texte - et une zone "de resultat" où le script affiche une réponse)

<input type="text" name="texte"  id="texte" value="écrivez ici!"/>
<input type="button" value="envoyer" id="envoyer" >
<div id="outerDisplay" width="800" height="500"></div>

J'ai donc une première fonction qui permet de lire la zone de texte pour l'afficher dans le outerDisplay :(que l'on active avec la fonction onclick par exemple)

function envoyer_texte()
{
var coucou=document.getElementById("texte").value;
document.getElementById("outerDisplay").innerHTML="vous avez rentré la valeur : "+coucou;
return coucou;
}

J'aimerais créer une fonction date() qui demande à l´utilisateur de rentrer une année, un mois et un jour (avec des conditions sur ces infos) et qui retourne le resultat dans un tableau.
Avec la fonction prompt j'avais le script suivant :

function date()
{
	var annee;
	do{

		annee= prompt("entrez année");
	}	
        while(!(annee>=2004 && annee<=2010));
	var mois;
	do
	{
		mois=prompt("entrez mois");
	}
	while (!(mois>=1 && mois<=12))
	
	var jour;
	var bool=true;
	do
	{
	jour=prompt("entrez jour");
	if((mois==2 && jour>28)||((mois==4||mois==6||mois==9||mois==11)&&jour==31))//prend pas en compte année bissextile
		bool=false;
	else
		bool=true;
	}
	while(!(jour>=1 && jour<=31 && bool==true))
	
	var date = new Array(jour,mois,annee);	
	alert("La date choisie est le :\n"+date[0]+" / "+date[1]+" / "+date[2]);

	return date;
}

Mon gros probleme se trouve au niveau des conditions lorsque l'on utilise pas de prompt. J'avais commencer à écrire :

function date()
{
do{
  document.getElementById("outerDisplay").innerHTML="entrez l'année souhaitée (entre 2004 et 2010)";
  var clique=document.getElementById('envoyer');
  clique.onclick=envoyer_texte;
  var annee=clique.onclick;
}
while(!(annee>=2004 && annee<=2010));
}

Evidement, cela ne marche pas, la boucle ne se fini pas et n'attend pas que je clique sur envoyer pour se lancer et je ne suis meme pas sûr que sans la boucle il y ai quelquechose dans la variable annee(pour pas dire que je suis sûr que il n'y a rien qui fonctionne).

Avez vous des idées pour créer ce petit "équivalent" de prompt?

LCaba

18 août 2010 à 14:52:42

La principale différence entre les boîtes de dialogues natives et les boîtes de dialogues personnalisées, c'est que les premières arrêtent l'exécution du script en attendant la saisie de l'utilisateur, ce qui impossible à faire avec des boîtes de dialogues personnalisées.

Exemple :

var a = promt('Entrez quelque chose');
alert(a);

Ici, le script s'arrête en attendant que l'utilisateur entre quelque chose, puis l'affiche. Maintenant, on voudrait une boit personnalisée. Il n'est pas possible de faire ceci :

var a = boiteSaisiePerso('Entrez quelque chose');
alert(a);

Car la fonction boiteSaisiePerso() sera exécuter en entier sans attendre la saisie de l'utilisateur. Il faut donc passer par une fonction de callback, c'est à dire une fonction qui sera appelé lorsque l'utilisateur validera sa saisie :

var a;
function callback(resultat){
     alert(resultat);
}
boiteSaisiePerso('Entrez quelque chose',callback);

La fonction boiteSaisiePerso() pourrait ressembler à ceci :

function boiteSaisiePerso(texte,callback){
    var boite = document.createElement('div'),
        s = boite.style; // Pour raccourcir je sauvegarde l'objet boite.style dans une variable

    s.position = 'absolute';
    s.width = '400px';
    
    // Ici je vais bourriner un peu pour que ça soit plus clair :
    bouite.innerHTML = texte + '<input type="text id="saisie" /><br /><input type="button" value="valider" id="bouton_valider">';

    document.body.appendChild(boite); // On affiche la boite de dialogue

    document.getElementById('bouton_valider').onclick = function(){
        boite.parentNode.removeChild(boite); // On enlève la boite de dialogue
        callback(document.getElementById('saisie').value);
    }
    
}

Ca peut faire peur au début tout ce qu'il faut faire pour une simple boite de dialogue, mais si te débrouille bien tu mets tout ça dans un objet, et ça devient beaucoup plus simple. Tu peux aussi utiliser un framework comme mootools ou jquery qui inclut des objets du type lightbox.

Cabinet vétérinaire à Angers

plimo

20 août 2010 à 15:18:40

Malgré mes tentatives de bidouilles pour faire marcher ces codes, on dirait vraiment que je suis nul...

Bien que cela marche tres bien pour afficher le texte rentrer etc, je n'arrive toujours pas à faire stopper ma boucle en while le temps d'appliquer la fonction....

J'ai deja modifié un peu la fonction callback pour ne pas avoir de alert non plus...

function callback(resultat){
  document.getElementById("outerDisplay").innerHTML="vous avez rentré la valeur : "+resultat;
  return resultat;
}

mais je sais vraiment pas comment faire pour rentrer ces codes dans ma boucle pour qu'ils soient lus avant que la boucle ne tourne "en boucle"...

function date()
{
	var annee;
	do{
		document.getElementById("outerDisplay").innerHTML="entrez l'année souhaitée (entre 2004 et 2010)";
                var annee=callback(resultat);
                boiteSaisiePerso('Entrez quelque chose',callback);
	}
	while(!(annee>=2004 && annee<=2010));		
	

//suite de la fonction...
}

Si il pouvait y avoir une réexplication, ce serait cool...

Citation

Tu peux aussi utiliser un framework comme mootools ou jquery qui inclut des objets du type lightbox.

=>Je dois deja me mettre à Ajax et Dojo avant (qqs connaissances necessaires pour un stage... :-°

)

HS: est ce que il existe l'equivalent de :

-moz-border-radius : 10px;

qui marche sur d'autres navigateurs que firefox?(sans passer par des codes supers longs et compliqués comme j'ai pu en trouver...)

LCaba

20 août 2010 à 23:35:13

T'as pas bien compris le principe. À la ligne 6 tu appelles la fonction de callback mais il ne faut pas. C'est la fonction boiteSaisiePerso() qui appelle cette fonction une fois la saisie validée.
Ta callback reçoit en argument la saisie de l'utilisateur. Dans cette callback, tu vérifie la variable résultat, si elle correspond à tes attentes, tu fais ton traitement, sinon tu appelle de nouveau boiteSaisiePerso() :

date(){
    boiteSaisiePerso('Entrez quelque chose',afficheResultat);
}

afficheResultat(saisie){
    if(!(annee>=2004 && annee<=2010)){
        boiteSaisiePerso('Entrez quelque chose',afficheResultat);
    }else{
        document.getElementById("outerDisplay").innerHTML="vous avez rentré la valeur : "+resultat;
    }
}

Cabinet vétérinaire à Angers

prompt

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.

× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.

prompt

prompt

Supprimer

Modérer

Signaler le message aux modérateurs