WebcamJS overriding return button in HTML form

Question

For a community site, I created an HTML form to add new users. If a new user wants to make a profile photo right away, this is possible with WebcamJS (using v1.0.2, already got this working).

However, when I want to add a new user and filled in all data (with or without a picture) and press Return, instead of submitting the form, a new webcam div is opened. I tried a lot of different things, even disabling the default behavior of the return key, but still the problem persists. Hope anyone can help!

Simplified HTML example:

Webcam.set({
  width: 400,
  height: 300,
  //dest_width: 400,
  //dest_height: 300,
  image_format: 'jpeg',
  jpeg_quality: 80
});

$("#maak_foto").hide();
$("#foto_maken").click(function() {
  Webcam.attach('#my_camera');
  $("#maak_foto").show();
  $("#my_camera").show();
  $("#foto_form").show();
});
$("input#foto_gebruiken").click(function() {
  $("#my_camera").hide();
  $("#pre_take_buttons").hide();
});

function preview_snapshot() {
  Webcam.freeze();
  // swap button sets
  document.getElementById('pre_take_buttons').style.display = 'none';
  document.getElementById('post_take_buttons').style.display = '';
}

function cancel_preview() {
  Webcam.unfreeze();
  // swap buttons back
  document.getElementById('pre_take_buttons').style.display = '';
  document.getElementById('post_take_buttons').style.display = 'none';
}

function save_photo() {
  // actually snap photo (from preview freeze) and display it
  Webcam.snap(function(data_uri) {
    // display results in page
    document.getElementById('results').innerHTML =
      'Jouw foto:<br>' +
      '<img src="' + data_uri + '"/>';
    // swap buttons back
    document.getElementById('pre_take_buttons').style.display = '';
    document.getElementById('post_take_buttons').style.display = 'none';

    var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
    document.getElementById('webcam').value = raw_image_data;
    //document.getElementById('wijzigen').submit();
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://intern.ifmsa.nl/leden/webcam/webcam.js"></script>
<form name="htmlform" method="post" enctype="multipart/form-data" action="<?php $_SERVER['PHP_SELF'] ?>">
  <label>Voornaam</label>
  <input type="text" name="voornaam">
  <br>
  <label>Email</label>
  <input type="email" name="email">
  <br>
  <label>Photo</label>
  <div>
    <input name="foto" type="file">
    <button id="foto_maken" onclick="return false" ;>Or make another one</button>
    <input id="webcam" type="hidden" name="webcam" value="">
  </div>
  <br>

  <div id="results"></div>
  <div id="my_camera" style="display: none; clear: left;"></div>

  <div id="pre_take_buttons">
    <input type="button" id="maak_foto" value="Take photo" onClick="preview_snapshot(); return false;">
  </div>
  <div id="post_take_buttons" style="display:none;">
    <input type="button" value="Another photo" onClick="cancel_preview(); return false;">
    <input name="webcamdefi" id="foto_gebruiken" type="button" value="Use photo" onClick="save_photo(); return false;">
  </div>

  <label>Confirm password</label>
  <input name="pass" type="password" required>
  <input class="submit" type="submit" name="submit" value="Wijzigen">
</form>

stdob-- · Accepted Answer · 2015-07-18T16:41:17.117

1

Simple magic (the first tag button#foto_maken is interpreted as the submit button and fire when the enter press):

change this:

<button id="foto_maken" onclick="return false" ;>Or make another one</button>

to this:

<input type="button" id="foto_maken" value="Or make another one"/>

[ http://jsfiddle.net/2es2yf0y/ ]

More clear example: http://jsfiddle.net/stdob/tfss0sz2/2/

edited Jul 18 '15 at 16:41

answered Jul 18 '15 at 16:12

stdob--

28,222
5
58
73

WebcamJS overriding return button in HTML form

1 Answers1