Share |

Check HTML checkbox is checked using Javascript within your SAP 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 

* event handler for checking and processing user input and
* for defining navigation

case event_id.
  when 'submit'.
* no code require here as checking is javascript based so happens before it gets this far.
endcase.

Share |