HTML表單在使用javascript時自動提交

我正在創建一個網站PHP，我需要訪問我的網路攝像頭，所以我使用了 javascript 但是，它會導致一些錯誤，它會自動提交表單。

<tr>
   <td height="35">NEW IMAGE:</td>
   <td height="35">
      <div id="showImage" class="d-none">
   </td>
</tr>
<tr>
   <td height="35">CAPTURE IMAGE</td>
   <td><button class="btn btn-warning text-white" id="accesscamera" data-target="#photoModal">
      Capture Photo
      </button>
   </td>
</tr>



<!-- outside </div> tag --!>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP u1T9qYdvdihz0PPSiiqn/ /3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU 6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384- YQ4JLhjyBLPDQt//I STsc9iw4uQqACwlvpslubQzn4u2UU2UFM80nGisd026JF" crossorigin="anonymous"></script>

    <script src="./plugin/sweetalert/sweetalert.min.js"></script>
    <script src="./plugin/webcamjs/webcam.min.js"></script>
    <script src="edit_main.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1 K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2 l" crossorigin="anonymous">
</body>

我的main.js檔案在這里

$(document).ready(function() {
    Webcam.set({
        width: 240,
        height: 160,
        image_format: 'jpeg',
        jpeg_quality: 90
    });

   
    $('#accesscamera').on('click', function() {
        Webcam.reset();
        Webcam.on('error', function() {
            $('#photoModal').modal('hide');
            swal({
                title: 'Warning',
                text: 'Please give permission to access your webcam',
                icon: 'warning'
            });
        });
        Webcam.attach('#my_camera');
    });


    $('#takephoto').on('click', take_snapshot);

    $('#retakephoto').on('click', function() {
        $('#my_camera').addClass('d-block');
        $('#my_camera').removeClass('d-none');

        $('#results').addClass('d-none');

        $('#takephoto').addClass('d-block');
        $('#takephoto').removeClass('d-none');

        $('#retakephoto').addClass('d-none');
        $('#retakephoto').removeClass('d-block');

        $('#uploadphoto').addClass('d-none');
        $('#uploadphoto').removeClass('d-block');
    });

    
})

function take_snapshot()
{
    //take snapshot and get image data
    Webcam.snap(function(data_uri) {
        //display result image
        // $('#results').html('<img  src="'   data_uri   '" />');

        $('#showImage').html('<img width="320" height="240" src="'   data_uri   '" />');

        var raw_image_data = data_uri.replace(/^data\:image\/\w \;base64\,/, '');
        $('#photoStore').val(raw_image_data);
    });
    Webcam.reset();

    $('#my_camera').removeClass('d-block');
    $('#my_camera').addClass('d-none');

    $('#results').removeClass('d-none');
    $('#showImage').removeClass('d-none');

    $('#takephoto').removeClass('d-block');
    $('#takephoto').addClass('d-none');

    $('#retakephoto').removeClass('d-none');
    $('#retakephoto').addClass('d-block');

    $('#uploadphoto').removeClass('d-none');
    $('#uploadphoto').addClass('d-block');

    $('#photoModal').modal('hide');
}

所以，它實際上做的是它會彈出一個視窗并連接相機，我可以用相機查看，我可以捕捉影像。但是每當我單擊“捕獲影像”按鈕時，都會出現彈出視窗，但現在表單會自動提交。

在控制臺上捕獲的錯誤是

`i {name: 'WebcamError', stack: 'WebcamError: Could not locate DOM element to attac…com/ajax/libs/jquery/3.6.0/jquery.min.js:2:41048)', message: 'Could not locate DOM element to attach to.'}
message: "Could not locate DOM element to attach to."
name: "WebcamError"
stack: "WebcamError: Could not locate DOM element to attach to.\n    at new i (http://localhost/ttgym/Files/dashboard/admin/plugin/webcamjs/webcam.min.js:2:164)\n    at Object.attach (http://localhost/ttgym/Files/dashboard/admin/plugin/webcamjs/webcam.min.js:2:3706)\n    at HTMLButtonElement.<anonymous> (http://localhost/ttgym/Files/dashboard/admin/main.js:22:16)\n    at HTMLButtonElement.dispatch (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js:2:43064)\n    at HTMLButtonElement.v.handle (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js:2:41048)"
[[Prototype]]: Error` This is the error caught on console

請在這件事上給予我幫助！

uj5u.com熱心網友回復：

你試過這個嗎？

$('#accesscamera').on('click', function(e) {
  e.preventDefault();
 ...
}

uj5u.com熱心網友回復：

確保您的表單按鈕型別是type="button"并且所有點擊事件都應該具有像這樣的 preventDefault：

$('#selectore').on('click', function(e) {
  e.preventDefault();
 ...
}

uj5u.com熱心網友回復：

使您的捕獲按鈕默認為輸入按鈕，它是提交..

標籤：javascript html

上一篇：影像顯示錯誤

下一篇：如何在HTML和CSS中制作14x5的單選按鈕網格