Page Comparison

...

• Any time you specify an 'id' attribute on an obs tag (for example: <obs id="weight" .../>) you have access to the displayed fields (in this example: weight.value, weight.date, weight.error and weight.accessionNumber).  Note: if the additional fields, like date and accessionNumber are not displayed on the form, you get an error if you try to setValue.  They must be displayed on the form by adding showDate="true" and/or showAccessionNumber="true" to the <obs> tag. This is to be fixed in HTML-555.
• Since version 1.9.0, any time you specify an 'id' attribute in an encounterDate, encounterLocation or encounterProvider tag (for example: <encounterDate id="encounterDate" .../>, <encounterLocation id="encounterLocation"/> or <encounterProvider id="encounterProvider"/> you have access to the displayed fields (in this example: encounterDate.value, encounterDate.error, encounterLocation.value, encounterLocation.error, encounterProvider.value and encounterProvider.error)

• Since version 1.9.4, you can specify an 'id' attribute in a relationship tag (for example: <relationship id="relationship" .../> and access the value of an existing relationship using this id and the name of the relationship type (-use camel-case if the name has more than one word).
  Example: relationship.mother.value, relationship.accompagnateurLeader.value, relationship .guardianNonParent.value

          To access the value of a new relationship, use "newRelationship" for the name of the relationship type.
          Example: relationship.newRelationship.value

...

If you want areas to "grey out" based on checking a radio button or checkbox, review this additional documentation for explanation and examples.

...

<script type="text/javascript">
	if(jQuery){
	  $j(document).ready(function(){
		  $j('#1-removeEntry').remove();
		  $j('#10-addEntry').remove();
		  $j('#1-toggleContainer').show();

		  $j('#11-removeEntry').remove();
		  $j('#20-addEntry').remove();
		  $j('#11-toggleContainer').show();
		});


	  $j(document).ready(function(){
	  $j('button.addEntry').live("click", function(){
	  var correctedAddButtonId = parseFloat(this.id) + 1;
	  var contentAddId = "#" + correctedAddButtonId + "-toggleContainer";
	  $j(contentAddId).toggle(true);
	  $j('#' + this.id).toggle(false); $j('#' + parseFloat(this.id) + '-removeEntry').toggle(false);
	  return false;});
	});

	 $j(document).ready(function(){
	  $j('button.removeEntry').live("click", function(){
	  var correctedRemoveButtonId = parseFloat(this.id) - 1;
	  var contentAddId = "#" + parseFloat(this.id) + "-toggleContainer";
	  $j(contentAddId).toggle(false);
	  $j( ':input:not(:button)', contentAddId).val([]);
	  $j('#' + correctedRemoveButtonId + '-addEntry').toggle(true); $j('#' + correctedRemoveButtonId + '-removeEntry').toggle(true);

	  return false;});

	});
}
	</script>

NOTE : the above code can only run on the legacy ui. To run the above code in the new ui (ui framework) , replace the Jquery  "$j" identifer  with the alias" jq"  and   "$j(document).ready(function()" with " jq(function()"   eg  

jq(function(){
jq('button.removeEntry').click(function(){
var correctedRemoveButtonId = parseFloat(this.id) - 1;
var contentAddId = "#" + parseFloat(this.id) + "-toggleContainer";
jq(contentAddId).toggle(false);
jq( ':input:not(:button)', contentAddId).val([]);
jq('#' + correctedRemoveButtonId + '-addEntry').toggle(true); 
jq('#' + correctedRemoveButtonId + '-removeEntry').toggle(true);

return false;
});

The Markup

For now we will explain the markup with an example and perhaps expand on this in the future.

...