if-then-construction plus some more events

Let's head on and do something sensible. download CRF B and upload it to your OpenClinica-instance and choose "View CRF Version Data Entry". Save this as D:\tomcat\webapps\oc341\StaticCRF_B.html Open the file in notepad++.

We now have three items to do something with and we start with the first one. Let's say we want to display a message next to the input, when this input is less than 3. In notepad++ search for "Item A" and there paste:

<!-- our code starts here 
********************************************************** -->
	<div id='ConclusionDiv'></div>
	<script src="includes/jmesa/jquery.min.js"></script>
	<script>$.noConflict();
	jQuery(document).ready(function($) {
		//the CRF item:
		var myItem=$("#ConclusionDiv").parent().parent().find("input");
		
		//function of the actions to be executed:
		function executeMyActions(){
			$("#ConclusionDiv").html('you are ...');
			}
		//call the function when something is entered
		myItem.keyup(function(){
			executeMyActions();
			})
		
		// and execute the function also when the document loads
		executeMyActions();
		}
	)
	</script>
							
<!-- our code ends here   
********************************************************** -->

We now add a condition to the function. We check if the value in the input is more or less than 3 and based on that, we qualify the person lucky or poor.

console.log('executing script for item-value ' + myItem.val());
if (myItem.val() > 3){
	$("#ConclusionDiv").html('lucky you!');
	}
else{
	$("#ConclusionDiv").html('poor you!');
	}
}

This is getting somewhere: we can evaluate the input and based on that we take two different actions. Furthermore we can see in the console what is happening. The only thing not so nice is that when nothing is in the input, the script still rates us as poor, so we add another condition to the else-part of the if-statement: only write "poor you!" if the item has a value which is less than 3

function executeMyActions(){
	console.log('executing script for item-value ' + myItem.val());
	if (myItem.val() > 3){
		$("#ConclusionDiv").html('lucky you!');
		}
	else{
		if(myItem.val()){$("#ConclusionDiv").html('poor you!');}
		}
	}

and a select is the same?

Let's now focus on the second item: what if we want to display the message "go then" if the user chooses option 2. If we copy a bit from the first item and change the names of the objects to make them unique, we might come up with something like:

<div id='HolidayDiv'></div>
<script src="includes/jmesa/jquery.min.js"></script>
<script>$.noConflict();
jQuery(document).ready(function($) {
	//the CRF item:
	var mySelect=$("#HolidayDiv").parent().parent().find("select");
	
	//function of the actions to be executed:
	function executeMyActions2(){
		if (mySelect.val() == 2){
			$("#HolidayDiv").html('go then');
			}
		}
	//call the function when something is entered
	mySelect.keyup(function(){
		executeMyActions2();
		})
	
	// and execute the function also when the document loads
	executeMyActions2();
	}
)
</script>

Syntactically there is nothing wrong here, but we will never see the message, because nothing gets keyed-in. However you can use the event change in stead of keyup:

//call the function when something is entered
	mySelect.change(function(){
		executeMyActions2();
		})</script>

Be careful not to use the function onChange(), because that is already in use by OpenClinica!

can't wait to see that with radio's?

A group of radio-buttons is quite something different. If we right-click on the Yes of the radio-buttons and choose "inspect element" we see that it is an input of type radio and the id is something like input1994. Now if we do the same for No, we see exactly the same, but with a different value. And of course also for the third option. In fact these radio-buttons are all part of a group, or array. You can see how many buttons there are by referring to the length of the array:

<div id='ComplexDiv'></div>
<script src="includes/jmesa/jquery.min.js"></script>
<script>$.noConflict();
jQuery(document).ready(function($) {
	//the CRF item:
	var myRadioGroup=$("#ComplexDiv").parent().parent().find("input");
	
	//function of the actions to be executed:
	function executeMyActions3(){
		console.log("radios: " + myRadioGroup.length);
		//$("#ComplexDiv").html('I know');
		}
	//call the function when something is entered
	myRadioGroup.change(function(){
		executeMyActions3();
		})
	
	// and execute the function also when the document loads
	executeMyActions3();
	}
)
</script>

And if we want to find which button was pressed, we must go through all the options and make a note of which one was checked:

function executeMyActions3(){
	// loop through the radio's
	for (var i = 0; i < myRadioGroup.length; i++) {
			if (myRadioGroup[i].checked) {
				var valueToCheck = myRadioGroup[i].value;
				}
			}
	if (valueToCheck == 7){
		$("#ComplexDiv").html('I know');
		}
	else{
		$("#ComplexDiv").html('');
		}
	}

Start-page of the workshop.

this page was last reviewed July 2015