d

<div class="dx-field-value">
                        <input style="border: none; width: 20%" type="text" id="Num1" placeholder="0.00" onblur="recalculateSum();" onkeypress="return validateFloatKeyPress(this, event);" />
                        <span>+</span>
                        <input style="border: none; width: 20%" type="text" id="Num2" placeholder="0.00" onblur="recalculateSum();" onkeypress="return validateFloatKeyPress(this, event);" />
                        <span>%</span>
                        <span>=</span>
                        <input placeholder="0.00" style="border: none; width: 20%" type="text" id="Sum" value="" />

                        <script>

                            function recalculateSum() {
                                var num1 = parseFloat(document.getElementById("Num1").value);
                                var num2 = parseFloat(document.getElementById("Num2").value);
                                document.getElementById("Sum").value = (num1 + (num2 / 100 * num1)).toFixed(2);
                            }

                            function validateFloatKeyPress(el, evt) {
                                var charCode = (evt.which) ? evt.which : event.keyCode;
                                var number = el.value.split('.');
                                if (charCode != 46 && charCode > 31 && (charCode < 48 || charCode > 57)) {
                                    return false;
                                }
                                //just one dot
                                if (number.length > 1 && charCode == 46) {
                                    return false;
                                }
                                //get the carat position
                                var caratPos = getSelectionStart(el);
                                var dotPos = el.value.indexOf(".");
                                if (caratPos > dotPos && dotPos > -1 && (number[1].length > 1)) {
                                    return false;
                                }
                                return true;
                            }


                            function getSelectionStart(o) {
                                if (o.createTextRange) {
                                    var r = document.selection.createRange().duplicate()
                                    r.moveEnd('character', o.value.length)
                                    if (r.text == '') return o.value.length
                                    return o.value.lastIndexOf(r.text)
                                } else return o.selectionStart
                            }


                        </script>
                    </div>