How to show options of a select according to the chosen date?

Asked

Viewed 247 times

0

Good evening, I am developing a website for scheduling laboratories and I needed to make a condition that according to the date that the user choose it will query in the database all the Laboratories that are registered on that date and put in select only the Labs that aren’t registered in it, so that the user can choose which laboratory he wants.

  • How could I make that condition?
  • I will have to use the condition with javascript or can do only with php?

The code is below:

<?php 
  $titlepag="";
  include("includes/headeragenda.php");
  header('Content-Type: text/html; charset=utf-8');
?>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title><?php echo $titlepag ?></title>
<!-- BOOTSTRAP DATAPICKER -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<!-- aqui termina o codigo bootstrap -->
<link href="https://fonts.googleapis.com/css?family=Oswald:300,400,700" rel="stylesheet"/>
<link rel="stylesheet" type="text/css" href="css/style2.css"/>
<!-- 2 FUNÇOES EM JAVASCRIPT PARA O ACTION DO FORMULARIO -->


<script LANGUAGE="JavaScript">

function Verificar()
   {
     document.agendaDATA.action="?acao=verificar";
     document.forms.agendaDATA.submit();
     
   }
function Agendar()
   {
     document.agendaDATA.action="?acao=agendar";
     document.forms.agendaDATA.submit();
     
   }
$(function() {
    $("#tData").datepicker({
        dateFormat: 'dd/mm/yy',
        dayNames: ['Domingo','Segunda','Terça','Quarta','Quinta','Sexta','Sábado','Domingo'],
        dayNamesMin: ['D','S','T','Q','Q','S','S','D'],
        dayNamesShort: ['Dom','Seg','Ter','Qua','Qui','Sex','Sáb','Dom'],
        monthNames: ['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro'],
        monthNamesShort: ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'],
        minDate:"+1", maxDate: "+5M"

    });
});
  </script>


</head>
<body>
<!-- CONTAINER 1 DE ESCOLHA DE DATA PARA AGENDAMENTO -->
    <div id="seldata" class="bradius">
    
        <div><h2 style="text-align: center;">Agendar Data</h2></div><br>
        <div class="message" style=""<?php echo $display;?>"><?php echo $msg;?></div>
        <!--- Formulario de Agendamento -->
       <form name="agendaDATA" method="post">
       <!-- Formulario de verificação de LAbs disponivel -->
        <fieldset id="verificacao" class="bradius"><legend style="text-align: center;"><strong>Verificar se há laboratórios disponível</strong> </legend>
        <!--INPUT DATE PARA SELECIONAR A DATA - SÓ FUNCIONA NO NAVEGADOR GOODLE CHROME-->
	       <label for="tData"><strong>Selecione a Data</strong></label><input style="margin-left: 25px; text-align: center; font-size: 16px; " class="txt bradius" type="text" id="tData" name="cData"  placeholder=" Dia/Mês/Ano " />
	       <br/><br/>
	       <!-- RADIOBUTTONS PARA ESCOLHER PERIODO NOTURNO OU DIURNO -->
              <div id="acomodar" style="margin-left: 10px;">
	              <strong> Selecione o Periodo</strong>
		          <input style="margin-left: 6px;" checked type="radio" id="tNoit" name="cPeriod" value="Noite"/><label for="tNoit">Noite</label>
		          <input type="radio" id="tManh"   name="cPeriod" value="Manha"/><label for="tManh">Manhã</label><br>
		          
		     <!-- BOTÃO COM SCPRIT QUE ENVIA ACTION VERIFICAR PARA O HEADERAGENDA -->     
	      <input type="submit" class="sb bradius" value="Verificar" style="margin-left: 15px; margin-bottom: 10px" onclick="Verificar()" />
	       </div>
	    </fieldset><br>
	    <!--TERMINA FORMULARIO DE VERIFICAÇÃO DO LAB -->
	    <!--COMEÇA O PREENCHIMENTO DA 2ª PARTE DO FORMULARIO -->
	    <!-- INPUT TEXT PARA QUANTIDADE DE ALUNOS QUE VAI TER (ESTIMATIVA) --> 
		<label for="tQuant"><strong> Quantidade de Alunos</strong></label><input style="margin-left: 25px;" id="tQuant" type="text" class="txt bradius" name="cQuant"/> 
			<!-- SELECT COM OS NOSSOS LABORATORIOS E O NUMERO DE MAQUINAS DISPONIVEIS EM CADA LAB -->
			<label for="tLab"><strong> Laboratório</strong></label>
			<select style="margin-left: 25px;" id="tLab" name="cLab" class="txt bradius">
			    <option value="">Escolha um Laboratório:</option>
				<option value="Laboratorio 1">Laboratório 1 - 45 Computadores</option>
				<option value="Laboratorio 2">Laboratório 2 - 45 Computadores</option>
				<option value="Laboratorio 3">Laboratório 3 - 30 Computadores</option>
				<option value="Laboratorio 4">Laboratório 4 - 30 Computadores</option>
				<option value="Laboratorio 7">Laboratório 7 - 52 Computadores</option>
				<option value="Laboratorio 8">Laboratório 8 - 52 Computadores</option> 
			</select><br>
		<br/>
		<!-- FIELDSET PARA ESCOLHA DOS EQUIPAMENTOS NECESSARIOS NO LABORATORIO -->
		<fieldset  class="bradius"><legend style="text-align: center;"><b> Selecione os equipamentos </b></legend>
			<input checked type="checkbox" name="cDshow" id="tDatashow" style="margin-left: 6px;" value="Sim" /> Datashow <br>
			<input type="checkbox" name="cMic" id="tMic" style="margin-left: 6px;" value="Sim" /> Microfone <br>
			<input type="checkbox" name="cSom" id="tSom" style="margin-left: 6px;" value="Sim"> Caixa de Som
		</fieldset><br/>
		<!-- AREA DE TEXTO PARA O USUARIO ESCREVER PROGRAMA QUE DESENHA UTILIZAR NO LABORATORIO -->
		<label><strong>Softwares (Opcional)</strong><textarea name="cSof" id="tSof" rows="10" style="margin-left: 10px;" cols="38" class="textog bradius" placeholder="Digite o nome dos Programas"></textarea></label><br>
		<input type="submit" class="sb bradius" value="Agendar" style="margin-left: 25px;" onclick="Agendar()" />
		</form>
       
	</div>

</body>
</html>

This is my first site, I don’t have a degree in CC or anything, I just did computer technician, so sorry if I messed up in any part of the code, I’m still adapting to it! Criticisms and suggestions ALWAYS welcome from me!

Thank you!

html5 select selected-option

  • Put what you have, but already in advance, you will have to send through an AJAX request the date selected for PHP, do the necessary searches in the database and popular the select with the return. If you use JSON, JS/PHP communication is very quiet.

  • No one can explain to me how I can solve my problem???

No answers

Browser other questions tagged html5 select selected-option

You are not signed in. Login or sign up in order to post.