[jQuery] Formularvalidierung wegen AJAX-Call nicht erfolgreich

[Cappaja]

Hallo,

folgendes Problem: Beim Senden meines Kontaktformulars via jQuery werde ich dauerhaft auf die index.html verwiesen trotzdem innerhalb der submit-function mittels return false dies nicht geschehen sollte. Eine Formvalidierung findet schlichtweg nicht statt. Aus Gründen der Übersichtlichkeit habe ich lediglich den Einstiegspunkt im Code gepostet da der Rest zu 100% funktioniert (unabhängig getestet).

$(document).ready(function() {
	$('form').submit(function() {
		var data = $(this).serializeArray();
		console.log(data);
		return false;
	});
});

Die Umleitung auf die index.html hat höchstwahrscheinlich mit folgendem AJAX-Call zu tun:

// load contents via AJAX
$('.menu li > a, #footer a').click(function() {  
    var href = $(this).attr('href'),
    hash = href.substr(href.lastIndexOf("#")+1);
    if(hash) {
        $('.content').load("php/getPage.php", {id: hash});
    }
    return false;
});

In getPage.php werden anhand vorhandener IDs im $_POST-Array die entsprechenden Seiten über eine Whitelist aufgerufen, nicht vorhandene werden auf index.html umgeleitet. Das Formular liegt innerhalb einer durch den AJAX Call aufgerufenen Seite im Contentbereich. Beim Senden des Formulars steht der Query in der Form "localhost/project/?name=&email=fsdf&phone=sdafsdf&place=&event=Festival&submit=" eigentlich korrekt da, jedoch sollte vor dem ? bookings.html stehen. Dadurch das alles clientseitig ausgeführt wird, aktualisieren sich zwar meine Seiten, jedoch nicht die URL.

Wenn ich das Formular unabhängig von meinem CMS prüfe, funktioniert alles wie es soll. Fehler darin sind also ausgeschlossen. Falls mir jemand einen Tipp geben könnte wäre ich sehr dankbar!

Beste Grüße

Cappaja

 

[Quaese]

Hi,

behandle in der Handlerfunktion das event-Objekt als übergebenes Argument und verhindere das weitere Ausführen der Defaultaktion mittels preventDefault. Das return false kann entfallen.

$(document).ready(function() {
    $('form').submit(function(evt) {
        evt.preventDefault();
        var data = $(this).serializeArray();
        console.log(data);
    });
});

Ciao
Quaese

 

[Cappaja]

Danke für den Hinweis, aber die index.html wird nach wie vor geladen. Das Problem zieht sich zudem weitreichender, auch Fotogallerien funktionieren standalone ordnungsgemäß aber innerhalb meines CMS nicht. Ich werde die Seitennavigation jetzt wohl auf PHP umstellen, oder ein Plugin wie jQuery Address für eine zustandsbasierte Navigation verwenden müssen. Schließlich möchte ich beim Klick auf den "Zurück-Button" auch zum vorheringen Zustand zurückkehren. Das scheint keine Schwäche seitens jQuery zu sein als vielmehr eine Schwäche der Browser die darauf einfach noch nicht ausgelegt sind. Wirklich schade!

EDIT: Habe es jetzt mit einem PHP-CMS realisiert, ImageGallery und Formularvalidierung funktionieren wie gewünscht. Schade das auch jQuery/AJAX bei der Seitennavigation noch deutliche Schwächen besitzt.

 

[Phantom6208]

ich verstehe zwar nur den ersten code aber müsste der nicht

$(document).ready(function() {
    $('form').on('click',function() {
        var data = $(this).serializeArray();
        console.log(data);
        return false;
    });
});

heißen ****?

 

[sheel]

Nein.
Warum sollten der Klick auf ein Formular und die Betätigung
vom Submitbutton (per Maus/Tastatur/...) das Selbe sein?