dan ini scriptnya :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Menghitung nilai rata rata dengan javascript / jquery</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Klik disini untuk demo</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Menghitung nilai rata rata dengan javascript / jquery</h4>
</div>
<div class="modal-body">
<div class="row">
<form class="form-horizontal">
<div class="col-sm-7">
<div class="form-group">
<label class="control-label col-sm-7" for="mat">Matematika </label>
<div class="col-sm-4">
<input type="text" class="form-control hitung" id="mat" name="mat" placeholder="Nilai" value="8.00">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-7" for="b_ind">Bahasa indonesia </label>
<div class="col-sm-4">
<input type="text" class="form-control hitung" id="b_ind" name="b_ind" placeholder="Nilai" value="8.00">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-7" for="b_eng">Bahasa inggris </label>
<div class="col-sm-4">
<input type="text" class="form-control hitung" id="b_eng" name="b_eng" placeholder="Nilai" value="8.00">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-7" for="ipa">Ilmu pengetahuan alam</label>
<div class="col-sm-4">
<input type="text" class="form-control hitung" id="ipa" name="ipa" placeholder="Nilai" value="8.00">
</div>
</div>
</div>
<div class="col-sm-5">
<div class="form-group">
<label class="control-label col-sm-12" for="n_rata_rata">Nilai rata rata </label>
<div class="col-sm-12">
<input readonly type="text" class="form-control" id="n_rata_rata" placeholder="Nilai rata rata ">
</div>
</div>
</div>
<script>
function nilai_rata_rata(){
var rata_rata = 0;
$(".hitung").each(function(){
var get_textbox_value = $(this).val();
if ($.isNumeric(get_textbox_value)) {
rata_rata += parseFloat(get_textbox_value);
}
});
var n = rata_rata / $(".hitung").length;
var pembulatan_nilai_rata_rata=n.toFixed(2);
$("#n_rata_rata").val(pembulatan_nilai_rata_rata)
}
$(document).ready(function(){
$(".hitung").keyup(function(){
nilai_rata_rata();
});
});
nilai_rata_rata();
</script>
</form>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
sekian contoh simplenya.
Semoga bermanfaat !
kenapa tombol submitnya tidak berfungsi, apa yg menyebabkan demikian???
BalasHapus