How do i realize interactive and dependant fields in a form?

How do i realize interaktive and dependant fields in a form? For example selectboxes in which the content/values are dependant from another field/checkbox/selectbox in the same form and update in realtime or at least do not require a full reload of the page?

Any idea is appreciated !

Thanks and kind regards!

-- EnrikGuenter - 08 Nov 2010

Is this even possible with TML or do i have to use soma Java magic? I'd really like to keep it TML if posible.

Anyone?

Enrik

-- EnrikGuenter - 11 Nov 2010

I also miss this feature a lot! This one and the possibility to make the next value a field can take dependent on the current (like the transitions table of WorkflowPlugin).

-- GilmarSantosJr - 11 Nov 2010

It can't be done with TML alone, you need some javascript. MichaelDaum produced a simple example of this last night in response to a similar question on IRC, http://pastebin.com/izX2aYMi. Also check out Michael's FlexFormPlugin for rendering DataForms in a flexible way.

-- DavidPatterson - 11 Nov 2010

Thank you, very handy and clean code. It doesn't work on IE8 but works well on Firefox. When i find out why, i will post the code.

-- EnrikGuenter - 12 Nov 2010

I hope we can improve interactive/dependent form elements in Foswiki without custom javascript coding, one day. Closing this for now. For reference, the pastbin code was:

<select id="sel1">
<option class="prodA">Product A</option>
<option class="prodB">Product B</option>
<option class="prodC">Product C</option>
<option class="prodD">Product D</option>
</select>

<select id="sel2">
<option></option>
<option class="prodA">Series A1</option>
<option class="prodA">Series A2</option>
<option class="prodA">Series A3</option>
<option class="prodA">Series A4</option>
<option class="prodB">Series B1</option>
<option class="prodB">Series B2</option>
<option class="prodB">Series B3</option>
<option class="prodB">Series B4</option>
<option class="prodC">Series C1</option>
<option class="prodC">Series C2</option>
<option class="prodC">Series C3</option>
<option class="prodC">Series C4</option>
<option class="prodD">Series D1</option>
<option class="prodD">Series D2</option>
<option class="prodD">Series D3</option>
<option class="prodD">Series D4</option>
</select>

<literal>
<style>
#sel2 .prodB,
#sel2 .prodC,
#sel2 .prodD {
  display:none;
}
</style>

<script>
jQuery(function($) {
  $("#sel1").change(function() {
    $("#sel2 option").hide();
    $("#sel2 ."+$(":selected", this).attr("class")).show();
    $("#sel2").val("");
  });
});
</script>
</literal>

-- PaulHarvey - 22 Jul 2011

Commenting is disabled while not logged in