Ergebnis 1 bis 13 von 13
  1. #1
    JonasLoerken ist offline Grünschnabel
    registriert
    06-06-2014
    Beiträge
    9

    Formular via Ajax/Javascript

    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!

  2. #2
    j-l-n Guest

    AW: Formular via Ajax/Javascript

    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?

  3. #3
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.820

    AW: Formular via Ajax/Javascript

    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.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  4. #4
    JonasLoerken ist offline Grünschnabel
    registriert
    06-06-2014
    Beiträge
    9

    AW: Formular via Ajax/Javascript

    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... :-)

  5. #5
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.820

    AW: Formular via Ajax/Javascript

    In deiner mail.js hast du den Ajax Code. Da muss es eine Bedingung geben für den Erfolgsfall. Und dort setzt du das Element mittels document.getElementById('...').style.display auf die gewünschte Eigenschaft. Ich nehme immer '', man kann auch 'block' nehmen, das Ergebnis ist aber nicht das selbe.
    Siehe auch: http://de.selfhtml.org/css/eigenscha...ng.htm#display
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  6. #6
    JonasLoerken ist offline Grünschnabel
    registriert
    06-06-2014
    Beiträge
    9

    AW: Formular via Ajax/Javascript

    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-Code:
    <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?

  7. #7
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.820

    AW: Formular via Ajax/Javascript

    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?
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  8. #8
    JonasLoerken ist offline Grünschnabel
    registriert
    06-06-2014
    Beiträge
    9

    AW: Formular via Ajax/Javascript

    Ich kriege den Code einfach nicht zusammen. Könntest du mir auf die Sprünge helfen? :/

  9. #9
    JonasLoerken ist offline Grünschnabel
    registriert
    06-06-2014
    Beiträge
    9

    AW: Formular via Ajax/Javascript

    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?
    Geändert von JonasLoerken (06-06-2014 um 16:22 Uhr)

  10. #10
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.820

    AW: Formular via Ajax/Javascript

    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.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  11. #11
    JonasLoerken ist offline Grünschnabel
    registriert
    06-06-2014
    Beiträge
    9

    AW: Formular via Ajax/Javascript

    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.

  12. #12
    Avatar von mikdoe
    mikdoe ist offline Administrator
    registriert
    01-05-2010
    Beiträge
    7.820

    AW: Formular via Ajax/Javascript

    Zitat Zitat von JonasLoerken Beitrag anzeigen
    Ich verschicke das Formular ja nicht mit Ajax.
    Nein? Ich dachte, du wolltest das mit $.ajax({...}) machen. Was ist das dann, wenn es kein Ajax ist?

    Zitat Zitat von JonasLoerken Beitrag anzeigen
    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.
    Ja, das ist jetzt eine etwas umständliche Umschreibung für Ajax.

    Zitat Zitat von JonasLoerken Beitrag anzeigen
    Und normalerweise ist es doch so, dass die Formular Felder leer sind nachdem ein Formular abgeschickt wurde.
    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.
    Das deutsche Javascript Forum http://forum.jswelt.de http://forum.jswelt.de/images/logoJsWeltForumV4_32x22.png

  13. #13
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Formular via Ajax/Javascript

    @JonasLoerken:
    Zitat Zitat von JonasLoerken Beitrag anzeigen
    Code:
    		// Stop the browser from submitting the form.
    		e.preventDefault();
    ...

    Zitat Zitat von mikdoe Beitrag anzeigen
    Also Felder durch iterieren und leeren. Oder einen Reset-Button für die form erzeugen und diesen virtuell mit JS anklicken.
    Das geht einfacher mit der .reset()-Methode, die jedes <form> hat.

Ähnliche Themen

  1. Formular AJAX
    Von sappy im Forum Ajax
    Antworten: 10
    Letzter Beitrag: 16-04-2014, 22:24
  2. sichere Ajax Such-Formular
    Von thAjax im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 12-05-2011, 20:30
  3. Ajax POST Formular
    Von testit im Forum JavaScript
    Antworten: 46
    Letzter Beitrag: 21-06-2010, 10:54
  4. Ajax und PHP: Formular absenden
    Von dondon im Forum Allgemeines
    Antworten: 10
    Letzter Beitrag: 05-11-2008, 16:14
  5. [AJAX]formular abschicken
    Von Da_Haiz im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 09-07-2007, 14:45

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •