Verhalten eines Formulars bei unterschiedlicher Anzahl von <input>-Feldern

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

  • Verhalten eines Formulars bei unterschiedlicher Anzahl von <input>-Feldern

    Hallo zusammen,

    ich bin gerade auf folgendes kurioses Problem gestoßen:
    Ich habe auf zwei verschiedenen Seiten jeweils ein Formular. Auf Seite1 ist Form1 und auf Seite2 ist Form2.

    Hier mal ein Beispielcode für die Formulare:

    Form1:
    HTML-Code:
    <form>
    	...
            <input type='text' maxlength='100' value='' />
        ...
            <input type='submit' disabled='disabled' style='cursor: not-allowed;' />
        ...
    </form>
    Form2:
    HTML-Code:
    <form>
    	...
            <input type='text' maxlength='100' value='' />
        ...
        	<input type='text' maxlength='100' value='' />
        ...
            <input type='submit' disabled='disabled' style='cursor: not-allowed;' />
        ...
    </form>
    Der einzige Unterschied zwischen den Formularen besteht darin, dass Form2 zwei <input>-Felder besitz statt, wie bei Form1, nur ein <input>-Feld.

    Sobald die Felder alle korrekt ausgefüllt wurden, sorgt ein Javascript dafür, dass der Absendebutton aktiviert wird. (In meinem Codebeispiel nicht vorhanden, da es mit der Problematik nichts zu tun hat).

    Sind die Felder allerdings nicht korrekt befüllt, soll das Absenden des Formulars verhindert werden, indem der Button deaktiviert wird.

    Folgendes Verhalten tritt bei Form1 auf, wenn Button disabled ist:
    - Absenden des Formulars per Mausklick funktioniert nicht (korrektes Verhalten)
    - Absenden des Formulars per ENTER funktioniert (sollte eigtl. nicht sein! sehr kurios)

    Folgendes Verhalten tritt bei Form2 auf, wenn Button disabled ist:
    - Absenden per Mausklick UND ENTER funktioniert nicht (korrektes Verhalten)

    Getestet habe ich das Problem mit Chrome 25.0.1364.97, Firefox 15.0 und IE9. Kurioserweise tritt der Fehler auch nur bei Chrome und IE auf

    Im Internet habe ich recherchiert, dass es an der Anzahl an <input>-Felder liegt und man im Fall von Form1 ein zweites <input>-Feld mit "visibility: hidden" hinzufügen soll.

    Da ich es leider nicht für sehr elegant halte, suche ich eigtl. nach einer anderen Lösung.
    Hat jemand von euch auch schon dieses Problem gehabt? Wenn ja, welchen Lösungsweg habt ihr gewählt?

    Viele Grüße
    Stefan

  • #2
    Fang das submit-Event mit JavaScript ab.

    Code:
    function disallow_submit(formId) {
        document.getElementById(formId).onsubmit = function () {
            return false;
        };
    }
    
    function allow_submit(formId) {
        document.getElementById(formId).onsubmit = function () {
            return true;
        };
    }
    Zuletzt geändert von h3ll; 02.03.2013, 11:48.

    Kommentar


    • #3
      Hallo h3ll,

      genial! danke dir für die schnelle Hilfe! Es funktioniert bei mir.

      Noch ein schönes Wochenende!

      Kommentar

      Lädt...
      X