valore value di un id da passare in chiamata ajax

robyspider77 · 2022-08-08T12:23:11+0200

buongiorno a tutti
premesso che sono un programmatore principiante , quindi molta sintassi non mi è ancora chiara
ho questa chiamata ajax:

Codice:

<script>
function mostralafascia(str) {
  if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","fasce.php?q="+str,true);
  xmlhttp.send();
}}

</script>

e questo è il form php

Codice:

<div class='datefasce'>
<form >
<select class='fascia'  onclick='mostralafascia(this.value)'>
  <option class='selGiorno' ></option>
 
 
  </select>
 
</form></div>
<div id='txtHint'></div>

le opzioni del select 'selGiorno' vengono da un'altra funzione javascript che per semplicità non ho elencato

praticamente cliccando un calendario sulla select selGiorno viene elencato il giorno che devo selezionare e cliccandolo si effettua la chiamata ajax.
Io vorrei saltare il passaggio della select e vorrei che cliccando il giorno (che sarebbe un div sul calendario) si effettui la chiamata ajax direttamente.
Un oggetto div può avere un'attributo "value"?
Oppure se cliccando su di un div volessi passare ad ajax la value di un altro elemento, al posto di "(this.value)" come faccio a passare la value di un altro id creato ad hoc?
scusatemi ancora grazie a chi mi vorrà rispondere

WmbertSea · 2022-08-08T13:12:02+0200

Ciao, non mi è troppo chiaro il contesto per cui fatico a capire cosa stai chiedendo.

Come è fatto questo "calendario sulla select" in cui devi cliccare?

robyspider77 ha scritto:
vorrei saltare il passaggio della select

cioè vuoi eliminare la select?
in tal caso dove dovrebbe essere mostrato il calendario su cui devi cliccare?

robyspider77 ha scritto:
Un oggetto div può avere un'attributo "value"?

Secondo le specifiche html no, ma potresti ad esempio usare un attributo "data" con cui impostare il valore che ti serve.
E' chiaro che poi il valore dovrai recuperarlo attraverso quell'attributo "data".

Banale esempio:

HTML:

<div id="tuo_div" data-valore="12345">Clicca qui</div>

<script>
  var div = document.getElementById('tuo_div');
  div.addEventListener('click', function(){
    alert('Il valore è: ' + this.dataset.valore);
  })
</script>

robyspider77 ha scritto:
Oppure se cliccando su di un div volessi passare ad ajax la value di un altro elemento, al posto di "(this.value)" come faccio a passare la value di un altro id creato ad hoc?

In quel caso bisogna capire come puoi identificare l'altro elemento.

robyspider77 · 2022-08-08T13:48:32+0200

WmbertSea ha scritto:
Ciao, non mi è troppo chiaro il contesto per cui fatico a capire cosa stai chiedendo.

Come è fatto questo "calendario sulla select" in cui devi cliccare?

cioè vuoi eliminare la select?
in tal caso dove dovrebbe essere mostrato il calendario su cui devi cliccare?

Secondo le specifiche html no, ma potresti ad esempio usare un attributo "data" con cui impostare il valore che ti serve.
E' chiaro che poi il valore dovrai recuperarlo attraverso quell'attributo "data".

Banale esempio:

HTML:

<div id="tuo_div" data-valore="12345">Clicca qui</div> <script> var div = document.getElementById('tuo_div'); div.addEventListener('click', function(){ alert('Il valore è: ' + this.dataset.valore); }) </script>

In quel caso bisogna capire come puoi identificare l'altro elemento.

ciao
questa è la pagina php (body)

Codice:

<body>
<?php


$sql = "SELECT * FROM `giorni` WHERE id = 31";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  // output data of each row
  $prova=1;
  while($row = $result->fetch_assoc()) {
      
    echo "
<div id='intestazione'><p>Prenota</p></div>



<div id='contenitore'>
<div class='contenitore2' id='luglio2022' text='2022-07'>LUGLIO 2022 <div id='freccia1' class='frecciasinistra'><--</div>
<div id='giornisett'><table><tr><td>mon   </td><td>tue   </td><td>wed   </td><td>thu   </td><td>fri     </td><td>sat    </td><td>sun         </td></tr></table></div>
<div class='giornovuoto'></div><div class='giornovuoto'></div><div class='giornovuoto'></div><div class='giornovuoto'></div><div class='".trovaIlGiorno('2022-07-01')."'><p>01</p></div><div class='".trovaIlGiorno('2022-07-02')."'><p>02</p></div><div class='".trovaIlGiorno('2022-07-03')."'><p>03</p></div><div class='".trovaIlGiorno('2022-07-04')."'><p>04</p></div><div class='".trovaIlGiorno('2022-07-05')."'><p>05</p></div><div class='".trovaIlGiorno('2022-07-06')."'><p>06</p></div><div class='".trovaIlGiorno('2022-07-07')."'><p>07</p></div><div class='".trovaIlGiorno('2022-07-08')."'><p>08</p></div><div class='".trovaIlGiorno('2022-07-09')."'><p>09</p></div><div class='".trovaIlGiorno('2022-07-10')."'><p>10</p></div>
        ...

</div>

</div>
<div class='visualizza'></div>
<div class='datefasce'>
<form >
<select class='fascia'  onclick='mostralafascia(this.value)'>
  <option class='selGiorno' ></option>
 
 
 
  </select>
 
</form></div>
<div id='txtHint'></div>

";
    
    
    
    
  }
} else {
  echo "0 results";
}
$conn->close();
?>

</body>
</html>

la funzione 'trovailGiorno' si collega ad un database mySQL e verifica se quel giorno è libero oppure prenotato

Codice:

$(document).ready(function(){
      $(".giorno").click(function(){
               $(".orari").show();
                $(".giorno").css("background-color", "slategrey");
                $(this).css("background-color", "orange");
                $("#scrivi").append($(this).parent().attr('text')+"-"+$(this).text());
        var data= $(this).parent().attr('text')+"-"+$(this).text();
        $("input").remove("#"+ data);
        
        var blocco2 = $("<option value=''></option>");
        blocco2.val(data);
        blocco2.attr("value", data);
        $(".selGiorno").text(data);
        
        blocco.appendTo($(".visualizza"));
        blocco2.appendTo($(".visualizza"));
        
       });
});

questa è lo script che, cliccando sul div del giorno, ne cambia il colore e mi scrive come valore della option 'selGiorno' la data precisa.

praticamente io vorrei che cliccando sul giorno, mi si apra con la chiamata ajax un php di fasce orarie dove poi con un collegamento al database di mySql avviene un controllo per vedere se la fascia oraria è libera oppure prenotata

Codice:

<?php
include "root.php";

$q = $_GET['q'];


$sql="SELECT * FROM giorni WHERE id = '31'";
$result = mysqli_query($conn,$sql);

while($row = mysqli_fetch_array($result)) {
$orario1=substr($row[$q ],0,1);
$orario2=substr($row[$q ],1,1);
$orario3=substr($row[$q ],2,1);
$orario4=substr($row[$q ],3,1);
$orario5=substr($row[$q ],4,1);
$orario6=substr($row[$q ],5,1);
$orario7=substr($row[$q ],6,1);
$orario8=substr($row[$q ],7,1);
$orario9=substr($row[$q ],8,1);
$orario10=substr($row[$q ],9,1);
$orario11=substr($row[$q ],10,1);
$orario12=substr($row[$q ],11,1);

function trovaFascia($fascia) {
if ($fascia=='1')
 
{
$classeFascia="fasciaorariaprenotata";   
}
 
else
{
    
    $classeFascia='fasciaoraria';
}
return $classeFascia;
}

  echo "<div class='orari' >Orari del giorno <br><div class='fasciaoraria'>fasciaprova</div>
<div class= '" .trovaFascia($orario1) . "' id= 'f89'><br>08:00-09:00</div><div class= '" .trovaFascia($orario2) . "' id= 'f910'>09:00-10:00</div><div class= '" .trovaFascia($orario3) . "' id= 'f1011'>
10:00-11:00</div><div class='" .trovaFascia($orario4) . "'id= 'f1112'>11:00-12:00</div><div class= '" .trovaFascia($orario5) . "' id= 'f1213'>12:00-13:00</div><div class= '" .trovaFascia($orario6) . "' id= 'f1314'>13:00-14:00</div><div class= '" .trovaFascia($orario7) . "' id= 'f1415'>14:00-15:00</div><div class= '" .trovaFascia($orario8) . "' id= 'f1516'>15:00-16:00</div><div class= '" .trovaFascia($orario9) . "' id= 'f1617'>16:00-17:00</div><div class= '" .trovaFascia($orario10) . " id= 'f1718'>17:00-18:00</div>
<div class= '" .trovaFascia($orario11) . "' id= 'f1819'>18:00-19:00</div><div class= '" .trovaFascia($orario12) . "' id= 'f1920'>19:00-20:00</div></div>";
 
 
}

mysqli_close($conn);
?>

</body>
</html>

il codice funziona , vorrei evitare il passaggio di dover cliccare sulla option per far aprire le fasce, cioè vorrei che mi si aprissero solo cliccando sul giorno, magari prendendo come dati il valore di 'selGiorno' che già è impostato

WmbertSea · 2022-08-08T14:33:38+0200

perdonami ma se devo riassemblare le varie parti del tuo codice per ottenere un esempio funzionante preferisco passare la mano. Sarebbe meglio se tu fornissi un cosiddetto "esempio minimo funzionante".

Ad ogni modo forse può andare bene l'uso di un attributo data, come già ti ho indicato. Prova ad impostare il sistema in quel modo.
Fai sapere se trovi difficoltà.

Cerca

Cerca

valore value di un id da passare in chiamata ajax

robyspider77

Nuovo Utente

WmbertSea

Moderatore

robyspider77

Nuovo Utente

WmbertSea

Moderatore

Discussioni simili