selectmenu versturen met ajax

Door Sietsko Bos op 29-11-2018 10:10 gewijzigd op 29-11-2018 10:18

1.968 views

Hoi,

Ik heb op een pagina veel selectmenu's staan die ik nu laat zien met PHP. Indien een waarde in een menu veranderd dan wordt het form automatisch verstuurd en de waarde geupdate in de database. De achtergrond (van een td) en het listmenu worden aangepast aan de waarde van het listmenu. Omdat na een POST de pagina refresht veranderd de kleur, ik heb wel een selector ingebouwd voor HTML die onthoud welke listmenu is gewijzigd en daar weer naar toegaat.

Het nadeel is dat bij elke wijziging de pagina refresht. Ik weet dat het mogelijk is met AJAX om het te doen zonder dat de pagina refresht. Omdat ik helemaal niets van javascrit en ajax weet zou ik jullie willen vragen om hulp om dit te maken.

Wat ik gemaakt heb ik PHP zal ik hierbij zetten wat misschien het één en ander verduidelijkt.

<?PHP
echo '<div id="'.$aRow_score['id'].'"><form name="Form_'.$aRow_score['id'].'">';
echo '<select class="'.$selectcolor.'" data-style="btn-primary" name="'.$selectmenu_get.'"
onChange= "document.location.href=document.Form_'.$aRow_score['id'].'.'.$selectmenu_get.'.options[document.Form_'.$aRow_score['id'].'.'.$selectmenu_get.'.selectedIndex].value">';
echo '<option value=""';
if (!(strcmp("", $selectmenu))) { echo " selected"; }
echo '>'.$aRow_score['score'].'</option>';
// selecteer het aantal kleuren voor het selectmenu
if ($kleuren_row['obs_kleuren'] == 5) { $sql_cijfers = "SELECT cijfer FROM obs_cijfers ORDER BY cijfer ASC"; }
else { $sql_cijfers = "SELECT cijfer FROM obs_cijfers ORDER BY cijfer ASC LIMIT 0, 4"; }
$resultaat_cijfers = mysqli_query($connectie, $sql_cijfers);
$sCategory = '';
while ($aRow_cijfer = mysqli_fetch_assoc($resultaat_cijfers)) {
if ( $aRow_cijfer['cijfer'] != $sCategory ) {
$sCategory = $aRow_cijfer['cijfer'];
echo '<option value="index.php?leerkracht=overzicht&'.$selectmenu_get.'='.$sCategory.'&id='.$aRow_score['id'].'&score='.$sCategory.'#'.$aRow_score['id'].'"';
if (!(strcmp($sCategory, $selectmenu))) { echo " selected"; }
echo ">";
echo $sCategory;
echo "</option>";
}
}
echo "</select></form></div>";
echo '</td>';
?>

En zo ziet dan de HTML eruit voor elke listmenu met alleen andere waardes

<?HTML
<td width="2%" align="center" valign="middle" bgcolor="#93050f"><div id="106">
<form name="Form_106">
<select class="DarkRedColor" data-style="btn-primary" name="selectmenu_106"
onChange= "document.location.href=document.Form_106.selectmenu_106.options[document.Form_106.selectmenu_106.selectedIndex].value">
<option value="" selected>1</option>
<option value="index.php?leerkracht=overzicht&selectmenu_106=0&id=106&score=0#106">0</option>
<option value="index.php?leerkracht=overzicht&selectmenu_106=1&id=106&score=1#106">1</option>
<option value="index.php?leerkracht=overzicht&selectmenu_106=2&id=106&score=2#106">2</option>
<option value="index.php?leerkracht=overzicht&selectmenu_106=3&id=106&score=3#106">3</option>
<option value="index.php?leerkracht=overzicht&selectmenu_106=4&id=106&score=4#106">4</option>
<option value="index.php?leerkracht=overzicht&selectmenu_106=5&id=106&score=5#106">5</option>
</select>
</form>
</div>
</td>
?>

Adoptive Solution

29-11-2018 10:19

In dit topic lijkt het er wel op dat u iets van javascript en ajax weet.

https://www.phphulp.nl/php/forum/topic/zend-hidden-field-met-jquery-solved-/100986/

En ik maak daar uit op dat u wel weet hoe het moet.

Sietsko Bos

29-11-2018 10:25

Jammer genoeg niet, dat had ik gevonden met Google. Alleen wat ik nu nodig heb is te ingewikkeld voor me.

Adoptive Solution

29-11-2018 10:38

Hier een voorbeeld hoe je een onderdeel in een list selecteert, verstuurt met ajax en een antwoord terugkrijgt.

http://adoptive.2kool4u.net/dynamic_select/

Bekijk de broncode hoe het werkt.

Pagina bevat link naar origineel artikel.

Sietsko Bos

29-11-2018 13:57 gewijzigd op 29-11-2018 14:29

Ik heb een poging gedaan, maar begrijp ook niet goed hoe het werkt en wat ik moet doen..

<?PHP
<?php
$sql_cijfers = "SELECT cijfer FROM obs_cijfers ORDER BY cijfer ASC";
$resultaat_cijfers = mysqli_query($connectie, $sql_cijfers);
?>
<select id="observatie">
<?php
while ($aRow_cijfer = mysqli_fetch_assoc($resultaat_cijfers)) {
echo '<option value="'.$aRow_cijfer['cijfer'].'">'.$aRow_cijfer['cijfer'].'</option>';
}
echo '<input name="id" type="hidden" id="id" value="'.$aRow_score['id'].'">';
?>
</select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#observatie').on('change',function(){
var observatieID = $(this).val();
if(countryID){
$.ajax({
type:'POST',
url:'ajaxData.php',
data:'observatie_score='+observatieID+'&id='+<?php echo $aRow_score['id']; ?>,
success:function(html){
location.reload();
}
});
}
});
});
</script>

ajaxData.php

<?php
// database connectie
$connectie = new mysqli("localhost", "xxx", "xxx", "xxx");

// update de score
$sql_update = "UPDATE obs_scores SET score = '".$_POST['observatie_score']."' WHERE id= '".$_POST['id']."'";
mysqli_query($connectie, $sql_update);
?>

Adoptive Solution

29-11-2018 14:35

Na regel 42 alleen de options genereren zoals in regels 7 - 12 en dan een echo.

Zoals ik het doe met de 3 menus op mijn pagina :

echo '<option value="">Select state</option>';
while($row = $query->fetch_assoc()){ 
	echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</option>';
}

Vervolgens in regel 27 het succes van regel 26 verwerken :

$('#observatie').html(html);

- Ariën -

29-11-2018 15:47


<?php
    $sql_update = "UPDATE obs_scores SET score = '".$_POST['observatie_score']."' WHERE id= '".$_POST['id']."'";
?>

Ik zie hier wel een bron van SQL-injection. Dus gebruik mysqli_real_escape_string()

Sietsko Bos

29-11-2018 16:32

Ik heb de aanpassingen gedaan maar het werkt nog steeds niet.

Thomas van den Heuvel

29-11-2018 16:42 gewijzigd op 29-11-2018 16:50

In bovenstaande fragmenten zie ik nergens de omvattende loop waar $aRow_score['id'] vandaan komt? Zit elk dropdownmenu ook in een aparte form? Haal je elke iteratie ook weer opnieuw dezelfde waarden op uit obs_cijfers? Include je in elke iteratie opnieuw de jQuery lib op en herhaal je hierin tevens de .ready()-riedel? Oftewel: hoe luidt jouw volledige code?

Je hoeft dit trouwens niet in allerlei aparte formulieren te steken, je moet enkel de data die je wilt versturen op een zodanig makkelijke manier bundelen zodat je deze met javascript kunt verzamelen en versturen in de AJAX-call, en hier heb je zelf de volledige controle over.

EDIT: het was ff zoeken, maar ik was vrij zeker dat er recent iets soortgelijks voorbij kwam, ook in die thread wilde men een deel van een formulier POSTen naar een AJAX-script. Daar werd nog wat verder gegaan in die zin dat het een formulier was waar je dynamisch velden kunt toevoegen, maar zo uitgebreid is het hier niet. Het idee blijft echter hetzelfde: grabbel alle info bij elkaar met een find() en/of een closest() and Bob's your uncle.

Reageren

Inloggen om te reageren