comment resoudre ce probleim avec javascript? par fatehkap - page 1

salut;
j'ai un formulaire et à coté un calendrier de rendez vous, l'utilisateur doit repmlir les champs du formulaire aprés il doit choisir une heure dans le calendrier par semaine le probleme c'est quand l'utilisateur clicke sur une semaine suivante les informations des champs s'éffaceront, comment résoudre ce probleme ?quand l'utilisateur passe à la semaine suivante ces informations resteront jusqu'à ce qu'il clicke sur envoiyer voila mon code:

<html>
	<head>
	<form method="POST" action="post.php" name="formu" onSubmit="return check();">
		<title>Calendrier par Semaine - Semaine</title>
<body>
<table cellspacing="0" cellpadding="0" border="0" >
								<tbody><tr><td colspan="5">
								<img height="10" border="0" align="absmiddle" width="10" src="pucev2.gif"> 
								<font face="verdana" color="#81B02B" size="2"><b>Mes coordonnées :</b></font></td></tr>
								<tr>
									<td height="30" width="100" >Nom*</td>
									<td><input type="text" value="" maxlength="30" size="10" name="nom" ></td>
									<td width="20"><img height="1" border="0" width="1" alt="" src="vide.gif"></td>
									<td width="100" class="verdana11bleu">Prénom*</td>
									<td><input type="text" value="" maxlength="30" size="10" name="prenom" ></td>
								</tr>
								
								<tr>
									<td height="30" class="verdana11bleu">Adresse</td>
									<td><input type="text" value="" maxlength="70" size="10" name="adresse" ></td>
									<td><img height="1" border="0" width="1" alt="" src="vide.gif"></td>
									<td class="verdana11bleu">Code postal</td>
									<td><input type="text" value="" maxlength="5" size="5" name="cp" ></td>
								</tr>
								
								<tr>
									<td height="30" class="verdana11bleu">Ville</td>
									<td><input type="text" value="" maxlength="20" size="10" name="ville" ></td>
									<td><img height="1" border="0" width="1" alt="" src="vide.gif"></td>
									<td class="verdana11bleu">&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								
								<tr>
									<td height="30" class="verdana11bleu">E-mail*</td>
									<td><input type="text" value="" maxlength="120" size="10" name="email" ></td>
									<td><img height="1" border="0" width="1" alt="" src="vide.gif"></td>
								<td class="verdana11bleu">Tél. *</td>
									<td><input type="text" value="" maxlength="16" size="10" name="portable" ></td>
									</tr>
								
								<tr>
									<td><img height="1" border="0" width="1" alt="" src="vide.gif"></td>
									<td><img height="1" border="0" width="1" alt="" src="vide.gif"></td>
									<td><img height="1" border="0" width="1" alt="" src="vide.gif"></td>
									<td class="verdana11bleu">&nbsp;</td>
									<td>&nbsp;</td>
								</tr>
								</tbody></table>
<div style="position: absolute; float: left; display: block; top: 120px; left:550px; padding: 0px; ">
				  <tbody><tr>
     <td>	
<img height="10" border="0" align="absmiddle" width="10" src="pucev2.gif"> 	 
<font color="#81B02B" face="verdana"  size="3" >
<b>Choisissez votre horaire puis validez</b></font></td></tbody></tr></div>



		
		
		<div style="position: absolute; float: left; display: block; top: 220px; left:550px; padding: 0px;">
		
	<?php
	$num_semaine = strftime("%U");
	if ($week == ($num_semaine-1)){
	echo '  ';
	}
	else
	
	{
	echo '<div style="position: absolute; float: left; top: -40px; left:0px;">';
	echo'<a href="f3.php?newdate='.$avant.'"><< précédent</a>';
	echo '</div>';
	}?>
			<div style="position: absolute; top: -40px; left:260px;">
			<a href="f3.php?newdate=<?php echo $apres;?>">suivant >></a>
		</div>


					
		<table  border="1" width="100px" style=" text-decoration:none;background-color:#f2f6fb;">
				
			<tbody>
				
					<?php
					$st=$deb;
					
					echo'<input type="hidden" name="daty" id="daty" value="" />';
					echo'<input type="hidden" name="datx" id="datx" value="'.date('dmY', $deb).'" />';
					
										               $mi= array(
                              'Sam','Dim','Lun','Mar','Mer','Jeu'
                         );							 
										for($m=0;$m<6;$m++)
						{
						  
                      
						echo '<td align="center" style="border:1px color:#666666">';
							echo $mi[$m];
							echo "<br>";
							echo date('d / m Y', $deb);
							echo '</td>';
							$deb = $deb + 86400; //On passe au jour suivant car un jour = 60sec * 60min * 24h
						
						}
										
				echo'<input type="hidden" name="clix" id="clix" value="" />';
				echo'<input type="hidden" name="cliy" id="cliy" value="" />';
					$li = array (
						'08:00','08:20','08:40',
						'09:00','09:20','09:40',
						'10:00','10:20','10:40',
						'11:00','11:20','11:40',
						'13:00','13:20','13:40',
						'14:00','14:20','14:40',
						'15:00','15:20','15:40'
					);
					
					
if (isset($_GET["newdate"]))
{
	$date=$_GET["newdate"];
}
else {$date = date(time());}
//corriger la date pour avoir ladate de debut de semaine
$date =$st;
$datereq1 = date("Y-m-j", $date).' 00:00:00';

$datereq2 = date("Y-m-j", mktime(0, 0, 0, date("m",$date)  , date("d",$date)+5, date("Y",$date))).' 23:00:00';

//envoyer une reqyuete a la base des donn?es
$link= mysql_connect('localhost','root','');
mysql_select_db("rdv");
$req="SELECT * FROM `rendezvous` WHERE ( `dh_rdv` BETWEEN'".$datereq1."'AND'".$datereq2."');";
$result=mysql_query($req);
$arr= array();
for ($i=0; $i<6; $i++) // initialisation
{
for ($j=0; $j<21; $j++)
{
if ($j<10) {$jt='0'.$j;} else {$jt=$j;}
$arr[$i.$jt]=0;
}
}
mysql_close($link);
while ($row=mysql_fetch_array($result))
{
$temps=mktime(0,0,0,$row["dh_rdv"][5].$row["dh_rdv"][6],$row["dh_rdv"][8].$row["dh_rdv"][9],$row["dh_rdv"][0].$row["dh_rdv"][1].$row["dh_rdv"][2].$row["dh_rdv"][3]);
$jr= date('w',$temps);//???????
if ($jr==6) {$jr=0;}
else {$jr=$jr+1;}
$hr = array_search($row["dh_rdv"][11].$row["dh_rdv"][12].':'.$row["dh_rdv"][14].$row["dh_rdv"][15], $li);
if ($hr<10) {$hrt='0'.$hr;}else{$hrt=$hr;}
$arr[$jr.$hrt]=1;
}
			for ($i=0; $i<21; $i++)
					{
						echo "<tr>";
						for ($j=0; $j<6; $j++)
						{
							if ($i<10) {$it='0'.$i;} else {$it=$i;}
							if (($arr[$j.$it]==1) or(time()>( $st+ (($j)*86400) + (8*3600 ) + (($i)*1500) )))
							{
							$dis='disabled';
							}
							else {$dis='';}
							echo '<td width="70" height="30">';
							echo '<input type="button" name="active" '.$dis.' id="'.$j.$it.'" value="'.$li[$i].'" class="bouton" onclick="changeCouleur(\''.$j.$it.'\');" />';
							echo '</td>';
						}
						echo "</tr>";
						}
					
								
				?>
												
			</tbody>
		</table><br><br>
		
									<td>
											<input type="submit" id="env" name="env" value="Envoyer">   
									
						</td>
								
		</div>
</form>
</body>
</html>

merci pour vos repances.

Le plus simple pour commencer (à ma connaissance) est jQuery, tu peux utiliser la fonction Load qui permet de charger le résultat d'une requête ajax dans un un élément de la page (un div souvent), c'est on ne peut plus simple et ça te permettrait de faire le changement rapidement.

Tu crée un élément qui contient le code variable :

<div id="mon_id"></div>

Et tu as juste à créer une page php ("ma_page.php" dans l'exemple) qui retourne uniquement le contenu de ce bloc (en html), ensuite tu crées ta petite requête ajax et voilà.

Changes tes liens suivant et précédent en leur ajoutant la classe "ajax" (ou autre) de la sorte :

<a href="ma_page.php?newdate='.$avant.'" class="ajax"><< précédent</a>

jQuery(document).ready(function() {
  $.bind("a.ajax", "click", function () {
    #("#mon_id").load($(this).attr("href"));
    return false;
  });
});

Changes les IDs, classes et autres besoin, mais fais les mêmes modification dans le javascript et dans le html.

fatehkap

24 août 2011 à 17:43:56

MrPringle

24 août 2011 à 23:50:29

Le problème est que ton script recharge toute la page donc forcément tu perds les infos entrées dans les champs.

La solution la plus facile serait de passer le bloc nécessitant des traitement PHP sous ajax, à chaque nouveau traitement tu ne changes que ce bloc et non la page. Je n'ai pas vu de tutorial à ce sujet, si tu utilises jQuery ou un autre framework, ça va grandement te faciliter la vie.

Besoin de SEO ou développement web pas cher? Contacte MJA Web Services.

25 août 2011 à 0:00:19

c’est exactement ca mais je ces rien dans les bibliothèques en suite il faut tous refaire ?

25 août 2011 à 0:53:56

25 août 2011 à 15:03:16

Merci MrPringle mais j’ai pas bien compris la première étape « Tu crée un élément qui contient le code variable » tu peux m’expliquer un peu plus s’il te plait et une chose je doit recupéré les information du calendrier et du formulaire en meme temps alors j'ai pas bien compri la solution que tu ma proposer

26 août 2011 à 0:00:38

Tu mets les deux liens précédents et suivants en dessous de ton nouveau "div" ("#mon_id") et dans ce dernier tu mets seulement la partie du code qui varie selon les semaines et qui sera mis à jour en cliquant sur les deux liens.
Ces derniers lancent une requête ajax (onclick) qui appelle une page qui retournera uniquement le HTML du bloc en question, ainsi ta page a les infos à jour (dans ce bloc) sans rechargement et le reste de ton formulaire est inchangé.

comment resoudre ce probleim avec javascript?

comment resoudre ce probleim avec javascript?

Supprimer

Modérer

Signaler le message aux modérateurs