Formulaire dynamique

Fermé
-
 Marix -
Bonjour,

Je souhaite faire un "formulaire dynamique". je m'explique j'ai un genre de calandrier on va dire un tableau avec un chiffre dans chaque cellule et je souhaiterai que en cliquant sur les chiffres ca me rentre directement leur valeur dans un champ type input situé plus bas.
Je ne sais pas si j'ai étais clair.
Merci d'avance de votre aide.

6 réponses

Messages postés
8700
Date d'inscription
dimanche 8 avril 2007
Statut
Contributeur
Dernière intervention
22 janvier 2020
1 197
bonjour,
Oui, tu a été clair, sauf que tu ne dit pas avec quel logiciel tu travail, enfin, je supose que c'est Excel, et pour faire ce que tu veux il faudrait apprendre a maitriser un peu le VBA. au moyen des fonctions Excel ce n'est pas possible.
louis
Oui désolé!!
En fait non c'est pas exel...c du HMTL/PHP/MYSQL.

Mon tableau est en php ( c'est un tableau qui a trois ligne...ex materiel 1 à 3 et ensuite les jours du mois actuelle en colone). Et je pense qu'il existe en JS une manère de developper ceci. Le fait de cliquer sur une cellule de ma colone et mettre dans mon champ de formulaire la valeur de celle ci.
Oui désolé!!
En fait non c'est pas exel...c du HMTL/PHP/MYSQL.

Mon tableau est en php ( c'est un tableau qui a trois ligne...ex materiel 1 à 3 et ensuite les jours du mois actuelle en colone). Et je pense qu'il existe en JS une manère de developper ceci. Le fait de cliquer sur une cellule de ma colone et mettre dans mon champ de formulaire la valeur de celle ci.
Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
856
Très clair, tu veux que la valeur de la case sélectionnée apparaisse dans un champ de type INPUT en dessous de ton tableau ou en bas de page, en tout cas ailleur.

Pour ce faire, il faut que tu donne un identifiant à ton INPUT chargé de recevoir les valeurs des cases. Prenoms par exemple l'identifiant 'test'.
Ensuite, il faut que tu créé une fonction javascript qui permette de reprendre la valeur des cases, mais pour ce faire il va falloir que tu créé ton tableau correctement, de maniere à pouvoir récupérer les valeurs en questions.

Création du tableau :
Il faut que tu puisse donné un nom à chaque case de maniere à pouvoir récupérer les valeurs en javascript.
Tu dois certainement le créé comme suit pour le moment :
<table>
   <tr>
       <td > ... </td>
   </tr>
</table>


Je te recommande pour le début (cela pourra être optimisé par la suite) de faire un div pour chaque cellule du tableau comme suit :

<table>
   <tr>
       <td > <div>...</div> </td>
   </tr>
</table>


Maintenant une autre modification, il faut appeler la future fonction javascript qui permettra de retrouver la valeur et de la copier dans l'input en dessous du tableau. Mettons que la fonction se nomme 'findValueAndPaste'
Chaque élément de type DIV de ta table recevra cette fonction évênementielle comme suit :


<table>
   <tr>
       <td > <div onclick='javascript:findValueAndPaste(this)'>...</div> </td>
   </tr>
</table>


Le parametre 'this' de la fonction permet d'envoyer l'objet DIV courant afin de reprendre sa valeur dans la fonction.

Et maintenant abordons la phase final, la création de la fonction javascript :

function findValueAndPaste( oDiv ){
   var value = oDiv.value;
   var input_text = document.getElementById("Test").value;
   input_text.value = value;
}


Cette fonction javascript :
- récupère la valeur de la case cliquée
- renseigne la valeur de l'input avec celle récupérée

Cette fonction javascript doit etre incorporée dans ton fichier HTML ou PHP (selon ce que tu as utilisé)

Si tu as d'autres questions à ce propos n'hésite pas.

Messages postés
3133
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
20 octobre 2020
437
Salut a tous,
Tu veux un truc comme ici: http://txiki.free.fr/fiche_ajout.php (login = txiki, pass = tintin.
Tu clique sur l'icone du calendrier et tu regarde. (STP, ne valide pas le formulaire).
Ouais c un truc dans ce style là sauf que c pas une popup.
Merci pour toutes ces infos...

Je te joins des bout de code parce que ca ne fonctionne pas...j'ai essayé de regarder mais j'suis nul en JS donc j'ai pas bcp avancé.
Premièrement mon formulaire je l'ai appelé form1 (classique :) )

Voici une partie de mon tableau :
<table border=2>
<tr>
<td > <div>BARCO 1</div> </td>
<td > <div onclick='javascript:findValueAndPaste(this)'> 1 </div> </td>
<td > <div onclick='javascript:findValueAndPaste(this)'> 2 </div> </td>
</tr>

et voici mon formulaire :

<table><div align='center'>
Chiffre : <input type='text' name='test' value=""><br>
<input type='submit' value='envoyer'></div></TABLE>
</form>
La balise form commence au début avant le tableau et se termine comme tu le vois à la fin des champs.

et voici la fontion que tu m'as donné :

function findValueAndPaste( oDiv ){
var value = oDiv.value;
var input_text = document.form1.getElementById("test").value;
input_text.value = value;
}
</script>

Tu peux me dire pkoi ca fonctionne pas?
Messages postés
3133
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
20 octobre 2020
437
Bon ben ... en javascript, j'y connais rien non plus pour t'aider. Au mieux je sais corriger (adapter) quelques petites choses mais c'est tout.
Désolé.
Si tu veux, je t'envoi le script mais a corriger pour l'integrer directement dans une cellule de ton tableau.
:-) Oui je veux bien que tu me l'envoies...je v regarder ce que je peux faire...
Merci bcp!!
Messages postés
3133
Date d'inscription
mercredi 30 janvier 2002
Statut
Contributeur
Dernière intervention
20 octobre 2020
437 > marix
Le voici:
// script pour afficher le calendrier dynamique
// si l'année est à deux chiffres, on considère que les dates après cette année sont du siècle 20.
var NUM_CENTYEAR = 30;
// c'est la commande d'entrée de temps exigée par défaut
var BUL_TIMECOMPONENT = false;
// sont les boutons de défilement d'année exigés par défaut
var BUL_YEARSCROLL = true;

var calendars = [];
var RE_NUM = /^\-?\d+$/;

function calendar1(obj_target) {

// assignation des méthodes
this.gen_date = cal_gen_date1;
this.gen_time = cal_gen_time1;
this.gen_tsmp = cal_gen_tsmp1;
this.prs_date = cal_prs_date1;
this.prs_time = cal_prs_time1;
this.prs_tsmp = cal_prs_tsmp1;
this.popup = cal_popup1;

// validez les paramètres d'entrée
if (!obj_target)
return cal_error("Error calling the calendar: no target control specified");
if (obj_target.value == null)
return cal_error("Error calling the calendar: parameter specified is not valid target control");
this.target = obj_target;
this.time_comp = BUL_TIMECOMPONENT;
this.year_scroll = BUL_YEARSCROLL;

// enregistrer dans les "collections" globales
this.id = calendars.length;
calendars[this.id] = this;
}

function cal_popup1 (str_datetime) {
if (str_datetime) {
this.dt_current = this.prs_tsmp(str_datetime);
}
else {
this.dt_current = this.prs_tsmp(this.target.value);
this.dt_selected = this.dt_current;
}
if (!this.dt_current) return;

var obj_calwindow = window.open(
'calendar.html?datetime=' + this.dt_current.valueOf()+ '&id=' + this.id,
'Calendar', 'width=240,height=220'+
',status=no,resizable=no,top=200,left=200,dependent=yes,alwaysRaised=yes'
);
obj_calwindow.opener = window;
obj_calwindow.focus();
}

// fonction génératrice de timestamp
function cal_gen_tsmp1 (dt_datetime) {
return(this.gen_date(dt_datetime) + ' ' + this.gen_time(dt_datetime));
}

// fonction génératrice de date
function cal_gen_date1 (dt_datetime) {
return (
(dt_datetime.getDate() < 10 ? '0' : '') + dt_datetime.getDate() + "-"
+ (dt_datetime.getMonth() < 9 ? '0' : '') + (dt_datetime.getMonth() + 1) + "-"
+ dt_datetime.getFullYear()
);
}
// fonction génératrice de temps
function cal_gen_time1 (dt_datetime) {
return (
(dt_datetime.getHours() < 10 ? '0' : '') + dt_datetime.getHours() + ":"
+ (dt_datetime.getMinutes() < 10 ? '0' : '') + (dt_datetime.getMinutes()) + ":"
+ (dt_datetime.getSeconds() < 10 ? '0' : '') + (dt_datetime.getSeconds())
);
}

// fonction d'analyse de timestamp
function cal_prs_tsmp1 (str_datetime) {
// si aucun paramètre n'est spécifié, retourner à l'actuel timestamp
if (!str_datetime)
return (new Date());

// si "festin" positif de nombre entier comme millisecondes d'époque
if (RE_NUM.exec(str_datetime))
return new Date(str_datetime);

// donc traiter comme date dans le format de "corde"
var arr_datetime = str_datetime.split(' ');
return this.prs_time(arr_datetime[1], this.prs_date(arr_datetime[0]));
}

// fonction d'analyse de la date
function cal_prs_date1 (str_date) {

var arr_date = str_date.split('-');

if (arr_date.length != 3) return cal_error ("Invalid date format: '" + str_date + "'.\nFormat accepted is dd-mm-yyyy.");
if (!arr_date[0]) return cal_error ("Invalid date format: '" + str_date + "'.\nNo day of month value can be found.");
if (!RE_NUM.exec(arr_date[0])) return cal_error ("Invalid day of month value: '" + arr_date[0] + "'.\nAllowed values are unsigned integers.");
if (!arr_date[1]) return cal_error ("Invalid date format: '" + str_date + "'.\nNo month value can be found.");
if (!RE_NUM.exec(arr_date[1])) return cal_error ("Invalid month value: '" + arr_date[1] + "'.\nAllowed values are unsigned integers.");
if (!arr_date[2]) return cal_error ("Invalid date format: '" + str_date + "'.\nNo year value can be found.");
if (!RE_NUM.exec(arr_date[2])) return cal_error ("Invalid year value: '" + arr_date[2] + "'.\nAllowed values are unsigned integers.");

var dt_date = new Date();
dt_date.setDate(1);

if (arr_date[1] < 1 || arr_date[1] > 12) return cal_error ("Invalid month value: '" + arr_date[1] + "'.\nAllowed range is 01-12.");
dt_date.setMonth(arr_date[1]-1);

if (arr_date[2] < 100) arr_date[2] = Number(arr_date[2]) + (arr_date[2] < NUM_CENTYEAR ? 2000 : 1900);
dt_date.setFullYear(arr_date[2]);

var dt_numdays = new Date(arr_date[2], arr_date[1], 0);
dt_date.setDate(arr_date[0]);
if (dt_date.getMonth() != (arr_date[1]-1)) return cal_error ("Invalid day of month value: '" + arr_date[0] + "'.\nAllowed range is 01-"+dt_numdays.getDate()+".");

return (dt_date)
}

// fonction d'analyse du temps
function cal_prs_time1 (str_time, dt_date) {

if (!dt_date) return null;
var arr_time = String(str_time ? str_time : '').split(':');

if (!arr_time[0]) dt_date.setHours(0);
else if (RE_NUM.exec(arr_time[0]))
if (arr_time[0] < 24) dt_date.setHours(arr_time[0]);
else return cal_error ("Invalid hours value: '" + arr_time[0] + "'.\nAllowed range is 00-23.");
else return cal_error ("Invalid hours value: '" + arr_time[0] + "'.\nAllowed values are unsigned integers.");

if (!arr_time[1]) dt_date.setMinutes(0);
else if (RE_NUM.exec(arr_time[1]))
if (arr_time[1] < 60) dt_date.setMinutes(arr_time[1]);
else return cal_error ("Invalid minutes value: '" + arr_time[1] + "'.\nAllowed range is 00-59.");
else return cal_error ("Invalid minutes value: '" + arr_time[1] + "'.\nAllowed values are unsigned integers.");

if (!arr_time[2]) dt_date.setSeconds(0);
else if (RE_NUM.exec(arr_time[2]))
if (arr_time[2] < 60) dt_date.setSeconds(arr_time[2]);
else return cal_error ("Invalid seconds value: '" + arr_time[2] + "'.\nAllowed range is 00-59.");
else return cal_error ("Invalid seconds value: '" + arr_time[2] + "'.\nAllowed values are unsigned integers.");

dt_date.setMilliseconds(0);
return dt_date;
}

function cal_error (str_message) {
alert (str_message);
return null;
}

a l'emplacement du calendrier (dans la page donc) tu rajoute ceci:
<td > Veuillez choisir la  date en utilisant le calendrier ci-contre:&nbsp;<a href="javascript:cal1.popup();"><img src="img-calendar/cal.gif" width="16" height="16" border="0" alt="Cliquez ici pour obtenir la date." title="Cliquez ici pour obtenir la date."></a>&nbsp;<input type="Text" name="input1" value="" size="20"></td>
        </tr>
        <script language="JavaScript">
		<!-- // créer un objet de calendrier juste après la fermeture d'un "tag de formulaire"
		// spécifier l'élément du formulaire comme le seul paramètre (document.forms['nom_du_formulaire'].elements['nom_d'entrée']);
		// note : vous pouvez avoir autant d'objets de calendrier dont vous avez besoin pour votre application
		// =========================================
		// elements.date ou ['date']" est le name du champ du formulaire juste au dessus
				var cal1 = new calendar1(document.forms['formulaire'].elements['input1']);
				cal1.year_scroll = true;
				cal1.time_comp = false;
		</script>

Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
856 > marix
Ca ne fonctionnait pas pour la raison suivante :
Chiffre : <input type='text' name='test' value=""><br> 


doit etre :
Chiffre : <input type='text' name='test' id='test' value=""><br> 

> marix
Je suis désolé kij_82 je n'ai pas pu essayer du week end...je n'avais aucun accès à internet....
Sur ce, je viens d'essayer avec la correction que tu m'as apporté mais ca ne fonctionne tjs pas..."Error on page"

je te rejoins le code, Merci :

<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
<script language="javascript">
function findValueAndPaste( oDiv ){
var value = oDiv.value;
var input_text = document.form1.getElementById("test").value;
input_text.value = value;
}
</script>
<form name=form1>
<table border=2>
<tr>
<td > <div>BARCO 1</div> </td>
<td > <div onclick='javascript:findValueAndPaste(this)'> 1 </div> </td>
<td > <div onclick='javascript:findValueAndPaste(this)'> 2 </div> </td>
</tr>
<tr>
<td > <div>BARCO 2</div> </td>
<td > <div onclick='javascript:findValueAndPaste(this)'> 1 </div> </td>
<td > <div onclick='javascript:findValueAndPaste(this)'> 2 </div> </td>
</tr>
<tr>
<td > <div>BARCO 3</div> </td>
<td > <div onclick='javascript:findValueAndPaste(this)'> 1 </div> </td>
<td > <div onclick='javascript:findValueAndPaste(this)'> 2
</table>
<table><div align='center'>
Chiffre : <input type='text' name='test' id='test' value=""><br>
<input type='submit' value='envoyer'></div></TABLE>
</form>
</BODY>
</HTML>
Messages postés
4088
Date d'inscription
jeudi 7 avril 2005
Statut
Contributeur
Dernière intervention
30 septembre 2013
856 > marix
Pour la fonction javascript met plutot ca :
function findValueAndPaste( oDiv ){
var value = oDiv.value;
var input_text = document.forms[0].getElementById("test");
input_text.value = value;
} 


Désolé j'étais un peu fatigué ^^