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 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
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With