Javascript variablen an eine php datei übergeben

Stef

Hallo,

ich weiß grad überhaupt nicht weiter. Ich habe 4 verschiedene Radio und möchte, dass wenn man auf einen klickt, das die value dieses radio buttons dem php-script übergeben wird. Habe schon zahlreiche versucht aber es hat nicht funktioniert.

Mein HTML :

HTML

<html>
    <head>
        <title>Radio Button auslesen mit Jquery bei click</title>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


        <script src="radio.js"></script>
    </head>
    <body>
           <form name="form1">
               <label>Käsesorten:</label>
               <label>Fein<input type="radio" name="kaesesorten" id="fein" value="fein" 
               > </label>
               <label>Würzig<input type="radio" name="kaesesorten" id="wuerzig" value="wuerzig" 
               ></label>
               <label>Kräuter<input type="radio" name="kaesesorten" id="kraeuter" value="kraeuter"  
               ></label>
               <label>Pilz<input type="radio" name="kaesesorten" id="pilz" value="pilz"  
               ></label>
           </form>


           <div id="log"></div>
    </body>
</html>

Alles anzeigen

Mein Jquery-code mit ajax :

Code

$document().ready(function(){

    var value1 = $('#fein').val();
    var value2 = $('#wuerzig').val();
    var value3 = $('#kraeuter').val();
    var value4 = $('#pilz').val();


    
      var request = $.ajax({
  url: "formdaten.php",
  method: "POST",
  data: { val : value1,
 val : value2,
val : value3,
val : value4},

});
 
request.done(function( msg ) {
  $( "#log" ).html( msg );
});
 
request.fail(function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});


});

Alles anzeigen

formdaten.php:

PHP

<?php
if(isset($_POST['val'])){
    $values = $_POST['val'];


    print_r($values);
} else{


    echo' fail';
}
?>

Alles anzeigen

Aber das funktioniert nicht. Hoffe ihr könnt mir helfen.

Stef

Arne Drews

Hi,

Ich kann an keiner Stelle Deines Codes erkennen, dass Du auf das Klick-Event reagierst?!
Deinen Ajax-Request führt er imho nur einmal nach dem vollständigen Laden der Seite aus.

Ausserdem ist hier m.M.n. das Komma zu viel:

Code

[COLOR=#333333]val : value4},[/COLOR]

Ob JavaScript damit umgehen kann, bin ich mir nicht ganz sicher, würde Dir aber die Konsole Deines Browsers mitteilen.

Stef

Hey,

ja stimmt, habe es nun hinzugefügt. Ich habe nun für jeden wert sein eigenes ajax request gemacht, weil ja nur 1 Wert gesendet werden soll (der vom angeklickten radio button).

Es kommt weiterhin nix auf formdaten.php an. Was ich komisch finde ist, das auf der html seite die value ausgegeben wird. Ich glaube es wird durch folgende Funktion im jquery code erreicht:

Code

request.done(function( msg ) {
                                              $( "#log" ).html( msg );
                                            });

Aber ich frag mich wie msg die value der variable wert haben kann.

Mein folgender JQuery code :

Code

$(document).ready(function(){

        //radio1
        $("#fein").click( function() {
            if ($("#fein:checked") ) {

                 var wert1 = $("#fein").val()
                alert(wert1);




                    var request = $.ajax({
                        url: "formdaten.php",
                        method: "POST",
                        data: { value : wert1}

                        });

                        request.done(function( msg ) {
                          $( "#log" ).html( msg );
                        });

                        request.fail(function( jqXHR, textStatus ) {
                          alert( "Request failed: " + textStatus );
                        });
            }
        });


                    //Radio 2
                    $("#wuerzig").click( function() {
                            if ($("#wuerzig:checked") ) {

                                     var wert2 = $("#wuerzig").val()
                                    alert(wert2);




                                        var request = $.ajax({
                                            url: "formdaten.php",
                                            method: "POST",
                                            data: { value : wert2}

                                            });

                                            request.done(function( msg ) {
                                              $( "#log" ).html( msg );
                                            });

                                            request.fail(function( jqXHR, textStatus ) {
                                              alert( "Request failed: " + textStatus );
                                            });
                                }
                            });


                                 //radio3
                                $("#kraeuter").click( function() {
                                        if ($("#kraeuter:checked") ) {

                                             var wert3 = $("#kraeuter").val()
                                            alert(wert3);




                                            var request = $.ajax({
                                            url: "formdaten.php",
                                            method: "POST",
                                            data: { value : wert3}

                                            });

                                            request.done(function( msg ) {
                                              $( "#log" ).html( msg );
                                            });

                                            request.fail(function( jqXHR, textStatus ) {
                                              alert( "Request failed: " + textStatus );
                                            });
                                }
                            });
                                         //radio4
                                        $("#pilz").click( function() {
                                                if ($("#pilz:checked") ) {

                                                     var wert4 = $("#pilz").val()
                                                    alert(wert4);




                                                    var request = $.ajax({
                                                    url: "formdaten.php",
                                                    method: "POST",
                                                    data: { value : wert4}

                                                    });

                                                    request.done(function( msg ) {
                                                      $( "#log" ).html( msg );
                                                    });

                                                    request.fail(function( jqXHR, textStatus ) {
                                                      alert( "Request failed: " + textStatus );
                                                    });
                                        }
                            });






    });

Alles anzeigen

Ich habe geschaut und folgendes habe ich gefunden :

Code

$.post( [COLOR=#BA2121]"Mailer.php"[/COLOR], {
    json: mail
}, [COLOR=#008000][B]function[/B][/COLOR](return){
    [COLOR=#008000][B]if[/B][/COLOR](return == 0){
        alert([COLOR=#BA2121]"Keine Email Adresse"[/COLOR]);
    }
    [COLOR=#008000][B]else[/B][/COLOR]{
        alert([COLOR=#BA2121]"Es ist eine Email Adresse"[/COLOR]);
    }
}

Habe ich so eingebaut und geändert aber jetzt funktioniert nix mehr selbst nicht mehr das vorige alert.

So fange ich es ab :

PHP

<?php
    $value_kaeseart = null;
if(isset($_POST['value'])){
    $value_kaeseart = $_POST['value'];


    print_r($value_kaeseart);
} else if(is_null($value_kaeseart)){


    echo 'fail';
}
?>

Alles anzeigen

Gruß, Stef

Arne Drews

Hier mal als Beispiel zum Üben, allerdings ohne jQuery:

HTML

<html>
<head>
<title>Radio Button auslesen OHNE Jquery bei click</title>
<meta charset="utf-8">
<script src="radio.js"></script>
</head>
<body>
<form name="form1">
  <label>Käsesorten:</label>
  <label>Fein<input type="radio" name="kaesesorten" id="fein" value="fein"></label>
  <label>Würzig<input type="radio" name="kaesesorten" id="wuerzig" value="wuerzig"></label>
  <label>Kräuter<input type="radio" name="kaesesorten" id="kraeuter" value="kraeuter"></label>
  <label>Pilz<input type="radio" name="kaesesorten" id="pilz" value="pilz"></label>
</form>


<div id="log"></div>
</body>
</html>

Alles anzeigen

Code

window.onload = function() {


    var rButtons = document.querySelectorAll( 'input[type='radio']' );
    rButtons.forEach( function(e) {
        e.addEventListener( 'click', function() {
            var sPostValue = this.getAttribute('value');
            var oR = new XMLHttpRequest();

            oR.addEventListener( 'load', function() {
                document.getElementById('log').innerText = this.responseText;
            });


            oR.open( 'POST', 'formdaten.php', true );
            oR.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' );
            oR.send( 'data=' + encodeURIComponent(sPostValue) );
        });
    });
};

Alles anzeigen

PHP

<?php
echo ( $_POST['data'] )? print_r($_POST['data'], true): 'fail';

Bei der Variante ist es übrigens egal, wie viele RadioButtons Du hast, das Click-Event wird auf jeden gelegt und verarbeitet.

Gruß Arne

Stef

Hey,

vielen Dank für deine Mühe. Habe jetzt den code getestet. Jedoch weiterhin das gleiche Problem. Es wird nix an die formdaten.php gesendet.

In formdaten.php wird das ausgegeben :

Notice: Undefined index: data in E:\Xampp\htdocs\value_auslesen\formdaten.php on line 2
fail

Ich möchte das Übergeben der daten mit ajax gerne machen. Aber auch da geht es nicht. Wie bereits gesagt habe ich schon bei vielen forums nachgeschaut aber bei den wo es behoben wurde erkenne ich keinen Unterschied beim script als zwischen mein script. Und JQuery liegt mir momentan besser.

Hat dies bei dir Funktioniert ?

BTW: Villt liegt es ja da ran. Ich tuh es lokal aufm rechner machen mit Xampp.

Gruß Stef

Arne Drews

Der Code aus #4 ist 1:1 getestet und funktioniert, so wie er gepostet wurde.
Bei Deiner Meldung übergibst Du eine andere Schlüsselbezeichnung, als "data". Das liegt dann aber an Dir und nicht an den Scripten!

Stef

Ok. Du sagst, dass wenn ich deine ganzen verschiedenen script so ausführe das es funktioniert. Habe jetzt einfach mal meine scripts durch deine ersetzt nochmal ausgeführt.

Auf der HTML seite wird es zwar ausgegeben aber auf der PHP seite wird nur fail ausgegeben.

Ich weiß nicht warum das so ist..

Arne Drews

Zitat

Auf der HTML seite wird es zwar ausgegeben aber auf der PHP seite wird nur fail ausgegeben.

Du willst mir aber jetzt nicht sagen, Du versuchst die PHP Datei direkt aufzurufen, oder?!
Ich hoffe, Dir ist klar, dass dann keine POST-Daten vorhanden sind und das Ergebnis nur allzu logisch ist...

Stef

Ich habe es mir so gedacht, das ich wenn ich die php-datei so aufrufe das nach dem klick auf den radio button dieser php datei per Post die value gesendet wird und das ich dann in dieser php datei die weiterverarbeiten kann.

Ist das nicht möglich?
Bzw. soll das formular in der PHP datei sein ?

Ne auch nicht die php variable bekommt trotzdem den wert nich und wenn ich das html in die php datei mache wo die value hin gesendet wird wird das ganze html dokument ausgegeben.

Btw. warum wird bei diesem php script nix ausgegeben ?

PHP

<?php
if(isset($_POST['data'])){


    $kaeseart = $_POST['data'];


     $kaeseart;
}


?>

Alles anzeigen

Arne Drews

Ich befürchte Du hast da was am Prinzip nicht ganz verstanden.
Oder ich verstehe Dich nicht, das wäre auch denkbar.

Diese PHP-Datei:

PHP

<?php
echo ( $_POST['data'] )? print_r($_POST['data'], true): 'fail';

wird in dem Moment ausgeführt, in dem sie aufgerufen wird.
Rufst Du sie bspw. so auf:

Code

http://www.example.com/formdata.php

existiert kein POST ( beachte: HTTP-Request-Bindung! ). Woher soll er also data kennen?!
Wenn Du in der HTML-Datei auf einen Radio-Button klickst, wird ein HTTP-Request erzeugt, der POST-Daten mitsendet, so dass die Datei diesen verarbeiten kann.
Vollkommen egal, wie oft Du die PHP-Datei selbst aufrufst, es wird immer ein neuer HTTP-Request erzeugt, in dem der POST nicht bekannt ist.

Du sagst aber selber, dass er Dir in dem Container, die richtigen Ergebnisse anzeigt, wenn Du auf einen RadioButton klickst.
Scheinbar ist das aber für ich nicht das Ergebnis, das DU wolltest.

Also müssetst Du nochmal detailliert beschreiben, was genau Du eigentlich möchtest.
Vielleicht gehst Du ja auch den falschen Weg und benötigst gar keine XMLHttpRequests?

- - - Aktualisiert - - -

Zitat
Btw. warum wird bei diesem php script nix ausgegeben ?
PHP
<?phpif(isset($_POST['data'])){    $kaeseart = $_POST['data'];     $kaeseart;}?>

Ja... Wie... Soll er raten, was Du ausgeben möchtest?!

Stef

Das stimmt. Hab ich nicht so recht verstanden.

Aso ok. Ja genau die value wird dann ausgegeben.

Ich möchte, dass wenn ich jetzt auf ein radio button klicke, dass die value dieses feldes an die php datei geschickt wird sodass ich dort abfrage ob was gesendet wurde und wenn ja speichere diesen wert in eine variable welche dann zur datenbankabfrage dienen soll wo man dann mittels dieser value den käsen der zu dieser eigenschaft passt aus der datenbank holt und dann in der html seite ausgibt.

Mit PHP geht die abfrage nicht weil das formular ja erst abgesendet werden muss, was ich aber nicht mag.

Arne Drews

Ja, den Grundstein dafür hast Du ja bereits.

Klick auf RadioButton erzeugt XmlHttpRequest mit POST-Daten
PHP-Datei empfängt POST Daten
Dieser Part fehlt: PHP-Datei verarbeitet die empfangen POST-Daten und stößt den Schreibvorgang für die DB an.
PHP-Datei macht Ausgabe je nach Status der Verarbeitung
JavaScript empfängt den Response des Requests und werte diesen ggf. aus.

Vielleicht würde ich den Response noch als JSON liefern, aber das ist für den Ablauf erstmal irrelevant.

Es gibt definitiv keinen Grund, die PHP-Datei direkt aufzurufen!

Stef

Ok. Das heißt in der php datei die gesendetet value in eine variable tun dann dbverbindung starten dann dbabfrage und dann gleich die ausgabe. Findet dann die Ausgabe davon auf der HTML seite statt ? Verwirrt mich grad etwas.

Ne doch nicht der wert ist ja in der php-datei garnicht vorhanden.

Achso so läuft das, also wir schicken die value an die php datei welche dann die value ja ausgibt. Die ausgabe erfolgt dann im html dokument ?

Arne Drews

Ich glaube, Du meinst das richtige.

Der Klick auf einen Radio löst den Request mit POST-Daten an die PHP Datei aus
PHP Datei verarbeite die Daten und führt ggf. die SQL-Anweisungen durch
PHP-Datei mach Status-Ausgabe
In der HTML-Datei wird die Ausgabe der PHP-Datei als Response empfangen und ebenfalls verarbeitet

Stef

Aso ok. Dann ist this.responseText also die ausgabe der php datei welche dann im div mit id log ausgegeben wird ?

Weitere Frage wenn ich weitere so input felder mit anderem namen haben, dann muss ich ja das xmlhttprequest entsprechend ändern für dies also anstatt : var rButtons = document.querySelectorAll( 'input[type='radio']' ); dass : var rButtons = document.querySelectorAll( 'input[name='radiobuttonnamen']' ); ?

Noch ne Frage. Unzwar habe ich jetzt 8 auswahlsections für Käse. Wie kann ich jedes der 8 sections selbst ansprechen und von jeden 8 die value auslesen, sodass da dann 8 werte ausgegeben werden.

So sieht HTML aus:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Radio Button auslesen OHNE Jquery bei click</title>
        <meta charset="utf-8">
        <script src="radio.js"></script>




    </head>
<body>
<form name="form1">
  <label>Milchsorte: </label>
  <label> <input type="radio" name="milchsorte" id="kuh" value="kuh"> Kuh</label>
  <label> <input type="radio" name="milchsorte" id="ziege" value="ziege"> Ziege</label>
  <label> <input type="radio" name="milchsorte" id="schaf" value="schaf"> Schaf</label>
  <label> <input type="radio" name="milchsorte" id="bueffel" value="bueffel"> Büffel</label>


  <br>


  <label>Milchgüte</label>
  <label>Rohmilch<input type="radio" name="milchguete" id="rohmilch" value="rohmilch"></label>
  <label>Thermisiert<input type="radio" name="milchguete" id="thermisiert" value="thermisiert"></label>
  <label>Pasteurisiert<input type="radio" name="milchguete" id="pasteurisiert" value="pasteurisiert"></label>
  <label>Büffel<input type="radio" name="milchguete" id="bueffel" value="bueffel"></label>


  <br>


  <label>Laktose</label>
  <label>L- (nein)<input type="radio" name="laktose" id="l-" value="l-"></label>
  <label>L+ (ja)<input type="radio" name="laktose" id="l+" value="l+"></label>


   <br>


  <label>Reifegrad</label>
  <label>Jung<input type="radio" name="reifegrad" id="jung" value="jung"></label>
  <label>Halbreif<input type="radio" name="reifegrad" id="halbreif" value="halbreif"></label>
  <label>Reif<input type="radio" name="reifegrad" id="reif" value="reif"></label>
  <label>Vollreif<input type="radio" name="reifegrad" id="vollreif" value="vollreif"></label>


  <br>


  <label>Würze</label>
  <label>Frisch<input type="radio" name="wuerze" id="frisch" value="frisch"></label>
  <label>Mild<input type="radio" name="wuerze" id="mild" value="mild"></label>
  <label>Feinwürzig<input type="radio" name="wuerze" id="feinwuerzig" value="feinwuerzig"></label>
  <label>Aromatisch<input type="radio" name="wuerze" id="aromatisch" value="aromatisch"></label>
  <label>Starke Würzung<input type="radio" name="wuerze" id="starkgewuerzt" value="starkgewuerzt"></label>

   <br>


  <label>Konsistenz</label>
  <label>Weich<input type="radio" name="konsistenz" id="weich" value="weich"></label>
  <label>Cremig<input type="radio" name="konsistenz" id="cremig" value="cremig"></label>
  <label>Fest<input type="radio" name="konsistenz" id="fest" value="fest"></label>
  <label>Parmesanig<input type="radio" name="konsistenz" id="parmesanig" value="parmesanig"></label>


   <br>


  <label>Geschmack</label>
  <label><input type="radio" name="geschmack" id="nussig" value="nussig"> Nussig</label>
  <label><input type="radio" name="geschmack" id="kraeuterig" value="kraeuterig"> Kräuterig</label>
  <label><input type="radio" name="geschmack" id="zitronig" value="zitronig"> Zitronig</label>
  <label><input type="radio" name="geschmack" id="sahnig" value="sahnig"> Sahnig</label>
  <label><input type="radio" name="geschmack" id="buttrig" value="buttrig"> Buttrig</label>
  <label><input type="radio" name="geschmack" id="milchig" value="milchig"> Milchig</label>




  <br>


    <label>Herkunftsland</label>
  <label><input type="radio" name="herkunftsland" id="deutschland" value="deutschland">D</label>
  <label><input type="radio" name="herkunftsland" id="niederlande" value="niederlande">NL</label>
  <label><input type="radio" name="herkunftsland" id="tschechien" value="tschechien">CH</label>
  <label><input type="radio" name="herkunftsland" id="oestereich" value="oestereich">AU</label>
  <label><input type="radio" name="herkunftsland" id="usa" value="usa">USA</label>
  <label><input type="radio" name="herkunftsland" id="spanien" value="spanien">ESP</label>
  <label><input type="radio" name="herkunftsland" id="finnland" value="finnland">FIN</label>
  <label><input type="radio" name="herkunftsland" id="daenemark" value="daenemark">DÄN</label>
</form>


<div id="log"></div>
</body>
</html>

Alles anzeigen

Arne Drews

Zitat

Aso ok. Dann ist this.responseText also die ausgabe der php datei welche dann im div mit id log ausgegeben wird ?

Jap

Zitat

Weitere Frage wenn ich weitere so input felder mit anderem namen haben, dann muss ich ja das xmlhttprequest entsprechend ändern für dies also anstatt : var rButtons = document.querySelectorAll( 'input[type='radio']' ); dass : var rButtons = document.querySelectorAll( 'input[name='radiobuttonnamen']' ); ?

Solange alles Radio-Types sind, brauchst Du das nicht anpassen. Es sei denn, Du möchtest für verschiedene Radios unterschiedliche Aktionen durchführen in der PHP. Da würde ich dann aber eher ein action-Schlüssel zusätzlich mit dem Request übermitteln.
PHP kann dann daran entscheiden, was er machen soll. JSON wird ab da dann imho immer diskutabler...

Stef

Ok.

Ja genau ich möchte von jedem der 8 input radio "abteilen" je 1ne value zurück bekommen, sodass ich mit diesen 8 in der php weiterarbeiten kann.

Zitat

ein action-Schlüssel zusätzlich mit dem Request übermitteln

Ich habe damit nun erst angefangen mit dem und weiß ehrlich gesagt nicht wie man dies nun umsetzen kann. Habe auch schon nachdem gesucht aber nicht fündig geworden. Hast du paar Beispiele wo dies mir besser rüberbringen kann?

Zitat

JSON wird ab da dann imho immer diskutabler...

Ok Json ist ja auch soart für das speichern und transpotieren von diesen mehreren Valuen zuständig. Dann muss man ja in diesem beispiel 8 verschiedene js variablen haben ?

Stef

Kannst du mir bitte paar Denkanstöße geben zu dem ? Ich hab jetzt nochmals nach dem gesucht aber nix hilfreiches gefunden.

Arne Drews

Ich schreibe heute Abend ein kleines Tutorial zum Thema XMLHttpRequest und -Response mit Bezug auf JSON als Datenaustauschformat und poste den Link dann hier.

Stef

Ok vielen Dank.

Tags