Check HTML checkbox is checked using Javascript - BSP

This is related to SAP BSP development but the code and application of it is the same for standard HTML webpage development. If you have not created a SAP BSP before have a look at this example of creating a simple BSP application just to get an understanding of the basic components. Below is the required code snippets required to implement a simple HTML CHECKBOX and check if it has been checkewd when the users presses a submit button.

Step 1
Create a basic BSP containing at least on page(with flow logic). Also ensure that it has been set to stateful within the 'Properties' tab.

Step 2 - BSP HTML code to get data and display it along with checkbox
Insert the following code into the 'Layout' tab of your BSP.

<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>

<html>

<head>
<title>Test checkbox checked using javascript</title>
<link rel="StyleSheet" href="style.css" type="text/css" />

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,email1,email2,errors='',args=MM_validateForm.arguments;

  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  }

for (i=0; i<(args.length-2); i+=3) {
  test=args[i+2]; val=MM_findObj(args[i]);
  nm=val.name;
  val=val.value;

  if (nm == 'confirmunderstood') {
  // requires function DoTheCheck to set value
   if (val == 'unchecked') errors+='- Please check confirmation understood checkbox. \n';
  }
}
  if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}

function DoTheCheck(theform) {
if (theform.checked == true){
 /*alert('checkbox is checked');*/
 theform.value = 'checked';
 }
if (theform.checked == false){
 /*alert('checkbox is unchecked');*/
 theform.value = 'unchecked';
 }
}
//-->
</script>

</head>

<body>
<form method="post" name="form" id="form" onSubmit="MM_validateForm('confirmunderstood','','R');
                                                                    return document.MM_returnValue">
<input name="confirmunderstood" type="checkbox" id="confirmunderstood" value="unchecked" onClick="DoTheCheck(this)">
<input name="OnInputProcessing(submit)" type="submit" id="submit" value="Submit Booking">
</form>

</body>
</html>

Step 4 - Test code as it stands
If you execute the application as it stands you should get the following result.

Step 5 - Add event handler
Within 'Event Handler' tab add the following code the OnInputProcessing event

Check HTML checkbox is checked using Javascript within your SAP BSP