Stop Enter/Return key submitting a form [duplicate]

Answer 1

I found this Q/A trying to sort out a similar situation where I have multiple forms and enter would not do what I wanted. In my specific case, I would dynamically add a new <div id="D1"> D1, D2, D3, etc, and each new div has a form that would reload that div from the same php code that created it, only also with a POST.

Unrelated first problem was I couldn't dynamically create a new function with each div, so I passed the D1, etc, descriptor as an argument to the Javascript function:

<script type="text/javascript">
function formSubmit ( divid ) {
    // post data
    event.preventDefault();
    $.post( "make-my-form-div.php", 
            $("#form"+divid).serialize(), 
            function(data){
                $("#"+divid).html(data);
            });
    return false;
}
</script>

You will see the requisite event.preventDefault(); and return false; that works for the answers in this thread. It didn't work for me. If I click the Submit in any one form, that one div would reload with the correct data. Hitting enter would cause default action and reload the entire page, leaving me with only 1 div.

This Answer worked: I needed a unique ID and NAME for the different forms. Initially, they were <INPUT TYPE="button" VALUE="Submit" onClick="formSubmit('<?php echo $divid ?>');"> but once I added unique ID and NAMES, such as "formD1", etc, it all started working correctly.

Answer 2

e.preventDefault() rather than e.stopPropagation(). stopPropagation only stops it bubbling up to higher DOM nodes, it doesn't prevent the default action.

Answer 3

This works for me.

$("input[type='text']").on('keypress', function(e) { return e.keyCode != 13; });

Answer 4

base.keypress(function(e) {
    var code = e.keyCode || e.which;
    if(code == 13)
        return false;
});

or for only inputs:

$(':input', base).keypress(function(e) {
    var code = e.keyCode || e.which;
    if(code == 13)
        return false;
});

Answer 5

I'm going to guess that a form element will fire the submit event, it doesn't bubble up through the table and on to the form, try this instread:

$('input, select, textarea', base).on('keydown', function(e) {
    if (e.keyCode == 13) {
        return false;
    }
});

Note we're also providing context to the selector, so this keyDown will only occur on elements (modify as required) within your table.

As gordan said in another comment, return false does both .preventDefault() and .stopPropagation()

Answer 6

Just put below code in your template file or in header of page.

<script type="text/javascript">

function stopRKey(evt) {
  var evt = (evt) ? evt : ((event) ? event : null);
  var node = (evt.target) ? evt.target : ((evt.srcElement) ? evt.srcElement : null);
  if ((evt.keyCode == 13) && (node.type=="text"))  {return false;}
}

document.onkeypress = stopRKey;

</script>