Ajax -> PHP (Array)

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

sveka

Mitglied
26 Mai 2006
175
1
18
34
Hallo, ich habe mehrere Checkboxen und möchte nach jedem anklicken einer Checkbox, dass per Ajax Daten aus einer DB geladen werden. Mit einem Einzelwert klappt auch alles. Aber wie bekomme ich ein Array übertragen? Hier die entsprechenden Codeteile.

Die Checkboxen (kommen per while-Schleife. Sind also mehrere, alle mit demselben Namen.

PHP:
echo ' <input class="form-check-input" type="checkbox" name="kategorie[]" value="' . $check['ID'] . '" id="kategorie" data="' . $check['ID'] . '"> ';

Hier das Script...

Javascript:
<script>
$(document).ready(function(){

 load_data();
      
 function load_data(query)
 {
    
  $.ajax({
   url:"ajax/select_u_kategorien.php",
   method:"POST",
   data:{query:query},
   success:function(data)
   {
    $('#unterkategorie_ausgabe').html(data);
   }
  });
 }
 $('input[name="kategorie[]"]').change(function(){
  var search = [];
  search = $(this).val();
  if(search != '')
  {
   load_data(search);
  }
  else
  {
   load_data();
  }
 });
});

</script>

Es funktioniert ... aber ich brauche ein Array was sich nach jedem Klick / oder DeKlick auf eine Checkbox aktualisiert.

In der PHP greife ich normal per $_POST auf die Variable zu. Danke.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Eigentlich ist nichts dagegen einzuwenden, jQuery zu verwenden, aber in diesem Fall geht es viel einfacher mit dem FormData-Objekt und der fetch-API. Würde dann so aussehen:
Code:
    <form>
        <input type="text" name="param1" value="some-param">
        <input type="text" name="param2" value="some-other-param">
        <input type="number" name="numparam" value="1.24">
    </form>
    <span id="out"></span>
    <script>
        fetch('testpost.php', {
            method: 'post',
            body: new FormData(document.querySelector('form'))
        }).then(res => {
            return res.text();
        }).then(res => {
            console.log(res);
            document.getElementById('out').innerHTML = res;
        });
    </script>
Das ist eine Demo, die ich in der Schublade hatte, musst Du für deine Bedürfnisse anpassen.
 

sveka

Mitglied
26 Mai 2006
175
1
18
34
Das geht auch bei Checkboxen? Denn diese haben alle denselben Namen, da ich ein Array benötige.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Gute Frage, Checkboxen sind ein wenig ein spezieller Fall, weil in einem Formular nur die gecheckten übertragen werden und die anderen unter den Tisch fallen. Muss es denn unbedingt ein Array sein, gängiger wäre es eigentlich, ihnen jeweils einen individuellen Namen zu geben?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
... und das mit dem Value ist auch eher ungebräuchlich, normale Weise arbeitet man mit den Namen. Ist dann der entspr. POST-Parameter gesetzt, war die Checkbox gecheckt, ist er nicht vorhanden, war sie es nicht.
 

sveka

Mitglied
26 Mai 2006
175
1
18
34
Bei mir sind die Checkboxen beispielsweise "Kategorien" und benötige die IDs (als Value) um dann damit weitere Unterkategorien aus einer weiteren Tabelle zu lesen. Natürlich nur von den "gecheckten".

Daher die Idee des Arrays ...
 

sveka

Mitglied
26 Mai 2006
175
1
18
34
Ich habe auch noch ein data-Attribut. Das könnte man in JQuery auch nehmen. Aber wie bekomme ich das in ein Array?
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Das in ein Array zu bekommen ist kein Problem, ich weiß nur noch nicht, wie man das dann beim Ajax in den Post-Parameter bekommt. Werde ich mal untersuchen.
 

tk1234

Aktives Mitglied
2 September 2020
130
28
28
Ich habe auch noch ein data-Attribut. Das könnte man in JQuery auch nehmen. Aber wie bekomme ich das in ein Array?
ein document.querySelectorAll('input:checked') liefert dir alle ausgewählten Checkboxen (ggf. Selector noch um den Namen der Checkboxen erweitern), über eine Schleife lassen sich dann alle Werte einem Array hinzufügen - zum Übertragen dann einfach einen String daraus machen. Das ganze geht sicher auch mit JQuery, Vanilla-JS reicht aber genauso.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Dieses funktioniert:
Code:
        let cbvals = [];
        $('.form-check-input').each((idx, item) => {
            if (item.checked) cbvals.push(item.value);
        });
        console.log(cbvals);
        // jetzt haben wir die Checkboxen in dem Array cbvals
        // und koennen dieses mit Ajax uebertragen:
        $.ajax('testpost.php', {
            method: 'post',
            data: { cbs: cbvals },
            success: response => {
                console.log(response);
            }
        });
Du musst jedoch berücksichtigen, dass in dem Array dann nur die Checkboxen drin sind, die gecheckt sidn, die anderen tauchen nicht auf.
 

sveka

Mitglied
26 Mai 2006
175
1
18
34
Hm. Habe jetzt erstmal den Teil

Javascript:
 let cbvals = [];
        $('.form-check-input').each((idx, item) => {
            if (item.checked) cbvals.push(item.value);
        });
        console.log(cbvals);

getestet und in der Konsole nachgesehen ... aber diese ist bei mir leer. Auch wenn ich Checkboxen "checke".
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Das Problem ist, dass dieses Skript sofort beim Seitenaufruf abläuft und dann sind die Chechboxes noch nicht gecheckt. Tust Du es später, läuft das ins Leere. Lege es in den change-Handler, dann sollte es funktionieren.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Dies funktioniert bei mir:
Code:
    <script>
        $('input.form-check-input').change(function () {
            let cbvals = [];
            $('.form-check-input').each((idx, item) => {
                if (item.checked) cbvals.push(item.value);
            });
            console.log(cbvals);
            $.ajax('testpost.php', {
                method: 'post',
                data: { cbs: cbvals },
                success: response => {
                    console.log(response);
                }
            });
        });
 
  • Like
Reaktionen: sveka

sveka

Mitglied
26 Mai 2006
175
1
18
34
Ich danke nochmal für die tolle Hilfe. :) Ich habe jetzt auch beschlossen mich mehr mit JQuery / JavaScript zu beschäftigen. Es erleichtert manche Dinge doch ungemein.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Da nicht für! Das heißt sicher, dass das Formular über Ajax jetzt funktioniert?