Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Don't refresh page when enter key is pressed

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!

like image 967
cardboardtheory Avatar asked Sep 02 '14 04:09

cardboardtheory


2 Answers

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

like image 110
Amol Avatar answered Sep 17 '22 12:09

Amol


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

like image 45
Axel Amthor Avatar answered Sep 17 '22 12:09

Axel Amthor