Affichage sélection

Bonjour,

J'ai une page qui affiche un rapport dont l'information est puisé par une procédure stocké par SQL Server et dont l'information ne sera affiché que par certaines variable que la page doit soumettre, dont la date, le groupe et le caissier qui sont dans des dropdown à l'exception des dates(datepicker). Je reçois toute l'information nécessaire pour le rapport ainsi que ceux qui se retrouve dans mes select. Par contre, étant donné que la page ouvre sans aucun information, j'aimerais être apte d'afficher par défaut les informations avec la date de la journée précente avec un groupe RAL et le caissier TOUS. De plus, si je modifie l'information pour avoir un nouveau rapport, l'information dans les select et datepicker doivent conserver les informations sélectionner et non être modifiés à nouveau. Si dans tous les cas, il n'y a aucune informations à fournir, y ajouter un message.
Voici les informations que j'ai jusqu'à maintenant :

L'information recueilli pour remplir mon tableau :

<tbody>
<?php
$conn = sqlsrv_connect( $serverName, $connectionInfo);
$sql = "Ecart_Caissier @DATE1 = '$from', @DATE2 = '$to', @TARGET = '$group' , @CSHR = '$cashier'";
$result = sqlsrv_query($conn, $sql);
$row = $result;
if( $row === false ) { ?>
   <td style="color: red;">Aucune données disponible, veuillez remplir les champs</td><?php
} else if( $row === NULL ) {?>
   <td style="color: red;">Aucune donnée</td><?php
   }
while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC))
{
	//print_r( $row );  // debug code
	$couleur='black';
	$font= 'normal';
	$font2= '#transparent';
	if( strstr($row['HTML_CODE'], "BOLD()")){
		$font= 'bold';
	}
	if( strstr($row['HTML_CODE'], "BG()")){
		$font2= '#D8D8D8';
	}
	if( strstr($row['HTML_CODE'], "RED()")){
		$couleur='red';
	}	
?>
											<tr>
												<?php echo "<tr style=\"font-weight:$font; background-color:$font2;\">"; ?>
												<td><?php echo ($row['TextLine']);?></td>
												<td style="text-align: right"><?php echo is_null($row['TotalQty']) ? ' ' : number_format($row['TotalQty'],0,'',' ');?></td>
												<td style="text-align: right"><?php echo is_null($row['TotalAmountDrawer']) ? ' ' : number_format($row['TotalAmountDrawer'],2, ".", " ") . " $";?></td>
												<td style="text-align: right"><?php echo is_null($row['TotalAmountPickup']) ? ' ' : number_format($row['TotalAmountPickup'],2, ".", " ") . " $";?></td>
												<td style="text-align: right; color: <?php echo $couleur; ?>"><?php echo is_null($row['TotalAmountOverShort']) ? ' ' : number_format($row['TotalAmountOverShort'],2, ".", " ") . " $";?></td>
											</tr>
<?php
}  
 ?>
</tbody>

Celui que j'utilise pour mon datepicker :

<form method="post">
	            			<label for="from"><b>De:</b></label>
	            			<input  data-date-format='yy-mm-dd' type="text" id="from" name="from" size="6" value="<?php if(isset($_POST['from'])){ echo $_POST['from']; } ?>";/>
	            			<label for="to"><b>A:</b></label> 
	            			<input data-date-format='yyyy-mm-dd' type="text" id="to" name="to" size="6" value="<?php if(isset($_POST['to'])){ echo $_POST['to']; } ?>";/>

Pour mon groupe:

<label for="group"><b>Groupe:</b></label> 
	            			<select type= "text" name="group" id="group">
	            				<option><?php if(isset($_POST['group'])){ echo $_POST['group']; } ?></option>
<!--Pour obtenir la liste des stations-->           				            		
<?php
$sql = " Get_List_ReportStation";
$stmt = sqlsrv_query($conn, $sql);
if( $stmt === false) {
    die( print_r( sqlsrv_errors(), true) );}
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) 
{ 
?>          
								<option value="<?php echo ($row['F1000']." ".$row['F1018']); ?>"><?php echo ($row['F1000'] . " " . $row['F1018']); ?></option>       
<?php   
}
?>
							</select>
<!--Script pour réafficher le choix sélectionner lorsque la page est rechargée-->					
<script>
var select = document.querySelector(".group");
var selectOption = select.options[select.selectedIndex];
var lastSelected = localStorage.getItem('select');

if(lastSelected) {
    select.value = lastSelected; 
}else {
    select.value = 'RAL'; // new code
}
// sets up a onselected
select.onchange = function () {
   lastSelected = select.options[select.selectedIndex].value;
   console.log(lastSelected);
   localStorage.setItem('select', lastSelected);
}
</script>

Et pour mon caissier :

<label for="cashier"><b>Caissier:</b></label> 
        <select type= "text" name="cashier" id="cashier">
         	<option><?php if(isset($_POST['cashier'])){ echo $_POST['cashier']; } ?></option>
<!-- Requête pour obtenir la liste complète des caissiers-->
<?php
$sql = "Get_List_Cashier";
$stmt = sqlsrv_query($conn, $sql);
if( $stmt === false) {
    die( print_r( sqlsrv_errors(), true) );}
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) 
{ 
?>          
			<option value="<?php echo ($row['NO_INTERNE']); ?>"><?php echo ($row['CODE'] . " " . $row['NOM']); ?></option>       
<?php   
}
?>
		</select>
<!--Requête pour conserver à l'écran la sélection faite lors du réaffichage de la fenêtre-->
<script>
var select = document.querySelector(".cashier");
var selectOption = select.options[select.selectedIndex];
var lastSelected = localStorage.getItem('select');

if(lastSelected) {
    select.value = lastSelected; 
}
// sets up a onselected
select.onchange = function () {
   lastSelected = select.options[select.selectedIndex].value;
   console.log(lastSelected);
   localStorage.setItem('select', lastSelected);
}
</script>

Et voici ma validation :

							<input type="submit" value="Valider" name="submit" class="submit">
						</form>
<?php 
if(isset($_POST["submit"])) {
$from = $_POST["from"];
$to = $_POST["to"];
$group = $_POST["group"];
$cashier = $_POST["cashier"];
}
?>

Le résultat final devrait ressembler à l'image.
https://forum.alsacreations.com/upload/1493387763-65374-result.png
Je ne suis pas sûr si je dois utiliser php ou bien javascript pour l'affichage. J'attends vos idées. Merci pour votre temps à tous.
Modifié par dragonfaster (28 Apr 2017 - 15:56)