selectmenu versturen met ajax

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Sietsko Bos

Sietsko Bos

29/11/2018 10:10:24
Quote Anchor link
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.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
?>
Gewijzigd op 29/11/2018 10:18:38 door Sietsko Bos
 
PHP hulp

PHP hulp

19/03/2019 03:50:31
 
Adoptive Solution

Adoptive Solution

29/11/2018 10:19:51
Quote Anchor link
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

Sietsko Bos

29/11/2018 10:25:19
Quote Anchor link
Jammer genoeg niet, dat had ik gevonden met Google. Alleen wat ik nu nodig heb is te ingewikkeld voor me.
 
Adoptive Solution

Adoptive Solution

29/11/2018 10:38:48
Quote Anchor link
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

Sietsko Bos

29/11/2018 13:57:41
Quote Anchor link
Ik heb een poging gedaan, maar begrijp ook niet goed hoe het werkt en wat ik moet doen..

Code (php)
PHP script in nieuw venster Selecteer het PHP script
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
<?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);    
?>
Gewijzigd op 29/11/2018 14:29:56 door Sietsko Bos
 
Adoptive Solution

Adoptive Solution

29/11/2018 14:35:49
Quote Anchor link
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 :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
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 :

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
$('#observatie').html(html);
 
- Ariën -
Beheerder

- Ariën -

29/11/2018 15:47:58
Quote Anchor link
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
<?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

Sietsko Bos

29/11/2018 16:32:24
Quote Anchor link
Ik heb de aanpassingen gedaan maar het werkt nog steeds niet.
 
Thomas van den Heuvel

Thomas van den Heuvel

29/11/2018 16:42:49
Quote Anchor link
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.
Gewijzigd op 29/11/2018 16:50:09 door Thomas van den Heuvel
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.