Don't refresh page when enter key is pressed

Question

I'm having some problems with the enter key triggering a refresh of the page whenever there is input in a form.

The following code does not refresh the page if enter is pressed and if there is no text inputted in the text area (#input) but will refresh the page if enter is pressed and there is input in #input OR if the cursor is in the text area. I'm not sure what's triggering it, as #submit is a regular button.

<div id="forms" class="container">
            <form>
                Enter your verb here in plain (dictionary) form:
                <input type="text" class="input-sm" id="input"></input>
                <div class="radio">
                    <label>
                        <input type="radio" name="input-method" value="Hiragana" checked />Radio 1
                    </label>
                </div>
                <div class="radio">
                    <label>
                        <input type="radio" name="input-method" value="Romaji" />Radio 2
                    </label>
                </div>
                <input type="button" class="btn btn-default" id="submit" value="Submit">
                </input
            </form>
        </div>

I'm trying to jquery to solve the problem, but need help in that regard. Any suggestions would be appreciated!

You've got a closing tag for a button that doesn't exist in there... — Jason, Sep 02 '14 at 04:29
@cardboardtheory This is just a standard behavior of text input elements placed within a form. The form is submitted when `ENTER` is pressed on a text input. — Teemu, Sep 02 '14 at 04:33

score 13 · Accepted Answer · answered Sep 02 '14 at 04:30

13

you can either add following script at the end of body

<script>
        $("form").submit(function (e) {
            e.preventDefault();
            alert("call some function here");
        });
</script>

or you can just put your form tag like this

<form onsubmit="return false">

either way you will then have to write an onClick="SOMEFUNCTION()" to the input

also there is an error with an extra /button tag...remove that and instead use

<input type="button" class="btn btn-default" id="submit" value="Conjugate" />

note the ending slash

answered Sep 02 '14 at 04:30

Amol

918
7
20

The ending slash is totally unnecessary, this is not XHTML. – Teemu Sep 02 '14 at 04:34
1

@AxelAmthor It's "Teemu" haha. Also Amol, thanks for the Jquery script, it works. I wish I could mark two answers but I'll mark yours because I happened to want pure JQuery without HTML, though both function perfectly! – cardboardtheory Sep 02 '14 at 04:51
@AxelAmthor Please see Quentin's answer about [self-closing tags and HTML](http://stackoverflow.com/a/22452057/1169519). And the [specs](http://dev.w3.org/html5/spec-author-view/syntax.html#syntax-start-tag) ... – Teemu Sep 02 '14 at 05:12

Axel Amthor · Answer 2 · 2014-09-02T04:31:04.467

5

simply change your html:

<div id="forms" class="container">
        <form action="javascript:void(-1)">
            Enter your verb here in plain (dictionary) form:
            ....

jsfiddle here - works like charm

edited Sep 02 '14 at 04:31

answered Sep 02 '14 at 04:24

Axel Amthor

10,980
1
25
44

Thanks, this works! Can you explain what it does and why the other one didn't work? Also is there anyway to do this outside the HTML? – cardboardtheory Sep 02 '14 at 04:35
It explicitly will do "nothing" and since there's no return value of `true` on the "nothing", the form will not be sent. That's a "so-90th" solution for single-pager, that it often is just forgotten. – Axel Amthor Sep 02 '14 at 04:37
sorry, second part: go with @Amol's solution for pure JS/jQuery and none-html – Axel Amthor Sep 02 '14 at 04:45
Got it and thanks for the help. Just realized I don't even need a form element: I don't have a server to submit anything to, I'm simply using the buttons to execute javascript functions using JQuery. – cardboardtheory Sep 02 '14 at 04:46
@cardboardtheory having no form-element will likely cause errors / arbitrary results in IE - tests recommended! – Axel Amthor Sep 02 '14 at 04:48
@ Axel Amthor I have a doubt. If we add `action="javascript:void(-1)"` then the form will not be submitted even when we click on the submit button.. Am I right ?? What if we needed to submit the form on click of submit button ?? Just asking for my own knowledge. – Yunus Aslam Sep 02 '14 at 04:52
Thanks, I'll experiment. – cardboardtheory Sep 02 '14 at 04:54

score -1 · Answer 3 · answered Sep 02 '14 at 04:29

-1

you have syntax error in your html codes:

<input type="button" class="btn btn-default" id="submit" value="Submit">
            </button>

change it to this:

 <button type="button" class="btn btn-default" id="submit" value="Submit">
            </button>

Also, you need using Javascript/jquery to submit your form to prevent refreshing your entire page

answered Sep 02 '14 at 04:29

Super Hornet

2,839
5
27
55

Thanks for catching that! – cardboardtheory Sep 02 '14 at 04:38

score -1 · Answer 4 · edited Dec 17 '19 at 13:31

-1

place : e.preventDefault(); inside the keypress function

edited Dec 17 '19 at 13:31

AgeDeO

3,137
2
25
57

answered Dec 17 '19 at 11:58

Rhys

1

Don't refresh page when enter key is pressed

4 Answers4

Linked