Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Übergabe Inputwert per Ajax

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • [Erledigt] Übergabe Inputwert per Ajax

    Hallo zusammen,

    ich habe ein Problem wie es sicher schon mal vorkam, aber ich bekomme es nicht gebacken und bitte daher um Hilfe.

    Es handelt sich hierbei um eine Datenbankabfrage mittels AJAX.
    Dabei soll der Wert des Inputfeldes beim Bestätigen des Buttons an die funktion matrikelAnfordern übergeben werden und mit der DB abgeglichen werden.
    Die DB-Abfrage klappt auch.
    Nur die Übergabe des Input-Values klappt nicht.
    Wie unten zu sehen ist, habe ich dem Button ein Klick-Ereignis zugeordnet und dann den Aufruf der funktion mit der Übergabe des Parameters zugewiesen.
    Danach ist noch ein externer Event-Listener mit dem Bubble-Verfahren.

    Code:
    <html>
    <head>
        <title>Test Ajax</title>
        <script type="text/javascript">
    function matrikelAnfordern(matrikelGo)
    {	
    	var matrikel = matrikelGo;
    	alert(matrikel);
    	
    	var req = new XMLHttpRequest();
    	req.open("GET", "matrikelSearch.php?matrikel=" + matrikel , true);
    	req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    	req.onreadystatechange = matrikelAuswerten;
    	req.send();
    }
    
    function matrikelAuswerten(e)
    {
    	if(e.target.readyState == 4 && e.target.status == 200)
    	{
    		document.getElementById("matrikelYesNO").value = e.target.responseText;
    	}
    }
    </script>
    </head>
    <body>
    
    		    
    	<div id="matrikelInputContainer">
    		<input type="input" name="matrikel" id="matrikel"/>
    		<input type="button" name="validateMatrikel" id="validateMatrikel" value="Matrikel prüfen">
    		<input type="text" name="matrikelYesNO" id="matrikelYesNO" />
    	</div>
    	
    	
    	<script type="text/javascript" src="extEventhandler.js"></script> <!--Einbindung von Bubble-->
        <script type="text/javascript">
    	var matrikelGO = document.getElementById("matrikel").value;
    	document.getElementById("validateMatrikel").onclick = function(){matrikelAnfordern(matrikelGO);};
    	myEhandler("validateMatrikel", "click", matrikelAnfordern(matrikelGO));
    	</script>        
    
    </body>
    </html>
    Leider klappt die Übergabe des Parameters nicht. Für Hilfe wäre ich sehr dankbar.
    Vielen Dank im Voraus und viele Grüße.
    loupOS


  • #2
    Hey loupOS.

    Wo das genaue Problem bei Dir liegt, weiß ich leider auch nicht.
    Allerdings habe ich Deinen Code mal in Richtung jQuery umgebastelt und muss sagen, dass bei mir alles einwandfrei funktioniert.

    Code:
    <!doctype html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Test AJAX</title>
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script>
    function matrikelAnfordern(matrikelGo)
    {	
      var matrikel = matrikelGo;
    
      $.ajax({
        url: 'matrikelSearch.php',
        type: 'POST',
        data: {'matrikel': matrikel},
        dataType: 'JSON',
        success: function(payload){
          $("#matrikelYesNo").val(payload.result);
        }
      });
    }
    </script>
    </head>
    
    <body>
    <div id="matrikelInputContainer">
      <input type="input" name="matrikel" id="matrikel" value="Test" />
      <input type="button" name="validateMatrikel" id="validateMatrikel" value="Matrikel prüfen">
      <input type="text" name="matrikelYesNO" id="matrikelYesNO" />
    </div>
    
    <script type="text/javascript">
    
    $("#validateMatrikel").click( function()
    { 
      matrikelAnfordern($("#matrikel").val()); 
    });
    </script> 
           
    </body>
    </html>
    Die matrikelSearch.php gibt hier bei mir zwar nur den übergebenen Wert zurück, aber zu Testzwecken bezüglich der Parameterübergabe reicht's.

    PHP-Code:
    <?php 
        $matrikel 
    $_POST['matrikel'];
        die(
    json_encode(array("result" => $matrikel)));
    ?>
    Der Wert, der im ersten Text-Input steht, müsste danach auch im zweiten Text-Input stehen.

    Natürlich konnte ich hier Dein externes EventHandler-Script nicht berücksichtigen, da ich dessen Inhalt nicht kenne.

    Ich hoffe, das hilft Dir wenigstens etwas, solltest Du Dich entscheiden, jQuery 'ne Chance zu geben.

    Viele Grüße,

    Lightshade

    Kommentar


    • #3
      Hallo Lightshade,

      erst einmal vielen Dank für die Lösung. Leider hatte ich die Tage ein wenig tun und daher konnte ich mir deinen Beitrag noch nicht genauer ansehen.
      Ich hatte es jetzt so gelöst, dass der Wert beim Klicken über onchange an eine Funktion übergeben wird.

      Noch mal kurz zu deiner Lösung:
      Gut ist ja schon mal, dass die Übergabe per "POST" erfolgt. Danke dafür.
      Leider bin ich noch nicht so fit in jQuery. Könntest du noch mal kurz den Abschnitt mit "success" erläutern? Den Rest kapiere ich ohne Probleme.



      Vielen Dank und viele Grüße,
      loupOS

      Kommentar


      • #4
        Hey.

        Dieses "success" ist eine Callback-Funktion der $.ajax()-Methode von jQuery.

        Sie wird automatisch ausgeführt, sobald der Request, der an das im URL-Parameter angegebene Script gesendet wurde, erfolgreich abgeschlossen wurde.
        Gegensätzlich dazu gibt's noch die "error"-Funktion, die genau so angegeben wird, die automatisch aufgerufen wird, sollte der Request scheitern.

        Der "payload"-Parameter im Beispiel hat in diesem Fall den Wert, der im Beispiel-PHP-Script via die(json_encode(...)) zurückgegeben wurde.


        Hoffe, es ist halbwegs verständlich. Ansonsten hier nochmal der Link zur jQuery.ajax()-Dokumentation:

        http://api.jquery.com/jquery.ajax/

        Viele Grüße,

        Lightshade

        Kommentar


        • #5
          Hallo Lightshade,

          ich habs gerafft.

          Vielen Dank und viele Grüße,
          loupOS

          Kommentar


          • #6
            Hallo zusammen,

            ich muss das Fass noch mal aufmachen. Bei mir funzt die Datenübertragung nicht. Kann mir jemand den entscheidenen Tipp geben?
            Ich vermute ja, dass es am Syntax von "data: {prob: probandZK} " liegt.

            Code:
            $("#button").click(send_demographic);  
                    
                    function send_demographic() {
                       
                       var proband = new Array();
                       
                        //erzeugtes Objekt mit Demographiedaten des Probanden
                        proband = ($("#formDemo").serializeArray().map(function(v) {return [v.name, v.value];} )); 
                        
                        //Objekt wird wird in JSON-Zeichenkette umgewandelt
                        var probandZK;
                        if(window.JSON) probandZK = JSON.stringify(proband);    //wenn Browser JSON unterstützt, dann diese Methode
                        else probandZK = JSON.parse(proband);                   //ansonsten diese Methode
                    
                        //Übergabe der Zeichenkette an die Serverdatei 
            
                        $.ajax({
                        url: url,
                        type: 'POST',
                        dataType: 'JSON',  
                        data: {prob: probandZK}   
                           
            //            success: function(payload){             
            //              $("#formDemo").attr("action", payload.result);
            //            }
            
                        });
            
                    }
            Ich danke euch vielmals.

            Viele Grüße
            loupOS

            Kommentar

            Lädt...
            X