===== Form Mutation =====

Form Mutation offers the possibility to show and hide certain sections in a smartform tab) via onclick. This is reliaziable via radiobuttons as well as checkboxes,

{{:software:tim:smartform:sf_form_mutator_1.png?200 |}}{{:software:tim:smartform:sf_form_mutator_2.png?200|}}

In this example the green bordered section is shown and hidden. This is enabled through clicking on a radiobutton or a checkbox. \\
Optionally labels can refer to radiobuttons or checkboxes and control these. Furthermore radiobuttons or checkboxes can be hidden, in this case they are only clickable through their label.
If checkboxes are used, they have to be assigned the attribute "value=true".

==== Smartform ====
<code>
<?xml version="1.0" encoding="UTF-8"?>
<form name="form_mutation" class="form_mutation" security="all" >
<style type="text/css">
form.form_mutation h1 {
	font-family:HandelGotDLig;
	font-size:20px;
	font-weight:bold;
	text-decoration:underline; 
	text-align:center;
}
form.form_mutation h2 {
	font-family:HandelGotDLig;
	font-size:16px;
	font-weight:bold;
	text-decoration:underline;
	text-align:left;
	color:green;
}
form.form_mutation .master {
	margin:auto auto;
	width:695px;
	height:200px;
	padding:5px;
	background-color:#efefef;
	border:1px solid #aaa;
}
form.form_mutation .main {
	width:330px;
	height:150px;
	border:1px solid blue;
	float:left;
	margin:2px;
	padding:4px;
}
form.form_mutation .tabs {
	border:2px solid #00cc00;
	padding:4px 20px;
} 
</style>
 <div class="master">
  <div class="left_tab main">
   <h1><u><label for="left_tab">Left Tab</label><input type="radio" name="tabs" id="left_tab" class="formMutation" style="display:none;" checked="checked" /></u></h1> <br />
   <div class="display left_tab tabs">
    <table cellspacing="0">
	 <tr>
	  <td>
	   radio A 1&#160;
	  </td>
	  <td>&#160;
	   <input type="radio" name="group_a" id="radio_a1" /> 
	  </td>
	 </tr>
	 <tr>
	  <td>
	   radio A 2&#160;
	  </td>
	  <td>&#160;
	   <input type="radio" name="group_a" id="radio_a2" /> 
	  </td>
	 </tr>
	 <tr>
	  <td>
	   radio A 3&#160;
	  </td>
	  <td>&#160;
	   <input type="radio" name="group_a" id="radio_a3" /> 
	  </td>
	 </tr>
	</table> 
   </div>
  </div>
  <div class="right_tab main">
   <h1><u><label for="right_tab">Right Tab</label><input type="radio" name="tabs" id="right_tab" class="formMutation" style="display:none;" /></u></h1><br /> 
   <div class="display right_tab tabs"> 
    <table cellspacing="0">
	 <tr>
	  <td>
	   radio B 1&#160;
	  </td>
	  <td>&#160;
	   <input type="radio" name="group_b" id="radio_b1" /> 
	  </td>
	 </tr>
	 <tr>
	  <td> 
	   radio B 2&#160;
	  </td>
	  <td>&#160;
	   <input type="radio" name="group_b" id="radio_b2" /> 
	  </td>
	 </tr>
	 <tr>
	  <td>
	   radio B 3&#160;
	  </td>
	  <td>&#160;
	   <input type="radio" name="group_b" id="radio_b3" /> 
	  </td>
	 </tr>
	</table> 
   </div>
  </div>
 </div>
</form>
</code>

== Necessary Settings ==
1. The controlling radiobuttons have to have the class "formMutation". \\
The radiobutton, whose section should be shown when loading the smartform, have to have the attribute checked="checked". If the radiobutton should be hidden, it has to have the style attribute "display:none;" \\

2. The <div>-elements that should be shown and hidden needs 3 classes. \\
The first class is "display" or "visibility". If the class "display" is given, the hidden <div>-element is assigned the attribute "display:none". If the class "visibility" is given instead, the hidden <div>-element is assigned the attribute "visibilty:hidden".

The second class is the "id" of the controlling radiobutton. In this example it is "right_tab" or "left_tab".

The third class is the "name" of the radiobutton group. In this example it is "tabs".