Form controls

Play with the form controls. If you click the 'Show form data' button, a dialog showing the actual form values will pop up. If you click on 'Send' button you will be directed to an echo page that will show the form values.

The view

 CodeNameContinentIs Island
   

The model used in the example

You can change the values of the model section and test the effect of these changes in the view. Please, change only the values of the declared variables, and, eventually, add new elements to defined arrays. Do not change the name or structure of the model section data.

<script yst="init">
  // Init block 
  function Country(code,name,continent,isIsland) {
    this.code = code;
    this.name = name;
    this.continent = continent;
    this.isIsland = isIsland;
  }
</script>
<script yst="model">
// Model section 
// Other country flags stored: IT-Italy, IN-India, BR-Brazil, CM-Cameroon, NZ-New Zealand
countries = new Array();
countries[0] = new Country('SP','Spain',3,false);
countries[1] = new Country('CN','China',2,false);
countries[2] = new Country('AU','Australia',4,true);
countries[3] = new Country('EG','Egypt',0,false);
countries[4] = new Country('US','United States',1,false);
//countries[5] = new Country('IT','Italy',3,false);
</script>

The Yeast code

An apply processing instruction iterates over the elements of the countries array. Note the use of ystBool to set the selected and checked attributes in the select options and checkboxes.

<form id="editCountries" method="get" action="dumpParams.htm">
<table>
<tr>
<th>&nbsp;</th><th>Code</th><th>Name</th><th>Continent</th><th>Is Island</th>
</tr>
<tr yst="apply" ystSet="countries">
<td>
<img src="flags/$e.code$-Flag.gif">
</td>
<td>
<input type="text" name="code$i$" value="$e.code$" size="2">
</td>
<td>
<input type="text" name="name$i$" value="$e.name$">
</td>
<td>
<select name="continent$i$">
<option value="-1">- Select one -</option>
<option yst="value" value="Africa"
ystBool="{selected:e.continent==0}">Africa</option>
<option yst="value" value="America"
ystBool="{selected:e.continent==1}">America</option>
<option yst="value" value="Asia"
ystBool="{selected:e.continent==2}">Asia</option>
<option yst="value" value="Europe"
ystBool="{selected:e.continent==3}">Europe</option>
<option yst="value" value="Oceania"
ystBool="{selected:e.continent==4}">Oceania</option>
</select>
</td>
<td>
<input yst="if" name="island$i$" type="checkbox" value="yes"
ystBool="{checked:e.isIsland!=null && e.isIsland}">
</td>
</tr>
</table>
<input type="submit" name="show" value="Show form data"
onClick="echoForm(document.getElementById('editCountries')); return false;">
<input type="submit" value="Send" name="send">
<input type="reset" value="Reset">
</form>