Formulaire données aditionnée

13 janv. 2010, 12:45

Bonjour,
Je souhaite faire une page avec du code au plus simple.
Je veux faire un petit formulaire avec deux champs texte nom et age. Du type :

Code : Tout sélectionner

<html>
<head>
<title>l'âge de la famille</title>
</head>

<body>
<FORM method="POST" action="même-page">
            Votre prénom 
          <INPUT type="text" name="sender_name" size=25>

Votre age  
  <INPUT type="text" name="sender_email" size=15>

        
              <INPUT type="submit" value="valider">
    </div>
</FORM>
</body>
</html>

quand je clique sur valider je souhaite que le nom et l'age de la personne soit ajouté à chaque fois et qu'en plus il y ait le cumul des ages des personnes. Par exemple je veux pouvoir cumuler les personnes :

Marco 12 ans
Bernadette 95 ans
Robert 58 ans
Lola 4 ans

Age cumulé de la famille : 169 ans

Le but est de voir apparaitre les nouvelles personnes en plus et de voir l'évolution de l'âge cumulé sur la même page... et de pouvoir en rajouter

Je ne sait pas trop comment faire, si vous pouvez m'aider, Merci d'avance

13 janv. 2010, 16:38

Salut,

Souhaites-tu garder les données saisies lorsque la page sera fermée ou la page doit-elle redevenir vierge à son chargement ?
S'il faut conserver les données, tu dois les enregistrer quelque-part (une base de données ou un simple fichier fera l'affaire).
Par contre, si tu cherches à simplement ajouter le texte sur la page à chaque validation, le javascript est ton ami.

13 janv. 2010, 18:48

En fait je ne cherche pas à garder les données si on sort de la page. le javascript est peut-être la solution la plus simple.
Par contre l'idée du .txt m'intéresse aussi, mais je n'ai pas trouvé de tuto pour mettre les données sur cette page .txt et pour récupérer les données d'un .txt
Je suis preneur dans les 2 cas, Merci

13 janv. 2010, 22:36

Au plus simple je ferais plutôt ça en php. Et ce sera aussi plus facilement évolutif s'il s'agit ensuite de mémoriser les résultats en bdd
Les formulaires sont bien expliqués pour un débutant à cette adresse http://www.phpdebutant.org/ colonne de droite. Pour lire ou enregistrer les résultats dans une bdd, c'est une bonne base aussi.
Par contre pour lire et écrire dans un fichier texte, il y a maintenant souvent plus simple avec file_get_contents et file_put_contents.

14 janv. 2010, 00:21

Lorsque l'on met des données dans un fichier .txt ou un bdd, les données que l'on stocke finissent par faire un volume important. Y-a-t-il un moyen de supprimer automatiquement les données lorsqu'on en a besoin sur du court terme ou est-ce que la place est tellement énorme qu'on s'en fout ?
Merci

14 janv. 2010, 00:58

je dirais, la place est énorme ... mais si ça ne sert à rien, autant nettoyer de temps en temps ...

que tu opte pour un fichier txt ou pour une BDD, tu pourra toujours faire le ménage, le plus souvent on emploi des fichiers textes pour créer des archives et les bdd pour la manipulation régulière (en tout cas, c'est comme ça que moi je m'en sert

)

pour une BDD, il te suffit de mettre un champs DATETIME, et lorsque tu veux faire le ménage, tu supprimme tous les éléments antérieur à une date de référence ...
Pour un Fichier Text, tu a de nombreuses sollutions aussi, mettre des reperes comme les date au début de chaque lignes (à l'image des logs) ou créer un fichier tous les mois, ainsi tu peux télécharger tes archives tous les mois, et les stocker ...

Beaucoup de choses sont possible

14 janv. 2010, 11:33

Je te propose cette solution en Javascript :
(fait à l'arrache mais testé sous IE et Firefox)

<html>
<head>
<script language="Javascript" type="text/javascript">
var cumul = 0;

function add()
{
	var prenom = document.getElementById("prenom").value;
	var age = document.getElementById("age").value;
	cumul = cumul + parseInt(age);
	document.getElementById("cumul").innerHTML = "Age cumulé de la famille : "+cumul+" ans";
	document.getElementById("ajout").innerHTML += "<strong>"+prenom+" "+age+" ans</strong><br />";
}
</script>
<title>l'âge de la famille</title>
</head>
<body>

<div style="position:absolute;left:300px;top:100px;">
<center>
	<label for="prenom">Votre prénom </label><input type="text" id="prenom" size="25" />
	<br />
	<label for="age">Votre age </label><input type="text" id="age" size="15" />
	<br /><br />
	<button onclick="add();">Valider</button>
</center>
</div>
<div id="ajout" style="position:absolute;left:300px;top:250px;"></div>
<div id="cumul" style="position:absolute;left:500px;top:250px;color:blue;"></div>

</body>
</html>

N'hésite pas à me demander pour d'éventuelles explications

22 mars 2010, 18:21

Merci (avec retard) Skikit pour l'info... autant je pige pas grand chose au php autant j'en connais moins en javascript...

Par contre c'est vrai que l'utilisation dans mon cas est beaucoup plus intéressante que le php on dirait... c'est surtout plus léger et plus simple à mettre en œuvre.

J'ai 2 petites questions néanmoins :

- si on rentre "15 ans" dans l'input age comment faire pour ne récupérer que le nombre 15 ?
- comment faire pour "laver" les labels quand on a cliqué sur le bouton ?

voilou merci

22 mars 2010, 19:47

- si on rentre "15 ans" dans l'input age comment faire pour ne récupérer que le nombre 15 ?
voilou merci

C'est parseInt qui permet de caster une chaine de caractère en nombre dans la mesure du possible. Tapes parseInt + javascript dans google pour plus de détails et dans quelles conditions ça fonctionne.

- comment faire pour "laver" les labels quand on a cliqué sur le bouton ?

ça veut dire ?

22 mars 2010, 20:04

A oui j'ai compris ta demande, ce n'est pas les labels que tu veux "laver" mais plutôt effacer le contenu des champs du formulaire.

En reprenant le code précédent, faire comme ceci :

<html>
<head>
<script language="Javascript" type="text/javascript">
var cumul = 0;

function add()
{
        var prenom = document.getElementById("prenom").value;
        var age = document.getElementById("age").value;
        cumul = cumul + parseInt(age);
        document.getElementById("cumul").innerHTML = "Age cumulé de la famille : "+cumul+" ans";
        document.getElementById("ajout").innerHTML += "<strong>"+prenom+" "+age+" ans</strong><br />";
		
		document.getElementById("age").value = '';
		document.getElementById("prenom").value = '';
}
</script>
<title>l'âge de la famille</title>
</head>
<body>

<div style="position:absolute;left:300px;top:100px;">
<center>
        <label for="prenom">Votre prénom </label><input type="text" id="prenom" size="25"  />
        <br />
        <label for="age">Votre age </label><input type="text" id="age" size="15"  />
        <br /><br />
        <button onclick="add();">Valider</button>
</center>
</div>
<div id="ajout" style="position:absolute;left:300px;top:250px;"></div>
<div id="cumul" style="position:absolute;left:500px;top:250px;color:blue;"></div>

</body>
</html>

22 mars 2010, 20:33

Ok merci c'est exactement ça !

Pour parseInt, je veux l'intégrer pour garder le 15 seulement pour calculer l'âge si quelqu'un rentre "15 ans".

Merci beaucoup !

23 mars 2010, 01:23

Ok merci c'est exactement ça !

Pour parseInt, je veux l'intégrer pour garder le 15 seulement pour calculer l'âge si quelqu'un rentre "15 ans".

Merci beaucoup !

Oui je comprend mais c'est déjà fait dans ta fonction à la ligne "cumul = cumul + parseInt(age);"

23 mars 2010, 09:55

Oui Oui merci, je m'étais posé la question et effectivement skikit l'avait déja intégré...
Merci bien pour les infos !

Formulaire données aditionnée

Qui est en ligne