8796 sujets

Développement web côté serveur, CMS

Créer une barre de progression pour Formulaire

Bonjour tout le monde,

Je voudrais créer une barre de progression.

J'aimerais que cette barre de progression progresse par rapport au remplissage d'un formulaire.

Est-ce possible de faire cela en PHP ou en AJAX ?

Auriez-vous une piste svp en évitant jquery ?

Merci d'avance.

beegees
Bonjour,

C'est un formulaire sur une page ou multipage ? Si tu dis sans jQuery c'est sans aucun autre framework JS également (par pure curiosité, pourquoi sans jQuery d'ailleurs ?) ?
Bonjour,

Merci pour ta réponse.

Alors, pas jquery car il y a une progressbar qui existe mais je me demande si le formulaire qui accompagne cette barre ne doit pas être écrit aussi en jquery (mon formulaire est déjà écrit).

J'ai commencé une création en carton qui commence à fonctionner mais je suis encore loin du but :


<body>
	<div id="progress-bar">  
	
		<div id="progress-bg"><span id="progress">0%</span></div>  
	</div> 
	<input type="button" onclick="progression()" />
	
</body>


Donc deux divs imbriquées

à ceci je lis mon style CSS :

#progress-bg
{
	width:50%;
	border:dotted;
	color:#000000;
}


Et du code javascript :


function progression()
{
	var i=prompt("valeur de i ?");
	//nombre de boutons radio à cocher
	var nb_forms = 58;
	var div_width = ((i/nb_forms) * 100);
	//alert(div_width);
	document.getElementById('progress-bg').style.width = div_width + '%'; 
	document.getElementById('progress').innerHTML = Math.floor(div_width) + '%'; 
}


C'est un début.

Si vous avez des idées, je suis preneur.

Merci encore.

beegees
Tu n'as pas répondu à une des questions : une seule page ou multipage ?

Si c'est multipage et que ta barre doit se remplir en fonction du nombre de pages, pourquoi ne pas mettre simplement une barre qui se multiplie en fonction du numéro de pages ?
page 1 -
page 2 --
page 3 ---

Parce que si c'est dans la page même et sans javascript, là je vois pas.
Ah oui, désolé, sur une page.

Je suis occupé sur une solution qui commence à fonctionner.

Merci pour ton aide.

beegees

PS: ton idée sur le nombre de pages est géniale au moment où c'est sur plusieurs pages
Salut,

un exemple de solution :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
#progress-bg 
{ 
    width:10%; 
    border:dotted; 
    color:#000000;
	display: none;
} 
</style>
</head>
<body>
<form action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>" method="post" id="monform">
	<p>Couleur : 
		<input type="radio" name="couleur" id="couleur1" value="noir" />
		<label for="couleur1">Noir</label>
		<input type="radio" name="couleur" id="couleur2" value="blanc" />
		<label for="couleur2">Blanc</label>
		<input type="radio" name="couleur" id="couleur3" value="bleu" />
		<label for="couleur3">Bleu</label>
	</p>
	<p>Age : 
		<input type="radio" name="age" id="age1" value="15" />
		<label for="age1">15 ans</label>
		<input type="radio" name="age" id="age2" value="20" />
		<label for="age2">20 ans</label>
		<input type="radio" name="age" id="age3" value="25" />
		<label for="age3">25 ans</label>
	</p>
	<p>Distance : 
		<input type="radio" name="distance" id="distance1" value="50" />
		<label for="distance1">50 km</label>
		<input type="radio" name="distance" id="distance2" value="100" />
		<label for="distance2">100 km</label>
		<input type="radio" name="distance" id="distance3" value="150" />
		<label for="distance3">150 km</label>
	</p>
	<p>
		<input type="submit" />
	</p>
</form>

<div id="progress-bg"><span id="progress">0%</span></div>   

<script type="text/javascript">

// fonction addEvent
function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         oElem['on' + sEvType] = fn;
}

// fonction progressBar
function progressBar()
{
	// si les méthodes du DOM n'existent pas, on sort...
	if(!document.getElementById || !document.getElementsByTagName)
	{
		return;
	}

	// pour chaque INPUT...
	var afficherBarre = false;
	var lInputs = document.getElementById('monform').getElementsByTagName('input');
	for(var bouton = 0; bouton < lInputs.length; bouton++){
		var oElement = lInputs[bouton];
		// Si bouton radio...
		if(oElement.type == 'radio') {
			afficherBarre = true;
			// on affecte sur le onclick l'appel de 'progression'
			addEvent(oElement, 'click', progression, false);
		}
		// on affiche la barre
	}
	if (afficherBarre) {
		document.getElementById('progress-bg').style.display = 'block';
	}
}

function progression() 
{
	var totalBoutons = 0;
	var totalBoutonsCoches = 0;
	var nameBouton = '';
	
	// pour chaque INPUT...
	var afficherBarre = false;
	var lInputs = document.getElementById('monform').getElementsByTagName('input');
	for(var bouton = 0; bouton < lInputs.length; bouton++){
		var oElement = lInputs[bouton];
		// Si bouton radio...
		if(oElement.type == 'radio') {
			// on compte le nombre total
			if(oElement.name != nameBouton) {
				nameBouton = oElement.name;
				totalBoutons++;
			}
			// ce bouton est-il coché ?
			if(oElement.checked) {
				totalBoutonsCoches++;
			}
		}
	}

    var div_width = ((totalBoutonsCoches/totalBoutons) * 100); 
    document.getElementById('progress-bg').style.width = div_width + '%';  
    document.getElementById('progress').innerHTML = Math.floor(div_width) + '%';  
} 

// Initialisation sur le onload
addEvent(window, 'load', progressBar, false);

</script>
</body>
</html>
Plutôt que d'ouvrir un nouveau topic, je me permet de relancer celui-ci.

Je cherche à créer une page de progression qui se remplit au fur et à mesure que l'internaute remplit le formulaire (qui tient en une seule page)

J'utilise la librairie jQuery, mais je n'ai pas encore trouvé de solution...
J'aimerais éviter d'utiliser jQueryUI et son plugin progress bar car c'est dommage de charger une aussi grosse librairie pour si peu de chose.

Un article intéressant :
JQuery Progress Bar 1.1
Modifié par Julien Vernet (30 Oct 2010 - 12:51)
Pour jquery ui tu peux customiser ce que tu veux télécharger dans la page download et n'avoir que le widget et le thèmes qui te suffisent.
Je n'ai toujours pas trouvé LA solution...
Pour la représentation graphique, oui, mais pour ce qui est du pourcentage de progression, pas du tout.

Auriez-vous des indices? Des pistes?

Je n'ai rien trouvé sur le net pour afficher ratio [nombre de champs remplis]/[nombre de champs total]
Tu dois savoir d'avance combien de champs il faudra remplir.

Ensuite tu vérifie la valeur de chacun des champs, si valeur != '' par exemple, tu incrémente de un une variable définie au préalable indiquant le nombre de champs remplis.
Ensuite un petit calcul très simple pour obtenir le pourcentage et c'est réglé.
Je ne savais pas que javascript était un langage côté serveur Smiley biggol
Faudrait peut-être commencer par poster au bon endroit...
Salut,

zounounous a écrit :
Je ne savais pas que javascript était un langage côté serveur
Faudrait peut-être commencer par poster au bon endroit...
C'est bien vrai.

D'autant plus qu'en créant ton propre sujet tu pourras le passer en [résolu] lorsqu'il sera... résolu et que cela simplifie les recherches ultérieures d'avoir une et une seule question par sujet. Smiley murf
Sujet clos
Aller à