WebcamJS : Uncaught TypeError: Cannot read property 'submit' of null

Question

Im trying to customize my WebcamJS settings to work with AJAX post method but get this error.

Uncaught TypeError: Cannot read property 'submit' of null

I already following the steps on the documentation with just reading, copy it, and do some edit on the script. Without AJAX, the script was working fine.

Please help.

Here is my HTML Script :

<section class="halaman-absen">
     <div class="container">
        <!-- row Form absensi -->
        <form id="myform" method="post">
             <div class="row row-bordered">
                <!-- Kolom pengambilan gambar -->
                <div class="col-md-6">
                    <input id="mydata" type="hidden" name="mydata" value="">                
                    <div id="kolom-kamera"></div>
                </div>
                <!-- Kolom input field -->
                <div class="col-md-6">
                    <!-- row judul halaman -->
                    <div class="row">
                        <div class="col-md-12">
                             <h1>Absensi Harian</h1>
                        </div>
                    </div>
                    <!-- hidden input -->
                    <input type="hidden" id="input-ip" value="<?= $ip; ?>">
                    <input type="hidden" id="user-penginput" value="<?= $_SESSION['username']; ?>">
                    <div class="form-group">
                        <select name="keterangan-absen" id="keterangan-absen" class="form-control">
                            <option value="" selected hidden>Pilih keterangan absensi</option>

                            <?php
                                $query   = "SELECT kategori FROM kategori_absen";
                                $process = sqlsrv_query( $conn, $query );

                                while($data = sqlsrv_fetch_array( $process, SQLSRV_FETCH_ASSOC )) {
                            ?>

                                    <option value="<?= $data['kategori'] ?>"><?= $data['kategori'] ?></option>

                             <?php } ?>

                         </select>
                    </div>
                    <!-- Capture dan submit button -->
                     <div class="form-group">
                         <button type="button" id="capture-button" class="btn btn-primary">Ambil Foto</button>
                         <button type="button" id="submit-button" class="btn btn-primary">Kirim data</button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>

<script src="http://localhost/dailyreport/assets/js/webcam.min.js"></script>
<script src="http://localhost/dailyreport/assets/js/webcam-setup.js"></script>

My webcam-setup.js :

$(document).ready(function () {

Webcam.set({
    width: 500,
    height: 400,
    dest_width: 500,
    dest_height: 400,
    image_format: 'jpeg',
    jpeg_quality: 100
});
Webcam.attach('#kolom-kamera');

$('#capture-button').on('click', function () {
    Webcam.snap(function (data_uri) {
        document.getElementById('kolom-kamera').innerHTML = '<img class="img-responsive" src="' + data_uri + '"/>';


        // var uploadGambar = $('#mydata').val();
        var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');

        document.getElementById('mydata').value = raw_image_data;
        document.getElementById('myform').submit();

    });
});

$('#submit-button').on('click', function() {

    var inputProtocol   = $('#input-ip').val();
    var inputUser       = $('#user-penginput').val();
    var keterangan      = $('#keterangan-absen').val();
    var dataGambar      = $('#mydata').val();

    $.post('http://localhost/dailyreport/function/postingabsensi.php?ip-address=' + inputProtocol
    + '&user-penginput=' + inputUser
    + '&keterangan-absen=' + keterangan
    + '&mydata=' + dataGambar, function() {

        if ( $.post == true ) {

            swal({
                type: 'success',
                title: 'Absen berhasil!',
                text: 'Data kamu berhasil dimasukkan kedalam database, selamat menjalani aktivitas!',
                button: true
            });

        }

        if ( $.post == false ) {

            swal({
                type: 'warning',
                title: 'Absen gagal!',
                text: 'Data kamu tidak valid, cek kembali dan pastikan foto dan keterangan tersedia.',
                button: true
            });

        }

    });



});

});

and it is my PHP script :

<?php

require 'core/init.php';
global $conn;

$ip                 = $_GET['ip-address'];
$penginput          = $_GET['user-penginput'];
$keterangan_waktu   = $_GET['keterangan-absen'];
$encoded_data       = $_GET['mydata'];
$binary_data        = base64_decode($encoded_data);
$newname            = date('YmdHis', time()).mt_rand().'.jpg';
$dir1               = 'http://localhost/dailyreport/upload/absen/'.$newname;

// save to server (beware of permissions)
$result = file_put_contents( $dir1, $binary_data );

$query  = "INSERT INTO absensi_copy (keterangan, alamatip, namastaff, buktifoto)
                VALUES ('$keterangan_waktu', '$ip', '$penginput', '$dir1')";
$result = sqlsrv_query( $conn, $query );