Jquery Disable Form Submit on Enter

jquery disable form submit on enter

If keyCode is not caught, catch which:

$('#formid').on('keyup keypress', function(e) {
  var keyCode = e.keyCode || e.which;
  if (keyCode === 13) { 
    e.preventDefault();
    return false;
  }
});

EDIT: missed it, it's better to use keyup instead of keypress

EDIT 2: As in some newer versions of Firefox the form submission is not prevented, it's safer to add the keypress event to the form as well. Also it doesn't work (anymore?) by just binding the event to the form "name" but only to the form id. Therefore I made this more obvious by changing the code example appropriately.

EDIT 3: Changed bind() to on()

Prevent users from submitting a form by hitting Enter

You can use a method such as

$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});

In reading the comments on the original post, to make it more usable and allow people to press Enter if they have completed all the fields:

function validationFunction() {
  $('input').each(function() {
    ...

  }
  if(good) {
    return true;
  }
  return false;
}

$(document).ready(function() {
  $(window).keydown(function(event){
    if( (event.keyCode == 13) && (validationFunction() == false) ) {
      event.preventDefault();
      return false;
    }
  });
});

Prevent users submitting a form using Enter but enable enter key on one form input field

You can use event.target.id to prevent and allow particular inputs.

 $(window).keydown(function(event){      
        if(event.keyCode == 13) {
          if(event.target.id==="allowedInput"){
            alert('submit form')
          }else{
            alert('not submitting')
            event.preventDefault();
            return false;
          }

        }
    });

Demo:

$(window).keydown(function(event) {
  if (event.keyCode == 13) {    if (event.target.id === "allowedInput") {      alert('submit form')    } else {      alert('not submitting')      event.preventDefault();      return false;    }
  }});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input id="allowedInput" name="allowedInput" type="text" class="kmw-disabled keymanweb-font">
<input id="notallowedInput" name="notallowedInput" type="text" class="kmw-disabled keymanweb-font">

Avoid only form submission on Enter key press

Replace your button with this button

<button type="button" onclick="formSubmit()">Submit</button>

then handler submit event with javascript like below.

function formSubmit() { 
    //here your code
} 

jQuery disable/enable submit button

The problem is that the change event fires only when focus is moved away from the input (e.g. someone clicks off the input or tabs out of it). Try using keyup instead:

$(document).ready(function() {
     $(':input[type="submit"]').prop('disabled', true);
     $('input[type="text"]').keyup(function() {
        if($(this).val() != '') {
           $(':input[type="submit"]').prop('disabled', false);
        }
     });
 });

Disable form submission via Enter key on only _some fields

You can capture and cancel the enter keypress on those fields like this:

$('.noEnterSubmit').keypress(function(e){
    if ( e.which == 13 ) return false;
    //or...
    if ( e.which == 13 ) e.preventDefault();
});

Then on your inputs just give them a class="noEnterSubmit" :)

Looking ahead in case others find this later, in jQuery 1.4.3 (not out yet) you can shorten it to this:

$('.noEnterSubmit').bind('keypress', false);

Disable Enter key for whole form except one input inside it

I would use the keydown event because it is fired first.

You just have to add an additionnal comparison to check the tagName of the element where the event fired.

$('#formId').on('keydown', function(e) {
  var keyCode = e.keyCode || e.which;
  var tag = e.target.tagName
  if (keyCode === 13 && tag !=="TEXTAREA") {
    console.log("Enter prevented")
    e.preventDefault();
    return false;
  }else{
    console.log("Enter is ok...")
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="formId">
<input type="text" value="ENTER does not work here"/><br>
<textArea>ENTER works here</textarea>
</form>

How can I disable submit form button until form is filled using jquery?

You have multiple id's attributes in your submit button hence why you are having trouble with your code. One id is inputGroupPrepend2 and other is register - you can not have both in input

To disable the button use .prop() method and set to true if you want to disable and false when you want to enable it.

$('#register').prop('disabled', true); //disable 

I have simplified your code and is working as expected.

$(function() {
  $('input[type=text]').each(function(index, element) {
    $(element).keyup(function() {
      if ($(this).val() == '') {
        $('#register').prop('disabled', true); //disable 
      } else {
        $('#register').prop('disabled', false); //enable
      }
    });
  })
});

Live Working Demo:

$(function() {
  $('input[type=text]').each(function(index, element) {
    $(element).keyup(function() {
      if ($(this).val() == '') {
        $('#register').prop('disabled', true); //disable 
      } else {
        $('#register').prop('disabled', false); //enable
      }
    });
  })
});

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<form>
  <div class="col-lg-10 mb-3">
    <div class="input-group mycustom">
      <input type="text" class="form-control rounded-0" id="validationDefaultUsername" placeholder="Enter Your Name" aria-describedby="register" required>
      <div class="input-group-prepend">
        <input type="submit" value="Submit" disabled="disabled" class="btn btn-secondary btn-smrounded-0" id="register" />
      </div>
    </div>
  </div>
</form>
<a href="highscores.html"> High Scores</a>

---

Related Topics