✔ jQuery Formularverarbeitung dynamisch gestalten

Sprint

Sprint

Erfahrenes Mitglied
Hallo zusammen,

ich arbeite gerade an einer neuen Seite, bei der die Formulare alle erst einmal mit jQuery verarbeitet werden, u.a. auch darum, daß Inhalte nachgeladen werden können ohne die ganze Seite neu zu laden.

Nun wird jährlich eine Veranstaltung durchgeführt, von der alle Infos, Bilder usw. der letzten Jahre online zugänglich bleiben. Bis hierhin ist alles gut. Die Dateien und Fotos sollen aber nicht öffentlich zugänglich sein. Also bekommen alle Teilnehmer ein Kennwort, mit dem sie Zugang auf die entsprechende Seite bekommen.

Nun kommt das Problem. Da es sich bei der Seite um eine One-Page Seite handelt, sind alle Formulare gleichzeitig verfügbar. Also bekommt jedes Login sein eigenes JS Script, mit dem das dazugehörende Formular verarbeitet wird. Auch das funktioniert.

Wenn aber in den kommenden Jahren immer neue Veranstaltungen dazukommen, müßte ich jedes mal eine neue Funktion schreiben, die das neue Formular verarbeitet. Es müßte doch eigentlich möglich sein, ein Script zu schreiben, das universell von jedem dieser Formulare angesprochen wird und mittels übergebenem Parameter das richtige Formular verarbeitet und die zurückkommenden Daten richtig einfügt.

So habe ich das jetzt probiert:

HTML: 
<form class="rueck_form16">
    <input id="login16" type="password" name="login" value="">
    <input type="button" name="anmelden_2016" class="button" value="absenden" onclick="$(showfiles('16')).submit();" style="margin-top: 40px;" />
</form>

Javascript: 
var showfiles = function(jahr){
    $('.rueck_form'+jahr).submit(function () {
        $.ajax({
            type: 'POST',
            url: 'getrueck.php',
            cache: false,
            data: $(".rueck_form"+jahr).serialize(),
            success: function (data) {
                if (data != "error") {
                    $('#rueck'+jahr).html(data);
                    $('#rueck'+jahr+'_error').hide();
                    $('.rueck_form'+jahr).hide();
                    init_rueck();
                } else {
                    $('#rueck'+jahr+'_error').show();
                }
            }
        });
        return false;
    });
}

Erstaunlicherweise funktioniert es, wenn das Formular mit der Enter-Taste abgesendet wird. Klickt man mit der Maus auf den Button, passiert nichts. Wenn ich hingegen für jedes Jahr ein eigenes Script habe, funktioniert auch der Versand per Mausklick. Dabei sollte die Enter-Taste gar nicht absenden und tut das bei allen anderen Formularen auch nicht.

Ok, letzteres ist nebensächlich, aber der Versand per Mausklick sollte schon funktionieren. Sieht jemand den Fehler bzw. was muß geändert werden, daß ein Script für beliebig viele Formulare reicht?

Ich hoffe, ich habe das ganze verständlich dargelegt.

Viele Grüße,
Sprint
 
Hi,

das Absenden mit der ENTER-Taste funktioniert sicherlich, weil es die default-Sumit-Methode für das Formular verwendet. Der click-Event dagegen versucht, die sumit-Methode auf dem Element auszuführen, dass
Code: 
$(showfiles('16'))
zurückliefert - und das ist nur false und somit passiert nichts.

Vielleicht wäre es besser, wenn du immer das gleiche Formular verwendest und das Jahr als hidden input mitschickst. Die sonstigen Elementnamen könntest du immer gleich benennen (Klassen statt IDs). Auf der Serverseite baust du dann Feldnamen + Jahr zusammen.

Eine ungetestete Variante:
HTML: 
<form class="rueck_form">
    <input id="year" type="hidden" name="year" value="2016" />
    <input id="login" type="password" name="login" value="" />
    <input type="submit" name="anmelden_2016" class="button" value="absenden" style="margin-top: 40px;" />
</form>

<script>
$(function() {
    var forms = $('form');

    forms.each(function(index, form) {
        var $form = $(form),
            jahr = $form.find('input[name=year]').val();
    
        $form.on('submit', function(e) {
            e.preventDefault();

             $.ajax({
                type: 'POST',
                url: 'getrueck.php',
                cache: false,
                data: $form.serialize(),
                success: function (data) {
                    if (data != "error") {
                        $form.find('.rueck').html(data);
                        $form.find('.rueck_error').hide();
                        $form.find('.rueck_form').hide();
                        init_rueck();
                    } else {
                        $form.find('.rueck_error').show();
                    }

                    // // Refernzieren über ID und Jahr
                    // if (data != "error") {
                    //     $('#rueck'+jahr).html(data);
                    //     $('#rueck'+jahr+'_error').hide();
                    //     $('.rueck_form'+jahr).hide();
                    //     init_rueck();
                    // } else {
                    //     $('#rueck'+jahr+'_error').show();
                    // }
                }
            });
        });
    });
});
</script>

Vielleicht hilft dir das weiter.

EDIT:
JSFiddle: https://jsfiddle.net/Quaese/wgmua46o/

Gruß,
Quaese
 
Zuletzt bearbeitet:
Mein Javascript ist nicht das beste, daher wird das von @Quaese wohl besser sein als meins, aber auch hier eine Lösung von mir:
HTML: 
<form class="rueck_form16" onsubmit="return false">
    <input id="login16" type="password" name="login" value="">
    <input type="button" name="anmelden_2016" class="button"
    value="absenden" onclick="showfiles(16)" style="margin-top: 40px;" />
</form>

<form class="rueck_form17" onsubmit="return false">
    <input id="login17" type="password" name="login" value="">
    <input type="button" name="anmelden_2017" class="button"
    value="absenden" onclick="showfiles(17)" style="margin-top: 40px;" />
</form>
<script>
var showfiles = function(jahr){
        console.log(jahr);
        console.log( $(".rueck_form"+jahr).serialize() );
            $.ajax({
                type: 'POST',
                url: 'getrueck.php',
                cache: false,
                data: $(".rueck_form"+jahr).serialize(),
                success: function (data) {
                    if (data != "error") {
                        $('#rueck'+jahr).html(data);
                        $('#rueck'+jahr+'_error').hide();
                        $('.rueck_form'+jahr).hide();
                        init_rueck();
                    } else {
                        $('#rueck'+jahr+'_error').show();
                    }
                }
            });
            return false;
}
</script>
 
Vielen Dank an euch beide. Aus Einfachheits- und Zeitgründen habe ich die Lösung von @DerKleene1 übernommen. Die Variante von @Quaese sieht aber auch sehr interessant aus und ich werde sie bei Gelegenheit auch mal ausprobieren.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück