Gostaria que na transição de preenchimento dos campos Num1, Num2 e Num3 o valor da media fosse calculado e apresentado no campo Media.
Por exemplo o usuário preencheu o valor de Num1 e clicou ou pressionou tab para preencher Num2 neste momento o valor da médio fosse calculado e apresentado no campo Media. O mesmo calculo ocorreria apos o preenchimento de Num3.
Tentei a seguinte abordagem apos retorno de Gabriel Franco porem o valor não é calculado automaticamente:
Código no Formulario.html:
<!DOCTYPE html>
<html>
<head>
<title>Form</title>
<link rel="stylesheet" type="text/css"
href="/resources/style-guide/css/fluig-style-guide.min.css">
<script src="/resources/js/jquery/jquery.js"></script>
<script src="/resources/js/jquery/jquery-ui.min.js"></script>
<script src="/resources/js/mustache/mustache-min.js"></script>
<script src="/resources/style-guide/js/fluig-style-guide.min.js"></script>
<!-- CUSTOM -->
<link href="/resources/style-guide/css/fluig-style-guide-filter.min.css"
rel="stylesheet" type="text/css">
<link
href="/resources/style-guide/css/fluig-style-guide-ratingstars.min.css"
rel="stylesheet" type="text/css">
<script src="/resources/style-guide/js/fluig-style-guide-filter.min.js"></script>
<script
src="/resources/style-guide/js/fluig-style-guide-ratingstars.min.js"></script>
<link
href='/webdesk/customresources?cid=1&resourceName=temaFormulario/0.css'
type='text/css' rel='stylesheet' />
</head>
<body class="fluig-style-guide">
<form
class="totvs-form grid vertical create-form-components ui-sortable t0"
name="createFormComponents"
style="padding-left: 10px; padding-right: 10px;">
<h1 class="title-form-application">Formulário de Radio Teste 12</h1>
<div class="form-field" data-type="textbox" data-show-properties=""
data-field-name="Nome"
style="position: relative; left: 0px; top: 0px;">
<div class="form-input">
<div class="form-group">
<label>Nome</label> <input type="text" class="form-control"
name="Nome" value="" placeholder="" data-size="big">
</div>
</div>
</div>
<div class="form-field" data-type="number" data-show-properties=""
data-field-name="Num01">
<div class="form-input">
<div class="form-group">
<label>Num1</label> <input type="number" class="form-control" onblur="Myfunction()"
name="Num01" id="Num01" value="" placeholder="" data-size="big"
data-only-numbers="">
</div>
</div>
</div>
<div class="form-field" data-type="number" data-show-properties=""
data-field-name="Num02">
<div class="form-input">
<div class="form-group">
<label>Num2</label> <input type="number" class="form-control" onblur="Myfunction()"
name="Num02" id="Num02" value="" placeholder="" data-size="big"
data-only-numbers="">
</div>
</div>
</div>
<div class="form-field" data-type="number" data-show-properties=""
data-field-name="Num03">
<div class="form-input">
<div class="form-group">
<label>Num3</label> <input type="number" class="form-control" onblur="Myfunction()"
name="Num03" id="Num03" value="" placeholder="" data-size="big"
data-only-numbers="">
</div>
</div>
</div>
<div class="form-field" data-type="number" data-show-properties=""
data-field-name="Media">
<div class="form-input">
<div class="form-group">
<label>Media</label> <input type="number" class="form-control"
name="Media" id="Media" value="" placeholder="" data-size="big"
data-only-numbers="">
</div>
</div>
</div>
</form>
<script type="text/javascript">
var keyDown = false, ctrl = 17, vKey = 86, Vkey = 118;
$(document).keydown(function(e) {
if (e.keyCode == ctrl)
keyDown = true;
}).keyup(function(e) {
if (e.keyCode == ctrl)
keyDown = false;
});
$('[data-only-numbers]').on('keypress', function(e) {
if (!e) {
var e = window.event;
}
if (e.keyCode > 0 && e.which == 0) {
return true;
}
if (e.keyCode) {
code = e.keyCode;
} else if (e.which) {
code = e.which;
}
if (code == 46) {
return true;
}
var character = String.fromCharCode(code);
if (character == '\b' || character == ' ' || character == '\t') {
return true;
}
if (keyDown && (code == vKey || code == Vkey)) {
return (character);
} else {
return (/[0-9]$/.test(character));
}
}).on('focusout', function(e) {
var $this = $(this);
if ($this.val() == "") {
return true;
}
$this.val($this.val().replace(/[^0-9\.]/g, ''));
}).on('paste', function(e) {
var $this = $(this);
setTimeout(function() {
$this.val($this.val().replace(/[^0-9\.]/g, ''));
}, 5);
});
$('.create-form-components')
.on(
'keyup',
'input[required="required"][type="text"], input[required="required"][type="number"], input[required="required"][type="date"], textarea[required="required"]',
function() {
validationFieldsForm($(this), $(this).parents(
'.form-field').data('type'));
});
$('.create-form-components')
.on(
'change',
'input[required="required"][type="checkbox"], input[required="required"][type="radio"], select[required="required"]',
function() {
validationFieldsForm($(this), $(this).parents(
'.form-field').data('type'));
});
function validationFieldsForm(field, type) {
if (type === "checkbox" || type === "radio") {
if (!field.is(':checked')) {
field.parents('.form-field').addClass('required');
} else {
field.parents('.form-field').removeClass('required');
}
} else {
if (!field.val().trim()) {
field.parents('.form-field').addClass('required');
} else {
field.parents('.form-field').removeClass('required');
}
}
}
var $zoomPreview = $(".zoom-preview");
if ($zoomPreview.length) {
$zoomPreview.parent().removeClass("input-group");
$zoomPreview.remove();
}
var ratings = $(".rating");
if (ratings.length > 0)
ratingStars(ratings);
function ratingStars(stars) {
$.each(stars, function(i, obj) {
var field = $(this).closest(".form-group")
.find(".rating-value");
var tgt = $(obj);
tgt.html("");
var rating = FLUIGC.stars(tgt, {
value : field.val()
});
rating.on("click", function(o) {
field.val($(this).index() + 1);
});
});
}
$.each($("[data-date]"), function(i, o) {
var id = $(o).attr("id");
FLUIGC.calendar("#" + id);
});
$(document).ready(function() {
$.each($("[data-date]"), function(i, o) {
var id = $(o).attr("id");
if ($("#" + id).attr("readonly")) {
$("#" + id).data('DateTimePicker').disable();
}
});
$("#Num01, #Num02, #Num03").on("blur", Myfunction() {
$("#Media").val(calculaMedia());
});
});
function calculaMedia() {
var num1 = $("#Num01").val();
var num2 = $("#Num02").val();
var num3 = $("#Num03").val();
if (num1 == '') {
num1 = 0;
}
if (num2 == '') {
num2 = 0;
}
if (num3 == '') {
num2 = 0;
}
var media = ((num1 + num2 + num3) / 3);
return media;
}
</script>
</body>
</html>