Bonjour :)

Puisque tu travaille en Struts, et non en "statique", je te conseille d'utiliser struts plutot que du javascript pur. Cela te permet de vraiment séparé la couche métier et la couche Vue, et c'est à ca que sert Struts d'ailleurs.

Donc pour cela, je te propose d'avoir une petite fonction javascript a déclencher sur l'évênement onchange de ta liste :

function submitChange ( ){
    // --- Modification du parametre action qui va permettre d'appeller la bonne méthode JAVA a éxécuter.
    document.forms[0].action.value = 'change';
    // --- Soumission du formulaire.
    document.forms[0].submit;
}

   onchange="javascript:submitChange()" 

  onclick='javascript:submitChange(this)"

function submitChange ( liste ){
    // --- Recup de la valeur courante :
     var val = liste.options[liste.selectedIndex].value;
    // --- Ensuite libre à toi d'aller chercher le 
    // --- texte correspondant à la valeur :
    var texte = ...
    // --- Puis de remplir la zone ou afficher le texte comme il se doit.
    // --- Admettons pour cela que dans ta JSP tu aie déclarée une DIV
    // --- ayant id='toto'
    document.getElementById('toto').innerHTML = texte;
}

Bonjour,

je suis entrain de developper une petite application en PHP...Alors tout marche bien sauf que je voulais ameliorer mon code comme le suivant:

<select name="choix">
<option value="1">Une heure avant</option>
<option value="2">6 heures avant</option>
<option value="3">Aujourd'hui</option>
<option value="4">Les dernieres 24 heures</option>
</select>
</td>
<td>
De:
<input type="Text" name="input12" value= "">
</td>
<td>
jusqu'a:
<input type="Text" name="input13" value= "<?php echo date('Y-m-d H:i:s') ?>">
</td>

Je voulais a partir de mon choix dans la liste deroulante le value du 1er champs de texte ce remplie avec une date...
Par exemple si j'ai la date actuelle de mon systeme(qui est affiche dans le second champs de texte) est de 2008-04-09 08:29:56 et j'ai choisie le second option de ma liste cad 6 heures, alors dans le 1er value s'affiche l'heure actuelle - 6heures cad 2008-04-09 06:29:56
je pense que la solution est en Javascript et comme je ne le connais pas alors j'espere que je trouverais quelqu'un qui m'aidera a faire cette tache...

Merci d'avance

Bonjour,

Voici ta solution (développée et testée) :

Une première page que l'on nommera par exemple 'data.php' dont le code est le suivant :

<?php
include "script.js";
?>

<select name="choix" onchange="setNewDate(this)">
<option value="1">Une heure avant</option>
<option value="6">6 heures avant</option>
<option value="0">Aujourd'hui</option>
<option value="24">Les dernieres 24 heures</option>
</select>
</td>
<td>
De:
<input id="from" type="Text" name="input12" value= "">
</td>
<td>
jusqu'a:
<input id="to" type="Text" name="input13" value= "">
</td> 

<script language="javascript">
// --- Insert current date into 'to' input
insertCurrentDate();
</script>

<script language="javascript">

var currentDate = new Date();

/**
 * Calculate new time in function of time parameter
 */
function calculateNewTime ( _additional_time_in_hours ){
	
	// --- Check if input text "from" is present
	if ( ! document.getElementById("from") ){
		alert("Missing form data 'from' to calculate the new date");
		return;
	}
	// --- Check if input text "to" is present
	var toTime = null;
	if ( ! document.getElementById("to") ){
		alert("Missing form data 'to' to calculate the new date");
		return;
	}
	// --- Retrieve 'to' value
	else
		toTime = document.getElementById("to").value;
	
	// --- Calculate the new date only if input text "to" is filled
	if ( toTime != null && toTime != "" ){
		
		// --- Take current time as a reference to calculate the new time.
		// --- An update would be to parse the value of the input text 'to' in order the user to be able to enter his own time
		// --- instead of having current time forced
		var newDate = new Date(currentDate.getTime());
		// --- Del additional time
		newDate.setHours(newDate.getHours()-_additional_time_in_hours);
		document.getElementById("from").value = 
			newDate.getFullYear()+"-"+(newDate.getMonth()+1)+"-"+newDate.getDate()+" "+
			newDate.getHours()+":"+newDate.getMinutes()+":"+newDate.getSeconds();
		
	}
	
}

function setNewDate ( selectBox ){
	calculateNewTime(selectBox.options[selectBox.options.selectedIndex].value);
}

/**
 * Insert current timestamp into input text "to"
 */
function insertCurrentDate ( ){
	if ( document.getElementById("to") )
		document.getElementById("to").value = 
			currentDate.getFullYear()+"-"+(currentDate.getMonth()+1)+"-"+currentDate.getDate()+" "+
			currentDate.getHours()+":"+currentDate.getMinutes()+":"+currentDate.getSeconds();
}
</script>

Re,

Voici la nouvelle version avec en plus le timer qui raffraichit toutes les minutes la date courante.
Fichier date.php :

<?php
include "script.js";
?>

<select name="choix" onchange="setNewDate(this)">
<option value="1">Une heure avant</option>
<option value="6">6 heures avant</option>
<option value="0">Aujourd'hui</option>
<option value="24">Les dernieres 24 heures</option>
</select>
</td>
<td>
De:
<input id="from" type="Text" name="input12" value= "">
</td>
<td>
jusqu'a:
<input id="to" type="Text" name="input13" value= "">
</td> 

<script language="javascript">
// --- Insert current date into 'to' input
insertCurrentDate();
// --- Launch timer
startTimer();
</script>

<script language="javascript">

var currentDate = new Date();

/**
 * Calculate new time in function of time parameter
 */
function calculateNewTime ( _additional_time_in_hours ){
	
	// --- Check if input text "from" is present
	if ( ! document.getElementById("from") ){
		alert("Missing form data 'from' to calculate the new date");
		return;
	}
	// --- Check if input text "to" is present
	var toTime = null;
	if ( ! document.getElementById("to") ){
		alert("Missing form data 'to' to calculate the new date");
		return;
	}
	// --- Retrieve 'to' value
	else
		toTime = document.getElementById("to").value;
	
	// --- Calculate the new date only if input text "to" is filled
	if ( toTime != null && toTime != "" ){
		
		// --- Take current time as a reference to calculate the new time.
		// --- An update would be to parse the value of the input text 'to' in order the user to be able to enter his own time
		// --- instead of having current time forced
		var newDate = new Date(currentDate.getTime());
		// --- Del additional time
		newDate.setHours(newDate.getHours()-_additional_time_in_hours);
		document.getElementById("from").value = 
			newDate.getFullYear()+"-"+(newDate.getMonth()+1)+"-"+newDate.getDate()+" "+
			newDate.getHours()+":"+newDate.getMinutes()+":"+newDate.getSeconds();
		
	}
	
}

function setNewDate ( selectBox ){
	calculateNewTime(selectBox.options[selectBox.options.selectedIndex].value);
}

/**
 * Insert current timestamp into input text "to"
 */
function insertCurrentDate ( ){
	if ( document.getElementById("to") )
		document.getElementById("to").value = 
			currentDate.getFullYear()+"-"+(currentDate.getMonth()+1)+"-"+currentDate.getDate()+" "+
			currentDate.getHours()+":"+currentDate.getMinutes()+":"+currentDate.getSeconds();
}

/**
 * Timer to set automatically the current date into the input text 'to'
 * and have the real date recalculated
 */
var tant = 0;  // ---
function startTimer(){
   tant = tant+1;

   if (tant < 60 ) {  // exemple:caler à 60 secondes (60*1000) 
      timerID = setTimeout("startTimer()",1000);
   } else {
      tant = 0;
      // --- New date
      currentDate = new Date();
      // --- Display again
      insertCurrentDate();     
      startTimer();                                // Redémarre la boucle
   }
}

</script>

La seule modif est l'ajout de la fonction 'startTimer' qui toutes les 60 secondes (modifiable), modifie la date courante et raffraichit le champ input 'to' avec cette nouvelle date.