JavaScript Inhalt von HTML Textfeldern an JS/PHP übergeben

palaber · 16. Juni 2013

Aloah zusammen,

ich versuche mich momentan zwangläufig an HTML/CSS/JS/PHP.

Aktuell bin ich daran ein Textfeld in einer HTML Datei auszulesen, an JS weiter zu geben und von
dort einen Aufruf auf dem Server auszulesen der das ganze in eine Datenbank schreibt.
Aber irgendwie will das ganze noch nicht so

- Ich bekomm einfach keinen Eintrag in die DB.
Vielleicht findet ihr den Fehler, ich bin glaub codeblind oder so... ich benutzt im übrigen XAMPP als Serveremulation.

Hier mal mein Code:

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Gästebuch</title>
<link rel="stylesheet" type="text/css" href="guestbook.css" />
<script type="text/javascript" src="guestbook.js"></script>
</head>

<body>
	<h3>Gästebuch:</h3>
	Name: <input type="text" id="name"/><br><br>
	Nachricht: <input type="text" id="eintrag" />
	<input type="button" value="Eintragen" onclick="putIn(name.value)" />

<div id="ausgabe">
<p>Ausgabe: <span id="inset"></span></p> 
</div>

</body>
</html>

Code:

function putIn(name)
{
var myRequest

if (name.length==0)
	{
	alert("Name eingeben!");
	}

if (window.XMLHttpRequest)
  	{	// code for IE7+, Firefox, Chrome, Opera, Safari
 		 myRequest=new XMLHttpRequest();
	}

else
  	{	// code for IE6, IE5
  		myRequest=new ActiveXObject("Microsoft.XMLHTTP");
  	}
myRequest.open("POST","guestbook.php?q="+name, true);
myRequest.send(name);

}

PHP:

<?php
//Mit Datenbank verbinden
mysql_connect("localhost", "root". "") or die (mysql_error());
mysql_select_db("datenbank") or die (mysql_error());

//Daten in DB eintragen
$strSQL = "INSERT INTO guestbookdb(name)
	VALUES('".$_GET["q"]."')";

mysql_query(&strSQL) or die (mysql_error());
mysql_close();

?>

Bonusfrage:
Ich mir nicht ganz sicher bin ob ich mit onclick="funktion(id.value)" den
Wert der Textbox an mein JS Script weiter gebe. Was ich aber einfach nicht finde ist, wie ich mehrere Variablen
von JS zum PHP übergebe. Bei einer sollte es ja so funktionieren: open("POST" , "*.php?q="+name, true);
Aber wie geht es mit mehreren Variablen? Einfach mit &x="+name2 ?

Dann danke schön und good night!

..Gast · 16. Juni 2013

Zeile 10 im PHP Code, da ist ein & wo ein $ sein sollte.

Zeile 13 im HTML Code, da sollte nicht einfach auf 'name' verwiesen werden sondern:

HTML:

<input type="button" value="Eintragen" onclick="putIn(document.getElementById('name').value)" />

Bonusantwort:
Daten werden typischerweise mit dem Kaufmanns-Und & getrennt.
In deiner jetzigen Implementierung werden die Daten doppelt gesendet. Besser wäre es, sich für eines von beiden zu entscheiden, die Daten also entweder per GET oder POST aber nicht beides! Aber weil dein PHP Code lediglich den GET-Teil des Aufrufes auswertet:

HTML:

myRequest.open("GET","guestbook.php?q="+name+"&nochEinFeld=" + name + "&bla=123", true);
myRequest.send(null);

[grueni] · 16. Juni 2013

Wenn es was größeres & professionelles werde soll dann würde ich mir parallel noch JQuery (ist kein Muss),Transaktionen + Escaping (MySQL) anschauen.
Vor allem letzteres!

palaber · 16. Juni 2013

Also irgendwie klappt es immernoch nicht.
Ich kann, wenn ich die datenbank.php manuell aufrufe und in der URL das Objekt übergebe, Eintragungen in die DB vornehmen (datenbank.php?x=joe).
Aber vom JS klappt das irgendwie nicht! Ich bin echt ratlos...
Hier nochmal mein aktueller Code, für erstmal nur ein Objekt:

JS:

Code:

function putIn(name)
{
var myRequest

if (name.length==0)
	{
	alert("Name eingeben!");
	}

else
	{
	if (window.XMLHttpRequest)
  		{	// code for IE7+, Firefox, Chrome, Opera, Safari
 			 myRequest=new XMLHttpRequest();
		}

	else
  		{	// code for IE6, IE5
  			myRequest=new ActiveXObject("Microsoft.XMLHTTP");
	  	}

	myRequest.open("GET", "guestbook.php?x="+name, true);  // ich vermute das hier irgendwo der Fehler liegt
	myRequest.send();
	alert("Daten gesendet: " + name);   // Überprüfung für mich ob der Wert der Variablen stimmt
	}
}

PHP:

<?php

//Mit Datenbank verbinden
mysql_connect("localhost", "root". "") or die (mysql_error());
mysql_select_db("datenbank") or die (mysql_error());

//Daten in DB eintragen
$strSQL = "INSERT INTO guestbookdb(name) VALUES('".$_GET["x"]."')";
mysql_query($strSQL) or die (mysql_error());

mysql_close();
?>

Edit:
Der Code im JS:

Code:

myRequest.open("GET", "guestbook.php?x="+name, true);

sollte doch der URL mit Variablenübergabe datenbank.php?x=joe entsprechen, oder?

..Gast · 16. Juni 2013

Probier mal mit null bei .send:

Code:

myRequest.send(null);

palaber · 16. Juni 2013

Hat leider auch nix gebracht. Ich krieg noch die kriese

WilliTheSmith · 16. Juni 2013

Habs mal eben selber getestet und bei mir funktioniert es unter Chrome und FF, mehr hab ich nicht getestet

Änderungen sind nur die von ..Gast eingeflossen, der Fehler muss also bei dir liegen.

HTML:

<!DOCTYPE html>
<html>
<head>
<title>Gästebuch</title>
<link rel="stylesheet" type="text/css" href="guestbook.css" />
<script type="text/javascript" src="guestbook.js"></script>
</head>
 
<body>
	<h3>Gästebuch:</h3>
	Name: <input type="text" id="name"/><br><br>
	Nachricht: <input type="text" id="eintrag" />
	<input type="button" value="Eintragen" onclick="putIn(document.getElementById('name').value)" />
 
<div id="ausgabe">
<p>Ausgabe: <span id="inset"></span></p> 
</div>
 
</body>
</html>

Code:

function putIn(name)
{
var myRequest
 
if (name.length==0)
	{
	alert("Name eingeben!");
	}
 
if (window.XMLHttpRequest)
  	{	// code for IE7+, Firefox, Chrome, Opera, Safari
 		 myRequest=new XMLHttpRequest();
	}
 
else
  	{	// code for IE6, IE5
  		myRequest=new ActiveXObject("Microsoft.XMLHTTP");
  	}
myRequest.open("POST","guestbook.php?q="+name, true);
myRequest.send(null);
alert(name);
 
}

Auf PHP-Seite habe ich jedoch nur in eine Datei geschrieben, aber da der Part bei dir ja läuft, sollte das nicht das Problem sein.

PHP:

<?php

$datei = fopen("test", "w");
fwrite($datei, $_GET['q']);
 
?>

//edit: Ach ja, [grueni] stimme ich auch zu, unbedingt die Eingaben noch escapen

http://www.php.net/manual/de/function.mysql-real-escape-string.php

palaber · 16. Juni 2013

Also ich hab auch den FF und XAMPP. Ich bekomme aber keine Datensätze in die DB.
Der PHP Teil habe ich ja mit der manuellen Eingabe getestet... mhhh sehr komisch das es bei mir nicht klappt.

Edit:
Wo erstellt es denn die test datei? In dem Ordner, in dem die PHP Datei liegt? Hab es gerade mit deinem PHP Code getestet und da geht auch nix. Zumindest is da keine Datei.

Drexel · 16. Juni 2013

Javascript mal mit Firebug debuggen und schauen was tatsächlich für Werte in den Variablen stehen. Oder per alert ausgeben lassen.

Hancock · 16. Juni 2013

Mach mal die Entwicklerkonsole an und guck, was beim Netzwerk denn so als Antwort drin steht... Da steht dann wahrscheinlich ein PHP-Fehler.

palaber · 16. Juni 2013

@Drexel: im Javascript lass ich mir nach der Dateiübergabe ( .send() ) mit nem alert die variable x ausgeben. Da ist der richtig Wert drin!

@Hancock: i try...

Edit:
Also da kommt nen 404 Error - page not found...
--
[16:15:20.087] GET http://localhost/guestbook.php?x=test22 [HTTP/1.1 404 Not Found 10ms]
--

liegt das an dem http:// vor dem localhost?

Oh Gott, ich bin ja so dämlich... ich hab ja das nicht als guestbook.php sondern als datenbank.php erstellt

- Jetzt gehts - PEINLICH... Aber trotzdem vielen Dank!

Daaron · 16. Juni 2013

Mal ein paar Hinweise von meiner Seite dazu:

Schreib solche Sachen erst so, dass sie auch ohne JS funktionieren. Wozu überhaupt JS, wenn es prinzipiell auch wunderbar ohne geht? Denk immer daran, dass es User gibt, die kein JS nutzen wollen oder können.

Auch wenn es tatsächlich valide ist, <input> "nackt" zu verwenden, von der Semantik her gehören sich Inputs und Buttons in ein <form>. Außerdem solltest du deine Beschriftung nicht mit unspezifizierten Textnodes machen, sondern direkt <label> verwenden.

Dein PHP-Script solltest du in dieser Form nicht in die Nähe des Internets bringen. Das Ding ist eine wandelnde Sicherheitslücke und schreit geradezu nach einer SQL Injection. Mach es anständig, verwende Prepared Statements via PDO. Die mysql_... - Notation ist veraltet und schlichtweg hochgradig störanfällig.

Backslash · 18. Juni 2013

Du solltest es wenn möglich parallel mit und ohne JS anbieten, also ein ganz normales Form das abgesendet werden kann ohne JS und alternativ die Ajax methode, dass die Seite nicht unbedingt verlassen/neu geladen werden muss. jQuery würde das übrigens deutlich erleichtern.

Beispiel:

HTML:

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8" />
    <title>Gästebuch</title>
    <script type="text/javascript" src="jquery-2.0.2.js"></script>
    <script type="text/javascript" src="dynamic.js"></script>
  </head>
  <body>
    <form id="comment-form" method="POST" action="savecomment.php">
      <label>Titel: <input type="text" name="title" /></label>
      <label>Kommentar: <textarea name="comment"></textarea></label>
      <input type="submit" value="Eintragen" />
    </form>
  </body>
</html>

PHP:

<?php // savecomment.php

// do anything you want, saving to database or something
// but don't forget to validate user input and escape
// any text you write to a database
$formData = array($_POST['title'], $_POST['comment']);
file_put_contents("comments.txt", implode(",", $formData)."\n", FILE_APPEND | LOCK_EX);

print("Kommentar gespeichert");

?>

Code:

// dynamic.js

$(document).ready(function () {
  $("#comment-form").submit(function (eventObject) {
    $(this).load("savecomment.php", $(this).serializeArray());
    eventObject.preventDefault();
  });
});

Du kannst dann natürlich auch per Ajax die Kommentare neu laden um den neuen anzuzeigen, oder für diesen das HTML per JS erzeugen.

Suche

JavaScript Inhalt von HTML Textfeldern an JS/PHP übergeben

palaber

Captain

..Gast

Cadet 4th Year

[grueni]

Lt. Commander

palaber

Captain

..Gast

Cadet 4th Year

palaber

Captain

WilliTheSmith

Lt. Commander

palaber

Captain

Drexel

Lt. Commander

Hancock

Captain

palaber

Captain

Daaron

Fleet Admiral

Backslash

Captain

Ähnliche Themen