RWD-Tabellen: Input Felder vor Submit schützen

[Mik3e]

Hallo zusammen,

Ich erstelle gerade im Sinne des RWD die Seite für die Ansicht eines Warenkorbs. Um eine möglichst optimale Darstellung der Produktliste zu gewährleisten, werden zwei unterschiedliche Tabellen genutzt. Eine für Mobile Devices in der die Zellen gestapelt sind und eine für Desktops mit horizontaler Gliederung.

Für die Umsetzung nutze ich Twitter Bootstrap 2.
Zum besseren Verständnis hier ein Auszug in vereinfachter Form:

<form>
<!-- .table Cart table DESKTOP view -->
<table class="table cart-table">
    ....<input type="text" name="qty" value="1" />...
</table>
<!-- /.table Cart table DESKTOP view -->

<!-- .table Cart table MOBILE view -->
<table class="rwd-table cart-table">
    ....<input type="text" name="qty" value="1" />...
</table>
<!-- /.table Cart table MOBILE view -->

<input type="submit" value="Update cart" />
</form>

Die CSS Klassen "table" und "rwd-table" stellen sicher, dass die erste Tabelle erst bei Auflösungen im Tablet-Bereich und darüber und die zweite Tabelle bei niedrigen Auflösungen angezeigt wird.

Und nun zum eigentlichen Problem:
Beide Tabellen weisen ein Eingabefeld "qty" aus, über das der User die Menge ändern kann. Klickt er auf "Update cart", wird der Wert an den Server gepostet und aktualisiert.

Ihr könnt es Euch schon denken: Nachdem es hier nun zwei Felder "qty" gibt, die aber bei einem Submit unterschiedlich befüllt sind (weil ja jeweils entweder nur Tabelle 1 oder Tabelle 2 je nach Auflösung sichtbar sind), stimmen die übertragenen Werte nicht.

Wenn ich in der Desktop Tabelle die qty auf "2" erhöhe und das Formular übertrage, posted der Browser (zumindest bei Webkit ist es so) dennoch den Wert der zweiten Tabelle. Offenbar überlädt bei der Webkit Engine das spätere Element im DOM das davor liegende.

Meine Frage:
Nachdem dieses Prinzip ein empfohlenes Vorgehen ist um Tabellen optimal auf kleinen Devices abzubilden, komme ich um zwei Tabellen nicht rum (die Struktur ist komplett unterschiedlich). Natürlich könnte ich versuchen mit jQuery Lösungen zu erwirken - ist allerdings nicht sehr sauber.

Hattet ihr vielleicht schon mal das selbe Problem? Oder kennt jemand ein Pattern, mit dem genau dieses Problem angegangen wird?

Ich danke Euch schon vorweg für alle Ideen & Inputs,

Liebe Grüße,
Mike

 

[Cheffchen]

Hallo hier im Forum,

Nachdem dieses Prinzip ein empfohlenes Vorgehen ist

wer sagt den so was, habe ich da was verpasst?

Das macht man mit einer ausgabe die dann natürlich auch keine Tabelle sein sollte um das für verschiedene viewport anpassen zu können.

Cheffchen

 

[Mik3e]

Sämtliche Lektüre dahingehend läuft auf dieses Prinzip hinaus (zumindest die drei Bücher die ich bislang zu diesem speziellen Thema durch habe). Alternative Design-Pattern arbeiten entweder mit Informationsbeschränkung (wobei sich für mich beim mobile first Ansatz aber die Frage stellt, ob man die Information dann überhaupt braucht) oder mit jQuery um die Tabelle dynamisch zu transformieren.

Wenn Du andere Pattern kennst bitte her damit...
"Nicht Tabelle" ist hier kein Lösungsansatz weil eine Darstellung in Tabellenform gefordert ist.

Danke & LG

 

[Tronjer]

Gute Frage. So auf Anhieb fällt mir da nur eine JS Lösung ein. Ein resize Handler auf den Body, der beide Tabellen auf hidden prüft, und entsprechend das name-Attribut löscht bzw. hinzufügt.

Alternativ dazu natürlich AJAX.

 

[CPCoder]

Warum machst du dann nicht um jede Tabelle ein eigenes Formular? Auf diese Weise werden dann auch nur die Daten abgeschickt, welche sich in dem jeweiligen Formular-Abschnitt befinden.

Grobes Beispiel:

<form name="form_desktop" action="......" method="post">
<!-- .table Cart table DESKTOP view -->
<table class="table cart-table">
    ....<input type="text" name="qty" value="1" />...
</table>
<!-- /.table Cart table DESKTOP view -->
</form>
<form name="form_mobile" action="......" method="post">

<!-- .table Cart table MOBILE view -->
<table class="rwd-table cart-table">
    ....<input type="text" name="qty" value="1" />...
</table>
<!-- /.table Cart table MOBILE view -->

<input type="submit" value="Update cart" />
</form>

Oft sind die einfachsten Änderungen die effektivsten ;)

 

[Mik3e]

Naja, die "einfachen" Lösungen bin ich schon davor durchgegangen :) Teilen auf zwei Formulare geht nicht, da der Core des Systems nicht geändert werden kann - mit der Lösung habe ich es anfangs auch versucht.
Ich habe mich gestern rangemacht und nun doch ein kleines jQuery Script geschrieben, dass mich von den Sorgen befreit, da keine andere Lösung in Sicht war. Über data-attribute kann man jetzt recht elegant die Größe definieren, ab wann ein Element sichtbar sein soll. Fällt es in den "hidden" Bereich, wird das Element versteckt und alle inputs darin disabled. Somit werden die Daten auch nicht übertragen...

Klappt soweit sehr gut, auch wenn mir eine reine CSS/HTML Lösung lieber gewesen werden.

Danke für Eure Inputs :)