Formular mit Enter versenden, geht nicht nach dem deaktiviert

Chriz · 02.08.2010, 18:06

Hallo,

ich habe eine Art Tab/Registerreiter-Formular für eine Suche. Dabei werden nicht sichtbare Formularelemente deaktiviert. Das verhindert erstens, dass der POST-Request unnötig groß wird (brauche ich, da ich diesen Speichere) und zweitens, damit ich kein Entscheidungsproblem habe, wenn alle Formularelemente aller Tabs ausgefüllt werden.

Das Problem ist nun, dass durch die Deaktivierung offenbar das Abschicken per ENTER nicht mehr möglich ist. Im ersten Tab, der von Anfang an sichtbar ist geht das, bei den restlichen nicht.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title></title>

        <style type="text/css">

            div#two {
                display: none;
            }

        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">

            var useJQuery  = true;
            var useDisable = true;

            if (useJQuery) {
                function show1() {
                    var one = $("#one");
                    one.show();
                    if (useDisabled) {
                        one.find("input").removeAttr("disabled");
                    }

                    var two = $("#two");
                    two.hide();
                    if (useDisabled) {
                        two.hide().find("input").attr("disabled", "disabled");
                    }
                }

                function show2() {
                    var two = $("#two");
                    two.show();
                    if (useDisabled) {
                        two.find("input").removeAttr("disabled");
                    }

                    var one = $("#one");
                    one.hide();
                    if (useDisabled) {
                        one.hide().find("input").attr("disabled", "disabled");
                    }
                }
            } else {
                function show1() {
                    var one = document.getElementById("one");
                    one.style.display = "block";
                    if (useDisable) {
                        var elements = one.getElementsByTagName("INPUT");
                        for (var i = 0, x = elements.length; i < x; ++i) {
                            elements[i].disabled = false;
                        }
                    }
                    var two = document.getElementById("two");
                    two.style.display   = "none";
                    if (useDisable) {
                        elements = two.getElementsByTagName("INPUT");
                        for (var i = 0, x = elements.length; i < x; ++i) {
                            elements[i].disabled = true;
                        }
                    }
                }

                function show2() {
                    var two = document.getElementById("two");
                    two.style.display = "block";
                    if (useDisable) {
                        var elements = two.getElementsByTagName("INPUT");
                        for (var i = 0, x = elements.length; i < x; ++i) {
                            elements[i].disabled = false;
                        }
                    }
                    var one = document.getElementById("one");
                    one.style.display   = "none";
                    if (useDisable) {
                        elements = one.getElementsByTagName("INPUT");
                        for (var i = 0, x = elements.length; i < x; ++i) {
                            elements[i].disabled = true;
                        }
                    }
                }
            }

        </script>
    </head>
    <body>

        <form action="" method="post">
            <div id="one">
                1
                <input type="text" />
                <input type="submit" />
            </div>
            <div id="two">
                2
                <input type="text" />
                <input type="submit" />
            </div>

            <div>
                <input type="button" onclick="show1();return false" value="show 1" />
                <input type="button" onclick="show2();return false" value="show 2" />
            </div>
        </form>

    </body>
</html>

(getestet Firefox)

Kann mir jemand das erklären? Es kann ja offenbar nicht daran liegen, dass dieser "Event" (Abschicken per Enter) durch die Deaktivierung des Feldes verloren geht, da ja der erste Tab immer geht, also auch, wenn seine Felder einmal deaktiviert wurden, weil Tab2 geöffnet wurde.

Zum Testen habe ich mal die Flags useJQuery und useDisable eingebaut. Bei useDisable = true gibt es das erwähnte Problem, bei false tritt das Problem nicht aus. Das Umbauen ist leider nicht möglich, ich muss also deaktivieren

ChrisB · 02.08.2010, 18:16

Zitat:

Zitat von Chriz

Dabei werden nicht sichtbare Formularelemente deaktiviert.

Nicht sichtbar heißt - in einem anderen „Tab“?

Zitat:

Das verhindert erstens, dass der POST-Request unnötig groß wird (brauche ich, da ich diesen Speichere) und zweitens, damit ich kein Entscheidungsproblem habe, wenn alle Formularelemente aller Tabs ausgefüllt werden.

D.h., Werte von mehr als einem Tab möchtest du sowieso nie gesendet bekommen?

Dann würde ich doch in jeden Tab ein eigenes Formular einbauen - das würde die zitierte Anforderung und dein aktuelles UI-Problem doch gleichzeitig erschlagen ...?

Zitat:

Das Umbauen ist leider nicht möglich, ich muss also deaktivieren

Hm :/

Hast du mal ein Online-Beispiel zum nachvollziehen?

nikosch · 02.08.2010, 18:19

Tippfehler?

Code:

            var useDisable = true;

            if (useJQuery) {
                function show1() {
                    var one = $("#one");
                    one.show();
                    if (useDisabled) {

Vielleicht solltest DU versuchen, den Button vom Disablen auszuschließen.

Chriz · 02.08.2010, 19:15

@nikosch: Danke, hier die korrigierte Fassung:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title></title>

        <style type="text/css">

            div#two {
                display: none;
            }

        </style>

        <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">

            var useJQuery  = true;
            var useDisable = true;

            if (useJQuery) {
                function show1() {
                    var one = $("#one");
                    one.show();
                    if (useDisable) {
                        one.find("input").removeAttr("disabled");
                    }

                    var two = $("#two");
                    two.hide();
                    if (useDisable) {
                        two.hide().find("input").attr("disabled", "disabled");
                    }
                }

                function show2() {
                    var two = $("#two");
                    two.show();
                    if (useDisable) {
                        two.find("input").removeAttr("disabled");
                    }

                    var one = $("#one");
                    one.hide();
                    if (useDisable) {
                        one.hide().find("input").attr("disabled", "disabled");
                    }
                }
            } else {
                function show1() {
                    var one = document.getElementById("one");
                    one.style.display = "block";
                    if (useDisable) {
                        var elements = one.getElementsByTagName("INPUT");
                        for (var i = 0, x = elements.length; i < x; ++i) {
                            elements[i].disabled = false;
                        }
                    }
                    var two = document.getElementById("two");
                    two.style.display   = "none";
                    if (useDisable) {
                        elements = two.getElementsByTagName("INPUT");
                        for (var i = 0, x = elements.length; i < x; ++i) {
                            elements[i].disabled = true;
                        }
                    }
                }

                function show2() {
                    var two = document.getElementById("two");
                    two.style.display = "block";
                    if (useDisable) {
                        var elements = two.getElementsByTagName("INPUT");
                        for (var i = 0, x = elements.length; i < x; ++i) {
                            elements[i].disabled = false;
                        }
                    }
                    var one = document.getElementById("one");
                    one.style.display   = "none";
                    if (useDisable) {
                        elements = one.getElementsByTagName("INPUT");
                        for (var i = 0, x = elements.length; i < x; ++i) {
                            elements[i].disabled = true;
                        }
                    }
                }
            }

        </script>
    </head>
    <body>

        <form action="" method="post">
            <div id="one">
                1
                <input type="text" />
                <input type="submit" />
            </div>
            <div id="two">
                2
                <input type="text" />
                <input type="submit" />
            </div>

            <div>
                <input type="button" onclick="show1();return false" value="show 1" />
                <input type="button" onclick="show2();return false" value="show 2" />
            </div>
        </form>

    </body>
</html>

@ChrisB: Der Code ist HTML, wenn du magst kannst dus also grad abspeichern und im Browser lokal aufmachen.

"Nicht-sichtbar" heißt in einem anderen Tab und damit auch deaktiviert. Grundsätzlich hast du Recht, zwei eigene Formulare wären natürlich einfacher. Das ganze ist leider etwas gewachsen und entstand daher als ein Formular. Jetzt geht es darum letzte kleine Fehler vor dem Onlinegang (Refactored) zu korrigieren. Ungern würde ich für dieses kleine per Enter-abschicken den kompletten Prozess umschreiben.

Aber eine Idee kam mir gerade, nämlich die Felder erst im onsubmit zu deaktivieren, wenn das Abschicken schon durch ENTER angetriggert wurde. Verwundert mich trotzdem, wie es dazu kommt. Evtl. liegt es am initialen display:none im CSS. Seltsam.

nikosch · 02.08.2010, 19:23

Ach so, das soll den Effekt wie 2 Forms haben? Ich hatte genau anders herum gedacht (Assistent).

nikosch · 02.08.2010, 19:32

- wieso eigentlich "two.hide().find()" und nicht "two.find()"
- die IMHO bessere Variante ist: $('selector' , two)
- wie oben gesagt, ohne disabled auf die Submits gehts:

Code:

                    two.hide();
                    if (useDisable) {
                        two.hide().find("input").attr("disabled", "disabled");
                        $("input[type=submit]" , two).removeAttr("disabled");
                    }

bzw.

Code:

                    two.hide();
                    if (useDisable) {
                        $("input" , two).attr("disabled", "disabled");
                        $("input[type=submit]" , two).removeAttr("disabled");
                    }

bzw.

PHP-Code:

                      two.hide();
                    if (useDisable) {
                        $("input:not(:submit)" ,  two).attr("disabled", "disabled");
                    }

etc.

Chriz · 02.08.2010, 21:21

Weil ich das Hauptelement verstecken, aber die darin befindlichen Eingabefelder deaktivieren will.

Achso, du meinst einfach die submit-Button nicht deaktivieren? Werd ich morgen früh mal testen - danke für die Mühe, ich geb dann Feedback.

nikosch · 02.08.2010, 22:49

Genau. Bei mir klapps jedenfalls. Hab jetzt aber nicht geschaut, was im Request steht.

Zitat:

Weil ich das Hauptelement verstecken, aber die darin befindlichen Eingabefelder deaktivieren will.

Falls das die Antwort auf die erste Frage war:

hide(); ist einfach doppelt. Einmal standalone und einmal übers chaining.

rudygotya · 02.08.2010, 23:04

PHP-Code:

  two.hide().find("input").attr("disabled", "disabled");

wird nicht funktionieren.

PHP-Code:

  two.hide().find("input").attr("disabled", true);

stattdessen verwenden

edit: ich fordere dennoch live beispiele (für faule mitleser)

nikosch · 02.08.2010, 23:24

Zitat:

wird nicht funktionieren.

Doch das funktioniert. Wieso sollte es nicht? Steht sogar so in den Docs als Beispiel:

Zitat:

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Formular zur Kontrolle ausgeben, in DB schreiben und per HTML-Mail versenden	Nanerl	PHP Tipps 2009	12	04.11.2009 14:30
Formular per Email versenden - Formatierung	pagoru	PHP Tipps 2009	3	24.10.2009 14:51
Formular Daten per email versenden	fox	PHP Tipps 2009	4	15.10.2009 05:29
[Erledigt] Formular als E-mail versenden!	martwd05	PHP Tipps 2009	8	16.04.2009 15:39
Wireshark SSL Handshake debugging-Handshake protokoll mittels PHP + Curl	brian johnson	Off-Topic Diskussionen	0	06.11.2008 11:54
[Logik] Mehrere Dateien als Anhang per Formular versenden	PsychoEagle	PHP Tipps 2008	2	27.08.2007 08:58
Formular mit Enter abschicken	havok	HTML, Usability und Barrierefreiheit	10	21.05.2006 14:24
formular mit enter wegschicken->kein submitbutton übermit	seejay	HTML, Usability und Barrierefreiheit	4	14.04.2006 10:28
Formular überprüft nicht bei ENTER !?	madSoul	PHP Tipps 2005-2	15	19.08.2005 12:43
Bild per email über Formular versenden		PHP Tipps 2005-2	8	30.07.2005 14:46
Formular über Enter verschicken geht nicht	ggfan	HTML, Usability und Barrierefreiheit	8	12.05.2005 23:44
[Erledigt] Formular mit link versenden		HTML, Usability und Barrierefreiheit	16	13.11.2004 15:35
Formular mit Attachment(doc, pdf, zip...)als Mail versenden		PHP-Fortgeschrittene	3	04.11.2004 14:58
Formular als Mail versenden?	stefan-miti	PHP Tipps 2004	4	19.10.2004 18:14
Formular nach ENTer eingabe Felder löschen	themonk	HTML, Usability und Barrierefreiheit	12	18.09.2004 22:53


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

02.08.2010, 18:19
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Tippfehler? Code: var useDisable = true; if (useJQuery) { function show1() { var one = $("#one"); one.show(); if (useDisabled) { Vielleicht solltest DU versuchen, den Button vom Disablen auszuschließen. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

02.08.2010, 19:23
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ach so, das soll den Effekt wie 2 Forms haben? Ich hatte genau anders herum gedacht (Assistent). __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

02.08.2010, 19:32
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	- wieso eigentlich "two.hide().find()" und nicht "two.find()" - die IMHO bessere Variante ist: $('selector' , two) - wie oben gesagt, ohne disabled auf die Submits gehts: Code: two.hide(); if (useDisable) { two.hide().find("input").attr("disabled", "disabled"); $("input[type=submit]" , two).removeAttr("disabled"); } bzw. Code: two.hide(); if (useDisable) { $("input" , two).attr("disabled", "disabled"); $("input[type=submit]" , two).removeAttr("disabled"); } bzw. PHP-Code: `two.hide(); if (useDisable) { $("input:not(:submit)" , two).attr("disabled", "disabled"); }` etc. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. -- Geändert von nikosch (02.08.2010 um 19:40 Uhr).

02.08.2010, 21:21
Chriz Moderator Registriert seit: 11.05.2008 Beiträge: 6.266	Weil ich das Hauptelement verstecken, aber die darin befindlichen Eingabefelder deaktivieren will. Achso, du meinst einfach die submit-Button nicht deaktivieren? Werd ich morgen früh mal testen - danke für die Mühe, ich geb dann Feedback. __________________ "Nuschel ich?" - "Was?"

02.08.2010, 23:04
rudygotya Erfahrener Benutzer Registriert seit: 28.05.2008 Beiträge: 2.094 PHP-Kenntnisse: Fortgeschritten	PHP-Code: `two.hide().find("input").attr("disabled", "disabled");` wird nicht funktionieren. PHP-Code: `two.hide().find("input").attr("disabled", true);` stattdessen verwenden edit: ich fordere dennoch live beispiele (für faule mitleser) __________________ ++++ Wieder einer ins Netz gegangen: Phishers Fritz zufrieden ++++ Blog