JavaScript Inhalt von DIV-Element dynamisch

ClocxHD · 16. Februar 2015

Hallo,

ich möchte für ein Login-Formular einen Passwortgenerator machen.
Diesen habe ich mit PHP gemacht und der Funktioniert auch.
Also wenn ich auf Passwort generieren klicke, erscheint darunter ein random Passwort.
Wenn ich aber ein anderes Passwort haben möchte, muss ich die Seite neu laden.
Wie erreiche ich es, dass ich, wenn ich erneut auf "Passwort generieren" klicke, ein anderes Passwort angezeigt bekomme?

Der Code:
http://pastebin.com/zrCj2MJA

LG,
ClocxHD

Lawnmower · 16. Februar 2015

Stichwort AJAX.
Mit jQuery als Framework ziemlich simpel: http://api.jquery.com/jQuery.ajax/

r34ln00b · 16. Februar 2015

Afaik ist jQuery nun nicht zwingend erforderlich, aber man braucht "etwas", dass das Element ändert.
Du müsstest nur das Element im DOM-Baum ändern, zum Beispiel mit JS.

ClocxHD · 16. Februar 2015

Danke, habe das jetzt so gelöst:
http://pastebin.com/cJi2tv8e

John Reese · 16. Februar 2015

Du benutzt HTML5 und außerdem jQuery, daher wäre es so sinnvoll:

Code:

<!DOCTYPE html>
<html lang="de">
	<head>
		<title>CSS Menü</title>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style/style.css" />
		<link rel="stylesheet" href="style/menu.css" />
		<script src="scripts/jquery.min.js"></script>
	</head>
	<body>
		<nav class="nav">
			<ul>
				<li><a href="#">Menü1</a></li>
				<li><a href="#">Menü2</a></li>
				<li><a href="#">Menü3</a></li>
				<li><a href="#">Menü4</a></li>
				<li><a href="#">Menü5</a></li>
			</ul>
		</nav>

		<div id="main">
			<form>
				<input name="vname" class="vname" type="text" placeholder="Vorname" required><br>
				<input name="name" class="name" type="text" placeholder="Nachname" required><br>
				<input name="username" class="username" type="text" placeholder="Benutzername" required><br>
				<input name="email" class="email" type="email" placeholder="E-Mail Adresse" required><br>
				<input name="password" class="password" type="password" placeholder="Passwort" required><br>
				<a href="#" class="bpwg" onclick="pwgen(); return false;">Passwort generieren?</a>
				<div id="pw-gen"></div><br>
				<input type="submit" value="Registrieren">
			</form>
		</div>
		<script>
		function pwgen() {
			if ($("#pw-gen").html() != "") {
				$('#pw-gen').load("scripts/pw-gen.php");
			}
		}
		</script>
	</body>
</html>

Was soll dein Check in pwgen() überhaupt machen? So wie du's vorher hattest, macht's keinen Sinn.
Außerdem rate ich von der Verwendung von jQuery bei so 'ner Kleinigkeit auch ab.

Suche

ClocxHD

Lt. Junior Grade

Lawnmower

Maître de cuisine Pro

r34ln00b

Lt. Commander

ClocxHD

Lt. Junior Grade

John Reese

Lt. Commander

Ähnliche Themen