Prevent user submitting form by hitting enter

Question

How can I prevent the users submitting a contactform by hitting the "Enter" key? This form is made by using the FormMaster module. The code for the input field is as follows:

<div id="dnn_ctr1410_FormMaster_ctl_9d6e1fc4341b453f905425dacbefddf2div">
    <label class="SubHead" id="dnn_ctr1410_FormMaster_lbl_ctl_9d6e1fc4341b453f905425dacbefddf2" for="dnn_ctr1410_FormMaster_ctl_9d6e1fc4341b453f905425dacbefddf2">Message*<br></label>
    <textarea class="wsi_contactform_bottomcell" tabindex="1" id="dnn_ctr1410_FormMaster_ctl_9d6e1fc4341b453f905425dacbefddf2" wrap="off" cols="20" rows="2" name="dnn$ctr1410$FormMaster$ctl_9d6e1fc4341b453f905425dacbefddf2"></textarea>
    <span style="display:none;" class="NormalRed" id="dnn_ctr1410_FormMaster_rfv_313f9f05e5224c4e9bbf2bf6808f43c9"><br>Enter your message.</span>
</div>

I used the following script, but without any result:

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

And by enter I mean the "Enter" key on the keyboard!!

Put a breakpoint inside the event callback. If it is not triggered you are binding the callback to the wrong element. If it is triggered look at the "e" variable and see its content. Anyway the keyCode should be right. — marquez, Oct 18 '13 at 13:41

score 1 · Answer 1 · answered Oct 18 '13 at 13:32

1

use e.which

Some browsers use keyCode and others use which. But with jQuery this is normalized so you don't have to think about that. You can just choose the one you prefer.

if (e.which == 13) {
        e.preventDefault();
    }

reference event.which

see demo

answered Oct 18 '13 at 13:32

Rituraj ratan

10,260
8
34
55

I just tried this but also without the right result :/ – BlueBay Oct 18 '13 at 13:34
have you included jquery and your code document ready – Rituraj ratan Oct 18 '13 at 13:38
Thanks for the example. I have included the code + document ready, but it doesn't work. – BlueBay Oct 18 '13 at 13:43
Are you injecting the textarea dynamically in the DOM? – marquez Oct 18 '13 at 13:44
@marquez How can I find this out? This form comes from a module. – BlueBay Oct 18 '13 at 13:50

score 0 · Answer 2 · answered Oct 18 '13 at 13:34

0

Why not just ignore the keypress and remove a submit button. Instead of that add a this.submit() button. Like this:

<input type="button" value="Submit contactform" onclick="this.submit();">

This will remove the "enter key" function from the form.

answered Oct 18 '13 at 13:34

Benjamin de Bos

4,334
4
20
30

this is actually not possible, because this line of code is made dynamicly by the module. – BlueBay Oct 18 '13 at 13:49

Dave Rager · Answer 3 · 2013-10-18T14:51:00.207

I've done this in the past and it worked well for me. This will disable any effect by the Enter key for the entire page:

<script language="JavaScript">

function disableEnterKey(e)
{
     var key;    
     if(window.event)
          key = window.event.keyCode;
     else
          key = e.which;

     return (key != 13);
}
</script>

<body onKeyPress="return disableEnterKey(event)">

If you want to disable form submission for a particular input field, call this from the onKeyPress handler of the input field:

<input type="text" name="foo" onKeyPress="return disableEnterKey(event)" >

Edit

For you specifically:

$('.wsi_contactform_bottomcell').on('keypress', disableEnterKey);

If the script is never called then you may be trying to bind the handler too early. If the module hasn't added the textarea yet jQuery will fail silently when the selector returns zero results. If this is the case then you will need to come up with a strategy for determining when the module completes its updates to the DOM before trying to bind the event handler.

There is no "input type" available, see how the module builds up the code — BlueBay, Oct 18 '13 at 14:02
Sorry, that was just an example. Updated for your specific case. — Dave Rager, Oct 18 '13 at 14:21

score 0 · Answer 4 · answered Oct 18 '13 at 14:00

0

Try this, if the element is created dynamically your code will not work because the element doesn't exist.

$(document).on("keydown", ".wsi_contactform_bottomcell", function(e) { 
   if (e.keyCode == 13 || e.which == 13) {
    e.preventDefault();
   }
});

answered Oct 18 '13 at 14:00

marquez

737
4
10

also this doesn't work, the form ignores the script completely – BlueBay Oct 18 '13 at 14:08

Prevent user submitting form by hitting enter

4 Answers4