selectmenu versturen met ajax
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.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<?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>';
?>
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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?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>
?>
<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>
?>
Gewijzigd op 29/11/2018 10:18:38 door Sietsko Bos
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.
http://adoptive.2kool4u.net/dynamic_select/
Bekijk de broncode hoe het werkt.
Pagina bevat link naar origineel artikel.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<?PHP
[code]<?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);
?>
[code]<?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);
?>
Gewijzigd op 29/11/2018 14:29:56 door Sietsko Bos
Zoals ik het doe met de 3 menus op mijn pagina :
Code (php)
1
2
3
4
2
3
4
echo '<option value="">Select state</option>';
while($row = $query->fetch_assoc()){
echo '<option value="'.$row['state_id'].'">'.$row['state_name'].'</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 :
Code (php)
1
$('#observatie').html(html);
Code (php)
1
2
3
2
3
<?php
$sql_update = "UPDATE obs_scores SET score = '".$_POST['observatie_score']."' WHERE id= '".$_POST['id']."'";
?>
$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()
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.
Gewijzigd op 29/11/2018 16:50:09 door Thomas van den Heuvel