Generate html content according to combobox after pressing a button

1

I have an html form with:

1 course combo, 1 division combo, and 1 shift combo

it is a school.

If you are going to take attendance in the morning you should list the students (I already have it on a button with php) in a table with 5 columns for the type of fault:

absence, late arrival 40 minutes later and 80 minutes later, early withdrawal 40 minutes before and 80 minutes before.

But if it's late, only 3 columns should be shown:

absence, late arrival and early withdrawal

When I load the page I have the three combos, but in which way I can, by clicking on the button, besides consulting the list of students, showing the table according to the shift combo, if you select the first 5 tomorrow and but the last 3.

JS:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
function nuevoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
        }
    }

    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
$(document).ready(function(){

 $("#listar").click(function(){


 var url = "consultaInasistencias.php"; // El script a dónde se realizará la petición.
    $.ajax({
           type: "POST",
           url: url,
           data: $("#busqueda").serialize(), // Adjuntar los campos del formulario enviado.
           success: function(data)
           {
               $("#respuesta").html(data); // Mostrar la respuestas del script PHP.
           }
         });

    return false; // Evitar ejecutar el submit del formulario.
 });


 $("#Actualizar").click(function(){

 var url = "insertar.php"; // El script a dónde se realizará la petición.
    $.ajax({
           type: "POST",
           url: url,
           data: $("#listado").serialize(), // Adjuntar los campos del formulario enviado.
           success: function(data)
           {
               $("#respuesta").html(data); // Mostrar la respuestas del script PHP.
           }
         });

    return false; // Evitar ejecutar el submit del formulario.
 });
});

HTML:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="content-type" content="text/html" />


    <title>Sistema de Gestion de Alumnos</title>
    <link rel="stylesheet" href="../../Css/Formularios.css"/>
    <script src="../../../Sistema/jquery-3.1.0.js"></script>
    <script type="text/javascript" src="listado.js"></script>
</head>
<body>
    <div id="contenedor">

        <header id="cabecera">  
            <div id="C1">
                <div class="imagen1"><div class="imagen2"></div></div>
                <p class="icono">GESTION.AR</p>
            </div>

            <div id="box">
               <p id="titulo">Sistema de Gestión Escolar</p>
            </div>
        </header>
        <form action="" method="post" id="busqueda">
         <section id="seccion">
            <p>Seleccione el curso y la division a listar </p><br />
            <p>Curso:<select name="cursos">
             <?php foreach ( $rscursos as $curso){?>
                         <option value="<?php echo $curso["idcurso"];?>"><?php echo $curso["curso"];?></option>

                <?php }?>
          </select> Division:
           <select name="divisiones">
             <?php foreach ( $rsdivisiones as $division){?>
                         <option value="<?php echo $division["iddivision"];?>"><?php echo $division["division"];?></option>

                <?php }?>
           </select>Turno:
           <select id="turno">
           <option value="" selected="selected">Seleccione...</option>
            <option value="M">Mañana</option>
            <option value="T">Tarde</option>
           </select>
           <input type="button" id="listar" value="Obtener listado"/></p>
       <p><?php if (isset($msj)){ echo $msj;}?></p>
       </section>

    </form>
        <form method='post' id='listado' name='listado'>
         <section id='seccion'> 

            <table class='listaalumnos'>
            <tr>

                <th width='25%' id='titulocolumna' rowspan='2'>Nombre</th>

                <th width='25%' id='titulocolumna'rowspan='2'>Apellido</th>
                <th scope='col' colspan='6' width='25%' id='titulocolumna'>Inasistencia:</th>
            <tr><td width='10%' id='titulocolumna' >Entera</td>
                <td width='10%'id='titulocolumna'>Hasta 40min</td>
                <td width='10%'id='titulocolumna'>Hasta 80min</td>
                <td width='10%'id='titulocolumna'>Antes 40min</td>
                <td width='10%'id='titulocolumna'>Antes 80min</td></tr>

            </tr>

            <?php 
            if (isset($rsalumnos) && $rsalumnos!=null){
              $total=count($rsalumnos);
              $i=0;
              ?> <input type='hidden' name='total' id='total' value='<?php echo count($rsalumnos); ?>'/><?php
                foreach($rsalumnos as $alumno){$i++; ?><tr>
              <div><input type='hidden' size='0%' name='idalu<?php echo $i;?>' id='idalu' value='<?php echo $alumno['idalumno'];?>'/> 

               <td width='25%'> <?php echo $alumno['nombre'];?></td> 
               <td width='25%'> <?php echo $alumno['apellido']; ?></td> 
               <td width='10%'> <input type='radio' value='1' name='alumno<?php echo $i;?>' id='i1' /></td>
               <td width='10%'> <input type='radio' value='2' name='alumno<?php echo $i;?>' id='i2' /></td> 
               <td width='10%'> <input type='radio' value='3' name='alumno<?php echo $i;?>' id='i3'/></td>
               <td width='10%'> <input type='radio' value='4' name='alumno<?php echo $i;?>' id='i4'/></td> 
               <td width='10%'> <input type='radio' value='5' name='alumno<?php echo $i;?>' id='i5'/></td>
               </tr>
               <?php }}?>
            </div>
            </table>
       <div id='respuesta'></div>
             </section> 
        <input type="button" id="Actualizar" value="actualizar"/>

 </form>
<div id="respuesta"> 

        <footer id="pie"></footer>

    </div>
 </form>

</body>
</html> 
    
asked by Caruso 24.11.2016 в 23:58
source

1 answer

1

Well, I managed to do the part of changing the titles of the columns according to the turn. I clarify: I do not know if it will be the best solution .. I have two script with the html code inside an echo

div2.php

 <?php echo("
  <table class='listaalumnos'>
            <tr>
             
                <th width='25%' id='titulocolumna' rowspan='2'>Nombre</th>
             
                <th width='25%' id='titulocolumna'rowspan='2'>Apellido</th>
                <th scope='col' colspan='6' width='25%' id='titulocolumna'>Inasistencia:</th>
            <tr><td width='10%' id='titulocolumna' >Entera</td>
                <td width='10%'id='titulocolumna'>Hasta 40min despues</td>
                <td width='10%'id='titulocolumna'>Hasta 80min antes</td>
                <td width='10%'id='titulocolumna'>Hasta 40min despues</td>
                <td width='10%'id='titulocolumna'>Hasta 80min antes</td>
            
            
            </tr>
       ");?>
div1.php
 <?php echo("
  <table class='listaalumnos'>
            <tr>
             
                <th width='25%' id='titulocolumna' rowspan='2'>Nombre</th>
             
                <th width='25%' id='titulocolumna'rowspan='2'>Apellido</th>
                <th scope='col' colspan='6' width='25%' id='titulocolumna'>Inasistencia:</th>
            <tr><td width='10%' id='titulocolumna' >Entera</td>
                <td width='10%'id='titulocolumna'>Hasta 20min despues</td>
                <td width='10%'id='titulocolumna'>Hasta 20min antes</td>
            
            
            </tr>");
            ?>
and this is the functions file js
$(document).ready(function(){

   $('#curso').load("getcursos.php");
 $('#division').load("getdivisiones.php");

$("#turno").change(function(){
       var turno = $("#turno").val();
      
    if (turno=="M"){
    $("#divasistencia").load("/Sistema/Paginas/Preceptoria/div2.php");

    }else if (turno=="T")
    {
     $("#divasistencia").load("/Sistema/Paginas/Preceptoria/div1.php");   
        
    }  
    
});

$("#listar").click(function(){


    var url = "consultaInasistencias.php"; // El script a dónde se realizará la petición.
    $.ajax({
      
           type: "POST",
           url: url,
           data: $("#busqueda").serialize(), // Adjuntar los campos del formulario enviado.
           success: function(data)
           {
               $("#divasistencia2").html(data); // Mostrar la respuestas del script PHP.
           }
         });

});
 $("#Actualizar").click(function(){

 var url = "insertar.php"; // El script a dónde se realizará la petición.
    $.ajax({
           type: "POST",
           url: url,
           data: $("#listado").serialize(), // Adjuntar los campos del formulario enviado.
           success: function(data)
           {
               $("#respuesta").html(data); // Mostrar la respuestas del script PHP.
           }
         });

    return false; // Evitar ejecutar el submit del formulario.
 });
});

Of course after I show the divs in html, but I can not show the data of the students below.

    
answered by 26.11.2016 в 17:29