JSFiddle - React, Tailwind, and code Playground

by Rafael Boschini

HTML

<div class="form-group">                                                
                                            <div class="col-xs-4">
                                            <b>MAT</b>
                                            <input type="text" name="txtMat" id="txtMat" class="form-control media" placeholder="" required>
                                            </div>
                                            <div class="col-xs-4">
                                            <b>C NAT</b>
                                            <input type="text" name="txtCNat" id="txtCNat" class="form-control media" placeholder="" required>
                                            </div>
                                            <div class="col-xs-4">
                                            <b>Média</b>
                                            <input type="text" name="txtMedia" id="txtMedia" class="form-control" placeholder="" disabled required>
                                            </div>                                                                                              
                                        </div>
                                        <div class="form-group">
                                        <div class="col-xs-4">
                                            <b>LING</b>
                                            <input type="text" name="txtLing" id="txtLing" class="form-control media" placeholder="" required>
                                            </div>
                                            <div class="col-xs-4">
                                            <b>RED</b>
                                            <input type="text" name="txtRed" id="txtRed" class="form-control media" placeholder="" required>
                                            </div>
                                            <div class="col-xs-4"></div>
                                        </div>
                ...

JavaScript

$(document).ready(function(){

	$('#btnAcao').on('click',function(){
		var MAT = parseFloat($("#txtMat").val());
    var CNAT = parseFloat($("#txtCNat").val());
    var LING = parseFloat($("#txtLing").val());
    var RED = parseFloat($("#txtRed").val());

    var media = ((MAT*45)+(CNAT*45)+(LING*5)+(RED*5))/100;
    
    $('#txtMedia').val(media);

	});

});