DHTMLX Docs & Samples Explorer

Calculator

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
       <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css">
 
	<script src="codebase/dhtmlxcommon.js"></script>
	<script src="codebase/dhtmlxform.js"></script>
</head>
 
<body onload="doOnLoad()">
	<div id="form_container" style="width:280px;height:250px;"></div>
	<script>
		var myForm, formData;
		function doOnLoad() {
			formData = [
			    {type:"settings",position:"label-top"},
		   	    {type: "fieldset",name:"calculator", label: "Calculator", list:[
					{type: "input", name: 'firstNum', label: 'First number:'},
					{type:"input", name:"secNum", label:"Second number:", position:"label-top"},
					{type:"input", name:"resNum", label:"Result:", position:"label-top"},
		                        {type:"newcolumn"},
					{type:"button", name:"plus", width:20,offsetTop:2, value:"+"}, 
					{type:"button", name:"minus",width:20,offsetTop:10, value:"-"},
					{type:"button", name:"multiply",width:20,offsetTop:10, value:"*"},
					{type:"button", name:"divide",width:20,offsetTop:10, value:"/"}
		   	    ]}
		        ];
			myForm = new dhtmlXForm("form_container", formData);
 
			myForm.attachEvent("onButtonClick", function(id){ 
			         var res, num1, num2;
			         num1 = parseInt(myForm.getItemValue("firstNum"));
			         num2 = parseInt(myForm.getItemValue("secNum"));
			         if (id=="plus")
			              { res=num1+num2;}
			         else if (id=="minus")
			              {res=num1-num2;}
			         else if (id=="multiply")
			              {res=num1*num2;}
			         else if (id =="divide")
			              {   if (num2==0)
						{alert("Error.Division by zero!");res="";}
				          else {res=num1/num2;}
				      }
			         myForm.setItemValue("resNum",res);
			})
		}	
		</script>
 
</body>
</html>