Hello,

Is there a way to prevent subjects from using the enter key on their keyboards to submit a form? I have a delayed next button but they can get around this by pressing the enter key.

Thanks,
Lanny

Hi Lanny,

I am using the following JQuery-based JavaScript code for this purpose in a current experiment:

<script>

// Disable "Enter" key to prevent submitting the form accidentally
$('html').bind('keypress', function(e) {
   if(e.keyCode === 13 || e.key == 'Enter') {
      return false;
   }
});

</script>

See also https://stackoverflow.com/questions/895171/prevent-users-from-submitting-a-form-by-hitting-enter.

Best,

Holger

Hi again,

The following method to prevent participants from submitting a form by pressing “Enter” might be even safer:

Create an invisible input field:

<input id="Capture" type="number" required style="display: none;" />

Replace the standard {{ next_button }} by

<button class="otree-btn-next btn btn-primary" onclick="document.getElementById('Capture').value = 1;">Continue</button>

Since hitting “Enter” leaves the invisible input field empty, participants cannot proceed to the next page. Clicking the button, however, fills the field and the submits the form.

Best,

Holger

Hi Holger,

The first method worked perfectly. Thank you for your help.

Lanny

Hi Holger,

I tried the second method, which looked simpler to me. 
It didn't work well. 

It looks like the Enter key also activates

onclick="document.getElementById('Capture').value = 1;"

as long as it is in a <form> tag. 

Even if you don't have a <form> tag in your template, Otree puts everything in the "contents block" into a <form> tag. 

Yuta