[DOM] div-Inhalt ersetzen

[zeus]

Hallo!

Es hört sich einfach an aber ich bekomme es irgendwie trotzdem nicht hin.

Ich habe ein Formular entworfen. Dieses wird mit JavaScript auf Vollständigkeit geprüft. Wenn alles OK, sollte das Formular in der HTML-Datei komplett mit einem Text ersetzt werden. Etwas wie "Vielen Dank. Ihre Daten wurden empfangen.".

Hier ein Ausschnitt aus der HTML-Datei, mit dem entsprechenden Formular:

<div id="content">
				<h2>Katalogbestellung</h2>
				<h5><br>Bitte liefern sie mit den neuen Katalog an die folgende Adresse:<br></h5>
				<p id="formular">
					<form method="post" onsubmit="return pruefeForm(this);">
                        	Name:* <input type="text" name="Vorname" style="margin-left:107px; width:158px;"/><br>
                        	Nachname:* <input type="text" name="Nachname" style="margin-left:75px; width:158px;"/><br>
                        	Strasse/Hausnummer:* <input type="text" name="Strasse" style="margin-left:6px;"/>
                        		<input type="text" name="Hausnummer" style="width:31px;"/><br>
                        	E-Mail: <input type="text" name="EMail" style="margin-left:110px; width:158px;"/><br>
                        	Land:* <select name="Land" style="margin-left:113px; width:162px;">
                        		<option value="">---- Bitte wählen ----</option>
                        		<option value="DE">Deutschland</option>
                        		<option value="AT">&Ouml;sterreich</option>
                        		<option value="CH">Schweiz</option>
                        	</select><br /><br />
                        	Katalogart:*<br />
                        	<input type="radio" name="Katalogart" value="f" /> Frauenkleidung<br/>
                        	<input type="radio" name="Katalogart" value="s" /> Männerkleidung<br /><br/>
                        	<input type="checkbox" name="AGB" value="OK" /> AGB gelesen*<br/>
                        	<input type="checkbox" name="Newsletter" value="News" /> Senden Sie mir bitte den Shaped Comfort Newsletter<br/><br/>
                        	<input type="submit" value="Order" onclick="bestellt()"/>
                        </form>
				</p>
				
			</div>
		</div>

Die JavaScript-Datei sieht wie folgt aus:

/* Vollständigkeitsüberprüfung */
function pruefeForm(f) {
        var fehler = "";
        if (f.elements["Vorname"].value == "") {
        	fehler += "\n- Vorname";
        } 
        if (f.elements["Nachname"].value == "") {
        	fehler += "\n- Nachname";
        } 
        if (f.elements["Strasse"].value == "") {
        	fehler += "\n- Strasse";
        } 
        if (f.elements["Hausnummer"].value == "") {
        	fehler += "\n- Hausnummer";
        }
        if(f.elements["Land"].value == "") {
        	fehler += "\n- Land";
        }
        if (!f.elements["Katalogart"][0].checked && !f.elements["Katalogart"][1].checked) {
        	fehler += "\n- Katalogart";
        }
        if (!f.elements["AGB"].checked) {
        	fehler += "\n- AGB akzeptiert";
        }
        
        if (fehler == "") {
        	return true;
        } else {
        	alert("Leider haben Sie vergessen die folgenden Felder auszufüllen:\n" + fehler);
        }
}

/* Wenn Vollständigkeit OK, Formular mit Bestätigungstext ersetzen */
function bestellt() {
		document.getElementById("content").innerHTML = "Vielen Dank. Ihre Daten wurden empfangen.";
       		
}

Wenn ich nun alles richtig ausfülle und den Button klicke, erscheint ganz kurz der Bestätigungstext, verschwindet dann wieder und das Formular wird erneut angezeigt.

Es hat wohl was mit dem Neu-Laden zu tun. Doch wie verhindere ich das?


Gruß
zeus

 

[NetAktiv]

Indem du Ajax verwendest und nur den Inhalt übermittelst (ohne form.submit) oder indem du auf dem Server abfragst, ob Daten übermittelt wurden oder nicht. Lösung Server: Falls nicht, dann zeig das Formular an, falls doch, dann den Bestätigungstext.

 

[momo95]

sowas macht man doch eigentlich mit php!?

 

[zeus]

Danke für euere Antworten!

Es handelt sich um ein kleines Projekt, bei dem Ajax und PHP leider nicht verwendet werden darf. Also praktisch rein zu demonstrativen Zwecken.

Kann man das auch nur mit DOM lösen?

 

[threadi]

Ja, nur macht das überhaupt einen Sinn? JavaScript alleine kann keine E-Mails abschicken oder im Formular eingegebene Daten irgendwo speichern. Für die Verarbeitung des Formulars brauchst Du eine serverseitige Sprache, sonst kommt ja nie etwas aus dem Formular irgendwo an.

 

[Gilles]

Danke für euere Antworten!

Es handelt sich um ein kleines Projekt, bei dem Ajax und PHP leider nicht verwendet werden darf. Also praktisch rein zu demonstrativen Zwecken.

Kann man das auch nur mit DOM lösen?

Wieso sollst du kein Ajax benutzen?
Wenn du keinen Apache für PHP zur verfügung hast so verwende doch einfach eine HTML Seite, die du per Ajax ansprichst. Das Ergebnis wird zwar immer das gleiche sein, aber du wolltest ja nur eine Demo haben :)
Es empfiehlt sich ein Framework zu benutzen, sobald Ajax im Spiel ist. Zum Beispiel jQuery oder mootools