<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Operations</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
/*
Button Arithmetic Operation */
$('#AddBtn').on("click", function () {
arithmeticOperation("+");
});
$('#SubBtn').on("click", function () {
arithmeticOperation("-");
});
$('#MulBtn').on("click", function () {
arithmeticOperation("*");
});
/*
Button Arithmetic Operation */
/*
Select Dropdown Arithmetic Operation */
$('#selectDropDown').change(function () {
//alert('Change
Event called');
if ($("#selectDropDown").val() == 'Add') {
arithmeticOperation("+");
}
if ($("#selectDropDown").val() == 'Subtract') {
arithmeticOperation("-");
}
if ($("#selectDropDown").val() == 'Multiply') {
arithmeticOperation("*");
}
});
/*
Select Dropdown Arithmetic Operation */
var value1 = 0;
var value2 = 0;
var value3 = 0;
//attach
keypress to input
$('input[type="number"]').keydown(function (event) {
//
Allow special chars + arrows
$(".ErrorInfo").css({ "display": "none" });
if (event.keyCode == 46 || event.keyCode == 8 ||
event.keyCode == 9
|| event.keyCode == 27 ||
event.keyCode == 13
|| (event.keyCode == 65
&& event.ctrlKey === true)
|| (event.keyCode >= 35
&& event.keyCode <= 39)) {
return;
alert('Entered valid input');
} else {
// If it's not a number stop the keypress
if (event.shiftKey ||
(event.keyCode < 48 || event.keyCode > 57) && (event.keyCode <
96 || event.keyCode > 105)) {
event.preventDefault();
alert('please enter valid input, Enter only Numbers');
$(this).val('');
$(".ErrorInfo").text("Enter the valid input");
}
}
});
/*
Arithmetic Operation Function */
function arithmeticOperation(operator) {
if ($.isNumeric($('#Value1').val())) {
value1 = parseInt($('#Value1').val());
}
else {
DialogBox(1);
//$('#Value1').focus();
}
if ($.isNumeric($('#Value2').val())) {
value2 = parseInt($('#Value2').val());
}
else {
DialogBox(2);
}
if ($.isNumeric($('#Value3').val())) {
value3 = parseInt($('#Value3').val());
}
else {
DialogBox(3);
}
var result = eval(value1 + operator + value2 + operator +
value3);
$("#AppendValue").text("Sum of all textboxes is : " + result);
}
/*
Arithmetic Operation Function */
/*
Overlay window */
function DialogBox(focus) {
$(".clsDialogContainer").css({ "background": "#000", "height": "100%", "opacity": "0.7", "top": "0", "position": "absolute", "width": "100%" });
$(".ErrorInfo").text("Enter the valid input");
$(".clsDialogBox").show()
.css({ "left": "50%", "margin-left": "-160px", "margin-bottom": "-40px", "position": "absolute", "width": "320px", "background": "#fff", "padding": "10px" });
$(".clsDialogBox").animate({
bottom: '50%' }, "slow");
$("#DiaLogContainer").show();
$(".clsDialogButton").hide();
}
$(".clsCloseBtn").on("click", function () {
$("#DiaLogContainer").hide();
$(".clsDialogButton").show();
if ($('#Value1').val() == "") {
$('#Value1').focus();
$('#Value1').val("");
}
if ($('#Value2').val() == "") {
$('#Value2').focus();
$('#Value2').val("");
}
if ($('#Value3').val() == "") {
$('#Value3').focus();
$('#Value3').val("");
}
});
$(".clsSlideDownBtn").on("click", function () {
$(".clsDialogBox").animate({
bottom: '0%' }, "slow", function () {
$(this).hide();
$("#DiaLogContainer").hide();
$(".clsDialogButton").show();
});
$(".clsDialogBox").css({
"margin-bottom": "0px" });
$(".clsDialogButton").hide();
});
$(".clsDialogButton").show();
/*
Overlay window */
});
</script>
<style>
html, body, iframe {
height: 100%;
width: 100%;
-webkit-text-size-adjust: 100%;
overflow: hidden;
}
* {
padding: 0;
margin: 0;
}
.clsInputValues {
margin: 10px 5px;
}
.clsInputValues label {
font: normal 11px arial;
line-height: 15px;
color: #000;
padding: 0px 5px;
}
.clsInputValues input[type='number'] {
}
.clsInputButtons input[type='button'] {
background: #07569e;
border: 1px solid #078;
color: #fff;
padding: 5px;
margin: 10px 5px;
}
.clsCloseBtn {
background: url("images/closeBtn.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border: medium none;
width: 22px;
height: 22px;
position: absolute;
right: 5px;
text-indent: -9999px;
top: 5px;
cursor: pointer;
outline: none;
}
.clsSlideDownBtn {
background: url("images/SlideDownBtn.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
border: medium none;
width: 12px;
height: 12px;
position: absolute;
right: 28px;
text-indent: -9999px;
top: 9px;
cursor: pointer;
outline: none;
}
</style>
</head>
<body>
<form>
<div class="clsInputValues">
<label>Value 1:</label>
<input type="number" id="Value1" class="clsValue" />
<span class="ErrorInfo" style="display: none"></span>
<label>Value 2:</label>
<input type="number" id="Value2" class="clsValue" />
<span class="ErrorInfo" style="display: none"></span>
<label>Value 3:</label>
<input type="number" id="Value3" class="clsValue" />
<span class="ErrorInfo" style="display: none"></span>
</div>
<div class="clsInputButtons">
<input type="button" value="Add" id="AddBtn" />
<input type="button" value="Subtract" id="SubBtn" />
<input type="button" value="Multiply" id="MulBtn" />
<div id="AppendValue"></div>
<select id="selectDropDown">
<option value="" selected="selected">Select</option>
<option value="Add">Add</option>
<option value="Subtract">Subtract</option>
<option value="Multiply">Multiply</option>
</select>
</div>
</form>
<div id="DiaLogContainer" style="display: none">
<div id="dialog" class="clsDialogContainer"></div>
<div class="clsDialogBox">
<!--<div
class="ErrorInfo"></div>-->
<input class="clsSlideDownBtn" type="button" value="SlideDown" />
<input class="clsCloseBtn" type="button" value="close" />
</div>
</div>
<!--<input
type="button" class="clsDialogButton"
value="Dialog" />-->
</body>
</html>
