WebcamJS：未捕获的TypeError：无法读取null的属性'submit'

Question

我试图自定义我的WebcamJS设置以使用AJAX post方法但是出现此错误。

  

未捕获的TypeError：无法读取属性'submit'的null

我已经按照文档中的步骤进行了阅读，复制并对脚本进行了一些编辑。没有AJAX，脚本运行正常。

请帮忙。

这是我的HTML脚本：

<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>

我的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
            });

        }

    });



});

});

这是我的PHP脚本：

<?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 );