CODEWITHSUNDEEP
jqueryhtmlformsform-submit
user3354539
user3354539

Reputation: 1245

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

So I have a form with jQuery that prevents the user submitting the form using the enter key.

Here is the code:

$(document).ready(function() {
    // code prevents user submitting form using the enter button - must use submit button.
    $(window).keydown(function(event){
        if(event.keyCode == 13) {
            event.preventDefault();
            return false;
        }
    });
    .....
});

How do I now permit the enter key to be used in one input field if I have the id? The enter key should only work on that one form input field.

Can this also be done using the input field css instead of the id?

Can this also be done using the input field name?

Here is the input field:

<input id="id_tags__tagautosuggest" name="tags" type="text" class="kmw-disabled keymanweb-font">

I have tried several attempts and googled an answer, but I cannot get this to work.

Upvotes: 2

Views: 979

Answers (3)

Syamsoul Azrien
Syamsoul Azrien

Reputation: 2742

i share the simpler solution...

you can add class .disable_enter to input that you want to disable submit-by-enter..

<form>
    <input type="text" name="field1" class="disable_enter" />
    <input type="text" name="field2" class="disable_enter" />
    <input type="text" name="field3" />
    <button type="submit">Submit</button>
</form>

.

$('form .disable_enter').on('keydown keypress keyup', function(e){
  if( e.keyCode == 13 ) {
    e.preventDefault();
    return false;
  }
});

Only field3 will be allowed to be submit-by-enter..

Check out this fiddle for your ease: http://jsfiddle.net/syamsoul/vu1b7gfs/

|------------------------|

|------------------------|

Or, you can do reverse.. disable enter for all input... but use class .enable-enter instead to enable submit-by-enter..

<form>
    <input type="text" name="field1" />
    <input type="text" name="field2" />
    <input type="text" name="field3" class="enable_enter" />
    <button type="submit">Submit</button>
</form>

.

$('form *').not('.enable_enter').on('keydown keypress keyup', function(e){
  if( e.keyCode == 13 ) {
    e.preventDefault();
    return false;
  }
});

Only field3 will be allowed to be submit-by-enter..

Check out this fiddle for your ease: http://jsfiddle.net/syamsoul/h567mtnq/

Upvotes: 2

Fan Jups
Fan Jups

Reputation: 14

To learn more about "not jquery" --> http://api.jquery.com/not/

 $('window').not('#id_tags__tagautosuggest').keydown(function(event){

   //Your code...
   if(event.keyCode == 13) {
        event.preventDefault();
        return false;
    }

});

Upvotes: 0

Just code
Just code

Reputation: 13801

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

As certainperformance suggested you can use selector to match the input too

for ex event.target.matches("#allowedInput") this will match the input with selector, you can add your name or class name too.

Upvotes: 2

Related Questions