JavaScript Select Value an PHP script übergeben und Ergebnis in Div ausgeben

[Shadow1701]

Guten Morgen,

php kann ich ja einigermaßen, javascript und ajax eher weniger, deshalb bitte ich euch um Hilfe.

Ich habe ein <select> und wähle irgendwas aus, die value der <option> soll an ein php script übergeben werden und die Ausgabe vom PHP script soll dann in einem <div> auf der selben Seite angezeigt werden. Also das <div> soll mit den geänderten Daten aktualisiert werden. Das Ganze natürlich ohne die Seite neu zu laden.

Scheinbar gebe ich die falschen Suchbegriffe ein den ich finde nicht wirklich was mit der Suchmaschine.
Hat jemand ein oder ein paar Links für mich?
Vielleicht sogar Zeit und Lust ein einfaches Beispiel zu coden?

Ich danke euch.

 

[Cool Master]

Ohne die Seite neu zu laden? Da brauchst du etwas wie Ajax oder vergleichbares. Ansonsten wenn die Seite nicht neu geladen werden soll wieso überhaupt mit PHP arbeiten und nicht direkt alles per JS machen?

 

[pseudopseudonym]

Mit fetch geht das, der Thread hatte ein halbwegs ähnliches Problem:
https://www.computerbase.de/forum/threads/javascript-wie-im-script-auf-async-warten.2180662/

Musst dann auf Changes von deiner Selection lauschen und da dann fetch und das Verändern der Daten triggern.

 

[Shadow1701]

Danke für den link und die Erklärung @pseudopseudonym
Leider kenne ich mich mit ajax zuwenig aus als das mir das weiterhelfen würde.

Ich habe z.B. ein <select>

<form action="index.php" method="post" name="form1">
<select name="selectid" onchange="einefunktion(this.options[this.selectedIndex].value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="test">test</option>
</select>
</form>

​

Dann habe ich noch ein <div>

<div class="output123"></div>

Jetzt soll die value der selectid an output.php übergeben werden, sobald das PHP script fertig ist, soll das Ergebnis innerhalb des DIV output123 ausgegeben werden.
Das php script dazwischen ist nötig da Daten aus einer Datenbank und aus einer Textdatei verglichen und aufbereitet werden.

 

[tRITON]

Du solltest dich mehrstufig der Lösung nähern.

Erst mal Daten von JS -> die Backend Seite senden. Das kannst Du dir ja dann einfach im XDEBUG ansehen, was bei PHP ankommt. Danach schreibst Du den PHP Teil, welcher die Daten an dein JS AJAX Call zurück sendet.
Dann gibst Du die Daten einfach mal in der Console aus. Wenn das alles klappt, dann schreibst du den JS Teil der die Daten in deinem "output123" manipuliert und schon bist Du fertig.

Ich würde dafür, wenn das nicht das einzige Script bleibt, JQuery nehmen. https://api.jquery.com/jQuery.ajax/

Geade das:

// Assign handlers immediately after making the request,
// and remember the jqXHR object for this request
var jqxhr = $.ajax( "example.php" )
  .done(function() {
    alert( "success" );
  })
  .fail(function() {
    alert( "error" );
  })
  .always(function() {
    alert( "complete" );
  });
 
// Perform other work here ...
 
// Set another completion function for the request above
jqxhr.always(function() {
  alert( "second complete" );
});

finde ich sehr praktisch.

 

[C22]

Am meisten lernst du wenn du es ohne Framework selber programmierst. Stichwort XMLHttpRequest.

Entferne das form / action Element. Und dann ungefähr so:
Das PHP Skript sollte ein JSON Objekt zurückgeben.

const button = document.createElement("button");

button.addEventListener("click", () => {
   
    // Selektierten Wert
    const myId = document.getElementById("mySelect").value;
   
    const xhr = new XMLHttpRequest();

    xhr.open('GET', '/action.php?id=' + myId);

    xhr.responseType = 'json';

    xhr.send();

    // the response is {"message": "Hello, world!"}
    xhr.onload = function() {
      const responseObj = xhr.response;
      document.getElementById("myDiv").innerHTML = (responseObj.message);
    };
})

 

[Shadow1701]

Danke @C22 , soweit ich deinen Code verstehe, hast du es mir auf dem Silbertablett serviert. ich bringe es trotzdem nicht zum Laufen. Die Console gibt auch nichts her. Wahrscheinlich wird es gar nicht erst aufgerufen.

index.php -> auch wenn es kein php ist, aber egal

<script>

const button = document.createElement("select456");

button.addEventListener("click", () => {
 
    // Selektierten Wert
    const myId = document.getElementById("select456").value;
 
    const xhr = new XMLHttpRequest();

    xhr.open('GET', '/output.php?id=' + myId);

    xhr.responseType = 'json';

    xhr.send();

    // the response is {"message": "Hello, world!"}
    xhr.onload = function() {
      const responseObj = xhr.response;
      document.getElementById("myDiv").innerHTML = (responseObj.message);
    };
})

</script>
                  
                    <div id="myDiv"></div>
                  
                    <hr>

                    <select name="selectid" id="select456">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="test">test</option>
                    </select>

und die output.php:

<?php

 //$_GET['id'] <= damit kann ich irgendwas machen
  $return=array("message" => "Hello World!");
  echo json_encode($return);
 
?>

Warum muss die Form weg? Am Ende werde ich sie brauchen um das Formular abzuschicken. Die ganze Mühe hier dient nur dem Zweck die Auswahl der "selectid" zu erleichtern.

 

[C22]

Das form muss weg weil dabei immer die Seite neu geladen wird, und das möchtest du ja nicht. Ist auch eher so 90er Style.

das ist falsch:

const button = document.createElement("select456");

ich hatte hier einen Button zum absenden der Daten erstellt, der muss aber noch ins DOM eingebunden werden, dass er auch sichtbar wird.

Generell kann du auch im Browser mit F12 die Developer Tools bemühen und dann im Debugger z.B. in Zeile 12 einen Breakpoint setzen um zu prüfen ob dein Skript aufgerufen wird und myId korrekt befüllt wird.

Dein PHP Skript kannst du testen indem du es direkt in der URL aufrufst, dann siehst du ob das JSON korrekt erzeugt wird.
z.B.
https://localhost/output.php?id=0815

 

[pseudopseudonym]

Am Ende werde ich sie brauchen um das Formular abzuschicken.

Nicht unbedingt, kannst du auch mit fetch oder so machen.

 

[Shadow1701]

Ich brauche also einen eigenen button? Es funktioniert nicht indem ich einfach das Select wähle?

output.php habe ich getestet, das funktioniert.

Das hier funktioniert aber immer noch nicht:

<script>

const button = document.createElement("button1");

button.addEventListener("click", () => {
   
    // Selektierten Wert
    const myId = document.getElementById("select456").value;
   
    const xhr = new XMLHttpRequest();

    xhr.open('GET', '/output.php?id=' + myId);

    xhr.responseType = 'json';

    xhr.send();

    // the response is {"message": "Hello, world!"}
    xhr.onload = function() {
      const responseObj = xhr.response;
      document.getElementById("myDiv").innerHTML = (responseObj.message);
    };
})

</script>
                
            
            
                
                    <div id="myDiv"></div>
                    
                    <hr>
                    
                    <button id="button1">Klick</button>
                    <select name="selectid" id="select456">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="test">test</option>
                    </select>

 

[C22]

kannst auch einen Change EventListener am Select registrieren:

document.getElementById("select456").addEventListener("change", () => {
   
    // Selektierten Wert
    const myId = this.value;
  
    const xhr = new XMLHttpRequest();

    xhr.open('GET', '/output.php?id=' + myId);

    xhr.responseType = 'json';

    xhr.send();

    // the response is {"message": "Hello, world!"}
    xhr.onload = function() {
      const responseObj = xhr.response;
      document.getElementById("myDiv").innerHTML = (responseObj.message);
    };
});

 

[Shadow1701]

Danke. Nachdem ich das script am ende des body tags eingefügt habe funktioniert es

Edit: Selbst die Anpassung, dass verschiedene <select> die jeweils gewünschten <div> befüllen habe ich jetzt hinbekommen. Man könnte auch sagen, wenigstens das habe ich selbst geschafft.

Für alle die sowas brauchen, das hier funktioniert:

<html>
<head>
<title>Test</title>

</head>
<body>
                
                    <div id="selectdiv456"></div>
                    
                    <hr>
                    
                    <div id="selectdiv457"></div>
                    
                    <hr>
                    
                    <select name="selectid" id="select456" onchange="javascript:myFunction(this.value,'selectdiv456')">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="test">test</option>
                    </select>
                    
                    <hr>
                    
                    <select name="selectid" id="select457" onchange="javascript:myFunction(this.value,'selectdiv457')">
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="test2">test2</option>
                    </select>

<script>


 function myFunction(thevalue,divid){  
    // Selektierten Wert
    const myId = thevalue;
  
    const xhr = new XMLHttpRequest();

    xhr.open('GET', './output.php?id=' + myId);

    xhr.responseType = 'json';

    xhr.send();

    // the response is {"message": "Hello, world!"}
    xhr.onload = function() {
      const responseObj = xhr.response;
      document.getElementById(divid).innerHTML = (responseObj.message);
    };
};

</script>


</body>
</html>

 

[Shadow1701]

Ich grüße euch nochmal

Das Ganze ist jetzt implementiert und funktioniert auch. Bis auf einen Schönheitsfehler, es wird ein ganzes template getauscht, also HTML, nicht einfach text.

Darunter sind auch immer 1 bis 2 bilder die z.B. so aussehen:

<img src="./images/d504d840dd053621e86914d99961d55a.png" title="title" border="0" height="20" width="72">

Das height und das width entspricht nicht den tatsächlichen Maßen von dem Bild, das Bild ist größer und soll verkleinert dargestellt werden. Wenn jetzt aber das übergebene Template in das DIV geschoben wird, werden die Bilder in der Originalgröße angezeigt.

Wie behebe ich das?

 

[Cool Master]

Die Angaben entfernen, CSS-Klassen vergeben und dann im CSS den Stil definieren.

 

[Shadow1701]

Es werden verschiedenen Bilder angezeigt, in verschiedenen Größen. Damit die Bilder nicht verzerrt dargestellt werden habe ich höhe und breite entsprechend umgerechnet.

Natürlich ist es möglicher per CSS eine maximale Höhe anzugeben ohne das die Bilder verzerrt dargestellt werden. Ich sehe wieder einmal den Wald vor lauter Bäumen nicht.

Danke dir.