• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Formular via Ajax/Javascript

J

JonasLoerken

New member
Hey,
ich stehe vor einem großen Problem.
Und zwar möchte ich ein ganz normales HTML-Formular via PHP senden.
Wenn das Formular erfolgreich gesendet wurde soll eine Alarmbox erscheinen mit den Worten "Ihre Nachricht wurde erfolgreich versendet".
Soweit eigentlich auch kein Problem, denn im Internet gibt es haufenweise Anleitungen wie dies mit Ajax und Javascript zu bewältigen ist.

Nun zu meinem Problem:
Ich möchte das ganze jedoch noch etwas abändern. Ich möchte über meiner Form schon zwei DIV-Bereiche gestaltet haben (einen für das erfolgreiche Senden und einen für das nicht Senden der Nachricht) aber beide mit dem CSS-Tag "display: none;" erst einmal "unsichtbar" machen.
Das Script (Ajax / Javascript) soll dann die entsprechende Box nach senden der Nachricht wieder sichtbar stellen. Es ist möglich, ich habe es schon selbst gesehen. Ich kriege es jedoch einfach nicht gelöst. Könnt ihr mir helfen?

Viele Grüße!
 
Das ist ganz einfach:
Code: 
document.getElementById("ID").style.display = block;

PS: nur aus Interesse: warum hast du die Frage hier im "Links & Tutorials"-Forum und nicht einfach in " JavaScript" gestellt?
 
Verschoben.

Zum Inhalt: Ändere doch einfach im success Zweig des Ajax Codes die display Eigenschaft in '' (oder 'block' je nach Lage), dann wird es sichtbar.
 
Ups, war recht eilig und muss das ganze nicht gesehen haben.

Erst einmal danke für eure Antworten! Jedoch bin ich leider ein echter Anfänger was Ajax und Javascript betrifft und werde daraus nicht wirklich schlau.
Es wäre echt super, wenn ihr mir das ganze noch etwas erläutern würdet.

Ich habe einmal die index.html Datei mit der Form. dann die mail.js Datei mit dem Ajax / Javascript Part und eben die action.php.
Ich denke das ganze muss alles in die mail.js Datei, nur wie... :)
 
Erstmal danke! Ich bin auf jeden Fall auf einem guten weg :)

Dies ist meine mail.js mit einem Script aus dem Internet:

Code: 
$(function() {

	// Get the form.
	var form = $('#contact-form');

	// Get the messages div.
	var formMessages = $('#form-response');

	// Set up an event listener for the contact form.
	$(form).submit(function(e) {
		// Stop the browser from submitting the form.
		e.preventDefault();

		// Serialize the form data.
		var formData = $(form).serialize();

		// Submit the form using AJAX.
		$.ajax({
			type: 'POST',
			url: $(form).attr('action'),
			data: formData
		})
		.done(function(response) {
			// Make sure that the formMessages div has the 'success' class.
			$(formMessages).removeClass('error');
			$(formMessages).addClass('success');

			// Set the message text.
			$(formMessages).text(response);

			// Clear the form.
			$('#name').val('');
			$('#email').val('');
			$('#message').val('');
		})
		.fail(function(data) {
			// Make sure that the formMessages div has the 'error' class.
			$(formMessages).removeClass('success');
			$(formMessages).addClass('error');

			// Set the message text.
			if (data.responseText !== '') {
				$(formMessages).text(data.responseText);
			} else {
				$(formMessages).text('Hoppla! Ein Fehler ist aufgetreten. Ihre Nachricht konnte nicht versendet werden.');
			}
		});

	});

});

Und dies mein HTML-Formular:

HTML: 
<h3>Kontakt aufnehmen</h3>
<div style="display:none;" class="erfolgreich" id="erfolgreich"><p>Erfolgreich versendet!</p></div>
<div style="display:none;" class="fehler" id="fehler"><p>Ein Fehler ist aufgetreten!</p></div>
<form method="post" action="submit.php" id="contact-form">
<input type="text" name="name" id="name" placeholder="Name" required>
<input type="text" name="email" id="email" placeholder="E-Mail" required>
<textarea name="message" id="message" placeholder="Nachricht" required></textarea>
<button class="button radius" name="send" type="submit">Absenden</button>
</form>

Was genau muss ich löschen und wo genau muss der neue Code rein?
 
Innerhalb von .done(function(response) {...}) würde ich das einfügen. Wobei ich diese verkettete Architektur nie benutze, ich baue sowas in den success Arm von .ajax({...})
Aber das ist vermutlich wurscht, sprach Concita?
 
Ich hab es geschafft! Danke!

Jetzt habe ich jedoch noch ein Problem. Nach dem erfolgreichen abschicken des Formulars löscht sich der Inhalt darauf nicht. Wisst ihr woran das liegt?
 
Zuletzt bearbeitet:
Ja, wie und warum sollte sich das Formular denn leeren? Wenn du den Inhalt mit Ajax "selbst" abschickst musst du dich auch selbst um alle Anzeigen für den Benutzer kümmern. Also Felder durch iterieren und leeren. Oder einen Reset-Button für die form erzeugen und diesen virtuell mit JS anklicken.
 
Ich verschicke das Formular ja nicht mit Ajax. Das Skript hängt sich nur zwischen die index.hmtl (Formular) und der submit.php (womit es abgeschickt wird). Es verhindert sozusagen, dass durch submit.php eine neue Seite aufgerufen wird. Und normalerweise ist es doch so, dass die Formular Felder leer sind nachdem ein Formular abgeschickt wurde.
 
JonasLoerken schrieb:
Ich verschicke das Formular ja nicht mit Ajax.
Zum Vergrößern anklicken....
Nein? Ich dachte, du wolltest das mit $.ajax({...}) machen. Was ist das dann, wenn es kein Ajax ist?

JonasLoerken schrieb:
Das Skript hängt sich nur zwischen die index.hmtl (Formular) und der submit.php (womit es abgeschickt wird). Es verhindert sozusagen, dass durch submit.php eine neue Seite aufgerufen wird.
Zum Vergrößern anklicken....
Ja, das ist jetzt eine etwas umständliche Umschreibung für Ajax.

JonasLoerken schrieb:
Und normalerweise ist es doch so, dass die Formular Felder leer sind nachdem ein Formular abgeschickt wurde.
Zum Vergrößern anklicken....
Nicht das ich wüßte. Wo hast du das her? Wenn du es normal abschickst kannst du es ja nicht sehen, weil ein Reload stattfindet.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben