Daten in einer Datenbank aktualisieren (Ajax/JS)

Jhorst

Grünschnabel
Hi,

Ich habe folgendes Problem:

Ich lade nach einem Login die zugehörigen daten des Users automatisch in das Formular. Anschließend möchte ich falls mann den string eines feldes ändert und auf "aktualisieren" klickt diese Strings aufgenommen werden auf änderung vergleicht und anschließend ,falls sich ein string unterscheidet, korrekt in die DB speichert und diese angezeigt werden. Allerdings funktioniert das nicht wirklich.

Die Daten des Users werden nach laden der Seite korrekt abgerufen und angezeigt ledigich der aktualisierungs-button macht mir Probleme.

Es ist auszuschließen das die HTML oder die PHP datei nicht korrekt implementiert sei.

Als ich ajax noch nicht mit eingebunden habe funktionierte alles perfekt. Mit ajax, verstehe ich nicht warum das nicht funktioniert.

Bitte um Hilfe->

HTML:

Code:
<form id="forom" action='' methode='POST'>
		<div data-role="fieldcontain">
		<label for="vname">Vorname</label>
		<input type="text" id="vname" name="vname" value="" placeholder="Vorname"/>
		</div>
	<div data-role="fieldcontain">
		<label for="nname">Nachname</label>
		<input type="text" id="nname" name="nname" value="" placeholder="Nachname" />
	</div>
	<div data-role="fieldcontain">
		<label for="strasse">Adresse</label>
		<input type="text" id="strasse" name="strasse" value="" placeholder="Strasse" />
		<label for="ort"></label>
		<input type="text" id="ort" name="ort" value="" placeholder="Ort" />
	</div>
	<div data-role="fieldcontain">	
		<label for="email">Email</label>
		<input type="text" id="email" name="email" value="" placeholder="MustermanMax@abc.de" />
	</div>
	<div data-role="fieldcontain">
		<label for="tel">Telefon</label>
		<input type="text" id="tel" name="tel"  value="" placeholder="Telefon" />
	</div>
	<!--Dialog-->
	<input type="submit" data-role="button" name="aktbtn" value="Aktualisieren">
	</form>

PHP ->

Code:
<?php

session_start();

$benutzer = $_SESSION['benutzer'];

if($benutzer)
	{
		$connect = mysql_connect("localhost","root","");
		
		mysql_select_db("webapp");
		
		$query = mysql_query("Select * from kdaten Where acct='$benutzer'");
		$rown = mysql_num_rows($query);
		

		WHILE($row = mysql_fetch_assoc($query))
		{
		$vorname_o = $row['Vorname'];
		$nachname_o = $row['Nachname'];
		$strasse_o = $row['Strasse'];
		$ort_o = $row['Ort'];
		$email_o = $row['Email'];
		$telefon_o = $row['Telefon'];			
		}	
		
	}

$aktbtn = $_POST['aktbtn'];
$vorname = $_POST['vname'];
$nachname = $_POST['nname'];
$strasse = $_POST['strasse'];
$ort = $_POST['ort'];
$email = $_POST['email'];
$telefon = $_POST['tel'];


	if($vorname != $vorname_o OR $nachname != $nachname_o OR $strasse != $strasse_o OR
		$ort != $ort_o OR $email != $email_o OR $telefon != $telefon_o)
	{
		$connect = mysql_connect("localhost","root","");
		
		mysql_select_db("webapp");
		
		$query = mysql_query("Update kdaten Set Vorname='$vorname', Nachname='$nachname', Strasse='$strasse', Ort='$ort',
							  Email='$email', Telefon='$telefon' Where Acct='$benutzer'");	
		if($query)
		{
			$daten['vname'] = $vorname;
			$daten['nname'] = $nachname;
			$daten['strasse'] = $strasse;
			$daten['ort'] = $ort;
			$daten['email'] = $email;
			$daten['tel'] = $telefon;
		}
	}
	else
	{
		$daten['vname'] = $vorname_o;
		$daten['nname'] = $nachname_o;
		$daten['strasse'] = $strasse_o;
		$daten['ort'] = $ort_o;
		$daten['email'] = $email_o;
		$daten['tel'] = $telefon_o;
	}
	
echo json_encode($daten);
mysql_close($connect);
?>


Und zu guter letzt mein JS(jquery):

Code:
$('.forom').ready(function() {
	$.ajax ({
	type: 'POST',
	url: 'start_init.php',
	dataType: 'json',
	success: function(data) {
		$('#vname').val(data.vname);
		$('#nname').val(data.nname);
		$('#strasse').val(data.strasse);
		$('#ort').val(data.ort);
		$('#email').val(data.email);
		$('#tel').val(data.tel);	
	}
});
return false;
});

$('.forom').submit(function() {
	var data = $(this).serialize();
	$.ajax ({
	type: 'POST',
	data: data,
	url: 'start_init.php',
	dataType: 'json',
	success: function(data) {
		$('#vname').val(data.vname);
		$('#nname').val(data.nname);
		$('#strasse').val(data.strasse);
		$('#ort').val(data.ort);
		$('#email').val(data.email);
		$('#tel').val(data.tel);	
	}
});
return false;
});

Würde mich sehr um konstruktive Kritik freuen.

Das Verhalten: Nach anklicken des "Aktualisieren" button wird einfach einmal aus und eingeblendet und die inputfields sind anschließend leer. :-(

Mit besten Grüßen JHorst
 
Zuletzt bearbeitet:
Werden denn die neuen Daten in die Datenbank geschrieben oder werden die Spalten der DB gar geleert?
Was gibt die Fehlerkonsole aus?

In der PHP-Datei gibt es zum if($query) keinen else-Zweig, d.h. dass unter Umständen kein Array namens $daten angelegt wird. Das würde dann dazu führen, dass du keine Rückgabe-Daten zum Befüllen deiner Felder erhältst.
Außerdem sicherst du die Existenz der einzelnen $_POST-Indizes nicht ab und schützt dich nicht vor SQL-Injections, aber das nur als Randnotiz.

PHP:
<?php
 
session_start();
$benutzer = $_SESSION['benutzer'];
 
$connect = mysql_connect("localhost","root","");
mysql_select_db("webapp");

if($benutzer)
{
    $query = mysql_query("Select * from kdaten Where acct='$benutzer'");
    $rown = mysql_num_rows($query);

    while($row = mysql_fetch_assoc($query))
    {
    $vorname_o  = $row['Vorname'];
    $nachname_o = $row['Nachname'];
    $strasse_o  = $row['Strasse'];
    $ort_o      = $row['Ort'];
    $email_o    = $row['Email'];
    $telefon_o  = $row['Telefon'];           
    }   
}
 
$daten['vname']   = isset($_POST['vname'])   ? $_POST['vname']   : $vorname_o;
$daten['nname']   = isset($_POST['nname'])   ? $_POST['nname']   : $nachname_o;
$daten['strasse'] = isset($_POST['strasse']) ? $_POST['strasse'] : $strasse_o;
$daten['ort']     = isset($_POST['ort'])     ? $_POST['ort']     : $ort_o;
$daten['email']   = isset($_POST['email'])   ? $_POST['email']   : $email_o;
$daten['tel']     = isset($_POST['tel'])     ? $_POST['tel']     : $telefon_o;

$sql = "
UPDATE
    kdaten
SET
    `Vorname`='".mysql_escape_string($daten['vname'])."',
    `Nachname`='".mysql_escape_string($daten['nname'])."',
    `Strasse`='".mysql_escape_string($daten['strasse'])."',
    `Ort`='".mysql_escape_string($daten['ort'])."',
    `Email`='".mysql_escape_string($daten['email'])."',
    `Telefon`='".mysql_escape_string($daten['tel'])."'
WHERE
    `Acct`='".$benutzer."'";

$qry = mysql_query($sql);
    
echo json_encode($daten);
mysql_close($connect);

?>
 
Erstmal vielen dank für die Bemerkung bezüglich der "injektion".

Das war mir bewusst aber trotzdem danke. Soll nur ein Prototyp werden bevor das Projekt umgesetzt wird.

Allerdings liegt das Problem nicht an der PHP datei sondern an der Ajax implementierung. Die Daten werden garnicht erst übermittelt.

Auf das klicken des button wird quasi nicht reagiert.

Weis einfach nicht warum ......
 
Weil du mit
Javascript:
$('.forom').submit(function()  {
    ...
}
eine CSS-Klasse names forom ansprichst. Für dich ist aber das DOM-Element mit der ID forom interessant, also:
Javascript:
$('#forom').submit(function()  {
    ...
}
 
Hi danke für die schnelle Antwort. Joa war auch ein flüchtigkeits fehler. Allerdings habe ich das Problem gelöst.

Ich habe statt ->

Code:
$('#forom').submit(function() {
	var data = $(this).serialize();
	$.ajax ({
	type: 'POST',
	data: data,
	url: 'start_init.php',
	dataType: 'json',
	success: function(data) {
		$('#vname').val(data.vname);
		$('#nname').val(data.nname);
		$('#strasse').val(data.strasse);
		$('#ort').val(data.ort);
		$('#email').val(data.email);
		$('#tel').val(data.tel);	
	}
});
return false;
});

das hier verwendet->

Code:
$('#aktbtn').click(function() {
$('#forom').ready(function() {

	var form = $('#forom');
	var daten = form.serialize();
	
	$.post('akt.php', daten, function(resp) {
	alert(resp);
	});
return false;
});
});

Und nun geht es .... warum nimmt er die typische "ajax({......}); Syntax nicht an?

Das wäre mal interesant zu wissen.

Danke trotzdem für die Mühe!

Thread kann geschlossen werden.

Gruß
 
Zurück