Alimenter un SELECT par le résultat d'un input type date

Pour toutes les discussions javascript, jQuery et autres frameworks
Répondre
Dj@m@l
Messages : 2
Enregistré le : 16 nov. 2019, 22:21

Alimenter un SELECT par le résultat d'un input type date

Message par Dj@m@l » 16 nov. 2019, 22:40

Bonjour à tous, j'espère que vous allez bien.

Alors, j'essai d'avancer en JAVASCRIPT en m'améliorant sur ses extensions à savoir AJAX, JSON, JQUERY. Pour cela j'ai télécharger un tuto où montre comment alimenter un SELECT par le résultat d'un précédent SELECT.

Pareillement pour réaliser le projet, je l'ai utilisé dans le cadre d'un projet de la manière suivante: j'ai une table médecin dans ma base, dans la table j'ai un ATRIBUT jour de disponibilité du médecin. Dans ma page, j'ai un champs de TYPE DATE, je récupère la date en JS et faire une requête AJAX vers mon fichier PHP à partir du jour correspondant à cette date, je fais une requête pour récupérer les médecins disponible ce jour là.

Mais malheureusement ça ne marche pas ! Si quelqu'un pourrait avoir un autre regard sur ça.

fichier index.php

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="bootstrap.min.css">
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript" src="script1.js"></script>
    <title>test</title>
  </head>
  <body>
		<div class="container">
			<h3>Rafraichissement d'un SELECT en AJAX avec PHP/MySQL, HTML/CSS et BOOTSTRAP</h3>
			<hr>
    	<div class="row">
    		<div class="col-md-6 col-md-offeset-3">
				<form class="form" action="send.php" method="post">
					<div class="row">
						<div class="form-group">
							<label for="jour_rdv">Date RDV</label>
							<input type="date" name="jour_rdv" id="jour_rdv" class="form-control">
						</div>
					</div>
					<div class="row" >
						<div class="form-group">
							<label for="medecin">Medecin</label>
							<select class="form-control" name="medecin" id="medecin">
								
							</select>
						</div>
					</div>
					<button class="btn btn-primary" name="submit" id="submit">Valider</button>
				</form>
    		</div>
    	</div>
    </div>
  </body>
</html>
fichier script

Code : Tout sélectionner


$(document).ready(function(){

  $("#jour_rdv").change(function(){

    var date = new Date ($("#jour_rdv").val());
    var today = new Date();

    const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];


    if(date.getDate() >= today.getDate()) {

      const dayIndex = date.getDay();

      const dayName = days[dayIndex];

      jour = matchedDay(dayName);

      if(jour != null) { // Si le date choisie ne correspond à aucun jour de travail

        $.ajax({

          url: 'send.php',
          method: 'post',
          data: {jour_rdv:jour},
          success:function(medecin){
            medecin = JSON.parse(medecin);
            $("#medecin").empty();
            medecin.forEach(function(medecin){
              $("#medecin").append('<option>' + medecin.nom + '</option>');
            });
          }
        });

      } else { // Si le date choisie ne correspond à aucun jour de travail
        
          alert("Les rendez-vous sont pris du Lundi au Vendredi, veuillez vous en souvenir");
      }

    }else { // Si le date choisie est inférieure à celle du prise de rendez-vous

      alert("Date de rendez-vous invalide !");

    }

    
  });
  
});


function matchedDay(string) {

  switch (string) {

    case 'Mon':
      return "Lundi";
      break;
    
    case 'Tue':
      return "Mardi";
      break;

    case 'Wed':
      return "Mercredi";
      break;

    case 'Thu':
      return "Jeudi";
      break;

    case 'Fri':
      return "Vendredi";
      break;

    default:
      return null;
      break;
  }
}

Dj@m@l
Messages : 2
Enregistré le : 16 nov. 2019, 22:21

Re: Alimenter un SELECT par le résultat d'un input type date

Message par Dj@m@l » 17 nov. 2019, 02:44

Problème résolu ! par moi même sois dit-en passant.

Répondre