Ankündigung

Einklappen
Keine Ankündigung bisher.

Formular mit Enter versenden, geht nicht nach dem deaktiviert

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Formular mit Enter versenden, geht nicht nach dem deaktiviert

    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
    "Mein Name ist Lohse, ich kaufe hier ein."


  • #2
    Zitat von Chriz Beitrag anzeigen
    Dabei werden nicht sichtbare Formularelemente deaktiviert.
    Nicht sichtbar heißt - in einem anderen „Tab“?
    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 ...?

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

    Hast du mal ein Online-Beispiel zum nachvollziehen?

    Kommentar


    • #3
      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.
      --

      „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
      Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


      --

      Kommentar


      • #4
        @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.
        "Mein Name ist Lohse, ich kaufe hier ein."

        Kommentar


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

          „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
          Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


          --

          Kommentar


          • #6
            - 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.
            --

            „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
            Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


            --

            Kommentar


            • #7
              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.
              "Mein Name ist Lohse, ich kaufe hier ein."

              Kommentar


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

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

                „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                --

                Kommentar


                • #9
                  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)
                  I like cooking my family and my pets.
                  Use commas. Don't be a psycho.
                  Blog - CoverflowJS

                  Kommentar


                  • #10
                    wird nicht funktionieren.
                    Doch das funktioniert. Wieso sollte es nicht? Steht sogar so in den Docs als Beispiel:
                    <script>$("button:gt(1)").attr("disabled","disable d");</script>
                    --

                    „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                    Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                    --

                    Kommentar


                    • #11
                      Jo, weiß ich. Und bei mir gings trotzdem nicht (mit 1.4.0). Niente, nada, nix. Ist allerdings schon länger her. Allerdings kostete mich der Spaß einige Zeit, da ich die Doku damals wie blöd deswegen gewälzt habe und das nicht glauben konnte. Ob das mit 1.4.2 noch so ist, mag ich nicht beschwören, stinkt aber danach
                      I like cooking my family and my pets.
                      Use commas. Don't be a psycho.
                      Blog - CoverflowJS

                      Kommentar


                      • #12
                        Also bei mir gings mit obigem Grund-Code. 1.4.2 also.
                        --

                        „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                        Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                        --

                        Kommentar


                        • #13
                          Habs eben ausprobiert mit Firefox unter Linux (Mozilla Build) und geht nicht ( disabled,true funktioniert. Unter Windows? Welcher Browser denn?
                          I like cooking my family and my pets.
                          Use commas. Don't be a psycho.
                          Blog - CoverflowJS

                          Kommentar


                          • #14
                            Firefox 3.0.x. Habe dazu auch mal hide(); entfernt, dann sieht mans besser.
                            --

                            „Emoticons machen einen Beitrag etwas freundlicher. Deine wirken zwar fachlich richtig sein, aber meist ziemlich uninteressant.
                            Wenn man nur Text sieht, haben viele junge Entwickler keine interesse, diese stumpfen Texte zu lesen.“


                            --

                            Kommentar


                            • #15
                              Jo, aber bringt nur nix. Wie gesagt, funktioniert hier nur mit disable, true. Ich fühl mich ein wenig verarscht... FF 3.6.8 hier. Wieso rennt bei dir noch so ein alter Firefox?
                              I like cooking my family and my pets.
                              Use commas. Don't be a psycho.
                              Blog - CoverflowJS

                              Kommentar

                              Lädt...
                              X