I was creating a website with PHP, I need to access my webcamera so I used javascript for it but, It causes some error that it automatically submits the form.

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

my main.js file is here

$(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');
}

So, what actually it does is that it makes a popup and will attach the camera and I can view with the camera and I can capture the image. But whenever I click Capture image button the popup arises but now the form is automatically submitted.

Please help me with this!

CodePudding user response：

Have you tried this?

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

CodePudding user response：

Make your capture button to type button by default it is submit..