Daten aus Javascript an PHP übergeben

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

Capa

Neues Mitglied
7 Dezember 2015
23
0
1
36
Hallo an alle,

ich möchte euch um Unterstützung bei folgendem Vorhaben bitten.

Ziel: Durch Mausklick in ein Feld soll der Buchstabe T in das Feldgeschrieben werden.
Danach sollen die Koordinaten des Klicks an php übermittelt werden um sie in eine
Datenbank zu schreiben. Durch jeden Klick in das Feld wird ein neues T erzeugt.
Ich möchte jedes T in dem Feld sehen und in der Datenbank speichern.

Sowohl Datenbank als auch Tabelle sind angelegt. Ich scheitere leider an der Übergabe
der Koordinaten.

Hier mein Minimalbeispiel:
HTML:
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset = "utf-8" />
    <title> Klickbox </title>
    <h1 id="titel"> Klickbox </h1>
    <style>
    #feld{
    position: relative;
        top: 100px;
        left: 200px;
        width: 200px;
          height: 100px;
        background-color: #d3d3d3;
    }
    </style>
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>
    <div id="feld" onclick="klick(event)" ></div>
</head>

<body>
    <script>
    function klick(e){
        var div = document.createElement("DIV");
        var t = document.createTextNode("T");
       
        div.style.position="absolute";
        div.style.left = e.offsetX + "px";
        div.style.top = e.offsetY + "px";
            div.appendChild(t);
        document.getElementById("feld").appendChild(div);
        console.log(e.offsetX, e.offsetY)       
    }
    </script>

    <?php
        $con = mysqli_connect("", "root");
        mysqli_select_db($con, "klickbox");
   
        mysqli_close($con);
    ?>
</body>
</html>
Grüße & Danke Capa
 

Capa

Neues Mitglied
7 Dezember 2015
23
0
1
36
Vielen Dank für Deine Antwort.
Die beiden Seiten hatte ich bereits gefunden. Leider komme ich damit nicht voran.
Daher habe ich mich auch an dieses Forum gewendet.
 

Spicelab

Mod | ZENmechanic
Teammitglied
Moderator
27 November 2015
1.669
319
83
Goa

Capa

Neues Mitglied
7 Dezember 2015
23
0
1
36
Vielen Dank auch Dir für die Links.
Leider ist mir auch mit weiteren Links nicht geholfen.

Mir ist durchaus bewusst, dass mir der Schritt vor dem Datenbankeintrag fehlt. Genau aus
diesem Grund suche ich nun hier um Rat (keine Links). Bevor ich den Eintrag hier gestellt,
habe ich lange im Web recherchiert.

Ist jemand hier, der mir helfen kann?
 

threadi

Moderator
Teammitglied
Moderator
20 Oktober 2006
15.373
303
83
Leipzig
www.comedy-news.de
Die Links oben zeigen genau das was Du suchst: du musst per AJAX die von JavaScript ermittelten Daten an den Server übergeben. Dort nimmt eine PHP-Datei die Daten entgegen und speichert sie.

Wenn Du weiterhin damit ein Verständnisproblem hast, beschreib doch mal genauer was Du momentan zu dem Vorgang weißt. Dann könnte man erkennen wo dein gedankliches Problem ist.
 
  • Like
Reaktionen: Spicelab

Spicelab

Mod | ZENmechanic
Teammitglied
Moderator
27 November 2015
1.669
319
83
Goa
Die Links oben zeigen genau das was Du suchst: du musst per AJAX die von JavaScript ermittelten Daten an den Server übergeben. Dort nimmt eine PHP-Datei die Daten entgegen und speichert sie.

Wenn Du weiterhin damit ein Verständnisproblem hast, beschreib doch mal genauer was Du momentan zu dem Vorgang weißt. Dann könnte man erkennen wo dein gedankliches Problem ist.
Dem ist nichts hinzuzufügen :cool:
 

Capa

Neues Mitglied
7 Dezember 2015
23
0
1
36
Keines der beiden Beispiele in den Links ist mit dem angegebenen Quellcode lauffähig.
Aus diesem Grund habe ich ein Minimalbeispiel mitgeliefert.
 

threadi

Moderator
Teammitglied
Moderator
20 Oktober 2006
15.373
303
83
Leipzig
www.comedy-news.de
Natürlich gibt es für deinen Wunsch keine fertige Lösung. Du musst schon den Quellcode an das anpassen was Du benötigst. Das wichtigste an dem von dir zu erstellenden Code ist eigentlich der auslösende AJAX-Request. Da Du bereits jquery eingebunden hast, sollte es nicht schwer sein anhand der dokumentierten jquery-AJAX-Request-Beispiele hier

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

einen Code zu bauen der deinen Wunsch erfüllt.

Wenn Du dagegen erhoffst, dass dir hier jemand einen fertigen Code für deinen Wunsch schreibt, dann solltest Du dich an die Jobbörse wenden.
 

Capa

Neues Mitglied
7 Dezember 2015
23
0
1
36
Wenn ich mit dem Link zurecht kommen würde, hätte ich kein Problem.
Ich habe hier nicht nach Hilfe gefragt um Links als Antwort zubekommen, die ich im Web selbst finde.

Eigenartige Form der Hilfe.
Die Moderatoren können das Thema gern schließen und löschen.
 
B

bdt600

Guest

Tronjer

Moderator
Teammitglied
Moderator
8 Oktober 2010
5.220
480
83
Berlin
Wobei die Links alleine nicht weiterhelfen.

Leicht modifiziert entspricht die Frage des TE einer ToDo-List. Man hat zu Beginn ein einzelnes Input-Feld und bei jedem Enter oder Click auf einen Button wird ein weiteres erzeugt. Im Ergebnis erhält man eine Anzahl von Values, die erst in ein Array gepushed werden sollten, bevor dieses per AJAX weitergereicht wird.
 

Hanz Meier

Neues Mitglied
10 Mai 2020
1
0
1
40
function resetLock(send) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("output").innerHTML = this.responseText;
}
};
xhttp.open("POST", "reset.php", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("resetset="+send);
}


ich denke das das weiterhelfen könnte
in der letzten Zeile wo resetset steht ist die variable die du in php als $_POST bekommst und das send da stehen die daten drinn was du haben willst von javascript

ich hoffe das hilft jemanden denn ich habe auch tagelang danach gesucht und wollte halt kein jequery benutzen und siehe da es geht auch ohne aber warum mir das kaum einer verraten wollte ist mir ein rätsel