CODEWITHSUNDEEP
javascriptjqueryhtml
cardboardtheory
cardboardtheory

Reputation: 117

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!

Upvotes: 9

Views: 22403

Answers (4)

Rhys
Rhys

Reputation: 1

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

Upvotes: -1

Axel Amthor
Axel Amthor

Reputation: 11096

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

Upvotes: 5

Amol
Amol

Reputation: 918

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

Upvotes: 13

Super Hornet
Super Hornet

Reputation: 2907

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

Upvotes: -1

Related Questions