Form_Mahasiswa

<html>
<head>
<title> Nilai Mahasiswa </title>
<style>
    input[type=text], select, textarea {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    background-color: #3CBC8D;
    resize: vertical;
}
input[type=button]:hover {
    background-color: #45a049; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $('#disubmit').on('click', function(e) {
        e.preventDefault();
        var form = $('#form_mhs').serializeArray();
        $.each(form, function(i,obj) {
            $('#'+obj.name).html(obj.value);
            $('#hasilnya').show();
        });
    });

    $('#direset').on('click', function(e) {
        e.preventDefault();
        $('#form_mhs')[0].reset();
        $('#hasilnya').hide();
    });

});
</script>
</head>
<body>
<fieldset>
<legend>MENGHITUNG NILAI AKHIR MAHASISWA </legend>
<table border="0" align="center">
<form id="form_mhs">
<tr>
    <td> <label for="f_nama">Name </label> </td>
    <td> : </td>
    <td> <input type="text" name="nama" size="40" /></td>
</tr>
<tr>
    <td> <label for="f_stb">Stambuk </label> </td>
    <td> : </td>
    <td> <input type="text" name="stb" size="40"> </td>
</tr>
<tr>
    <td> <label for="f_jur"> Jurusan</label> </td>
    <td> : </td>
    <td> <input type="text" name="jurusan" size="40"> </td>
</tr>
<tr>
    <td> <label for="f_ntugas">Nilai Tugas</label> </td>
    <td> : </td>
    <td> <input type="text" name="n_tugas" size="40"></td>
</tr>
<tr>
    <td> <label for="f_nmid">Nilai MID</label> </td>
    <td> : </td>
    <td> <input type="text" name="n_mid" size="40"> </td>
</tr>
<tr>
    <td> <label for="f_nfinal">Nilai Final </label> </td>
    <td> : </td>
    <td> <input type="text" name="n_final" size="40"> </td>
</tr>
<tr>
    <td colspan=3 align=center><input type="button" id="disubmit" value="Hasil" />
    <input type="button" id="direset" value="Reset" /></td>
</tr>
</table>
</fieldset>
</form>
<br>
<br>
Hasil

<table id="hasilnya" style="display:none;" border="0" align="center">
<tr>
    <td> <label for="f_nama">Name </label> </td>
    <td> : </td>
    <td id="nama"></td>
</tr>
<tr>
    <td> <label for="f_stb">Stambuk </label> </td>
    <td> : </td>
    <td id="stb"></td>
</tr>
<tr>
    <td> <label for="f_jur"> Jurusan</label> </td>
    <td> : </td>
    <td id="jurusan"></td>
</tr>
<tr>
    <td> <label for="f_ntugas">Nilai Tugas</label> </td>
    <td> : </td>
    <td id="n_tugas"></td>
</tr>
<tr>
    <td> <label for="f_nmid">Nilai MID</label> </td>
    <td> : </td>
    <td id="n_mid"> </td>
</tr>
<tr>
    <td> <label for="f_nfinal">Nilai Final </label> </td>
    <td> : </td>
    <td id="n_final"> </td>
</tr>
</table>
</body>
</html>