I have several input fields text on my page:
<input type="text">
The form is submitted when I press ENTER in some of them, which is what I don't want.
What can cause such behavior?
I triple checked and I do not have submit buttons (actually I do not have any buttons at all)
You could use a bit of Javascript placed in the head section of your HTML page to disable submission on enter clicked in an input field:
<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>
You are probably submitting some of your forms via ajax calls in which you prevent the default browser behavior. That is why some of your forms are not submitted when you hit the enter.
To make sure all of your forms do not submit when enter is pressed, you can bind a custom function to all of your forms which detects when enter key is pressed. In this function you can prevent the default browser behavior.
$('form').keydown(function(e){
if(e.keyCode === 13) {
e.preventDefault();
return false;
}
});
Example Fiddle here.
Related
I have pretty much the same problem like in this question ( Textarea enter keypress not working because of form submit enter prevention ) but my code looks totally different.
My script is from ReusableForms. I believe I found the lines
$('#reused_form').submit(function(e)
{
e.preventDefault();
$form = $(this);
//show some response on the button
$('button[type="submit"]', $form).each(function()
{
$btn = $(this);
$btn.prop('type','button' );
$btn.prop('orig_label',$btn.text());
$btn.text('Sendet ...');
});
$.ajax({
type: "POST",
url: 'handler.php',
data: $form.serialize(),
success: after_form_submitted,
dataType: 'json'
});
});
... would anybody please be so kind to tell me what to change here so enter works again? I am clueless!
Based on my observation you are probably using the input tag and want to use the enter key to submit the form or create multiple rows in the input box. I would provide solutions for both because I do not know which one you are referring to.
If you want to create multiple rows in your the input box when you press enter, replace the input tag for the input box with the text area tag:
<textarea rows="2"></textarea>
Change the number in the rows property to specify the amount of rows
you want to create.
If you want to submit the form when you press the enter key:
<textarea rows="2"
onkeydown="if (event.which == 13 || event.keyCode == 13) { submit(); }"></textarea>
Replace the submit function with the code that submit your form.
I hope this answer your question. If this was not the question you needed answer or not the answer you wanted please leave a comment so I can edit my code accordingly.
I'm trying to create a form in which the submit button is disabled until the text matches my conditions. And I'd like to constantly (each time a character is typed) check the text, instead of having to create a button that will activate another one.
Thanks !
You can use jquery and keyup to detect every time that the user type something here is an example:
http://jsfiddle.net/82sTJ/253/
<input type="text" id="text">
<button type="submit" disabled id="submitButton">
Submit
</button>
var condition = "good";
$('#text').keyup(function(event) {
if($('#text').val() == condition) {
$("#submitButton").prop('disabled', false);
}else{
$("#submitButton").prop('disabled', true);
}
});
Here is the alternative way using input suggested by Rob:
var condition = "good";
$('#text').on("input", function(event) {
if($('#text').val() == condition) {
$("#submitButton").prop('disabled', false);
}else{
$("#submitButton").prop('disabled', true);
}
});
Also you can use something like vue.js or angular to check the value in real time.
*Edited
This question already has answers here:
Prevent users from submitting a form by hitting Enter
(36 answers)
Closed 6 years ago.
I have an html form with some input fields in it, one of the input field is search field, when I click the search button next to this search input field, search results will be returned from server using ajax, what I want is to prevent form submission when user focuses on this specific search input field and hit enter. By the way, I'm using AngularJS, so solution might be a bit different from JQuery or pure javascript way I think.. Do-able? Any advice would be appreciated!
Use a function like:
function doNothing() {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if( keyCode == 13 ) {
if(!e) var e = window.event;
e.cancelBubble = true;
e.returnValue = false;
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
<form name="input" action="http://www.google.com" method="get">
<input type="text" onkeydown="doNothing()">
<br><br>
<input type="submit" value="Submit">
</form>
JSFIDDLE HERE
In the button click handler do a e.preventDefault()
function clickHandler(e){
e.preventDefault();
}
You can also use a button instead of a submit button.
When you submit form using enter key on particular text fields or submit button(focus).
To prevent form submit twice, we can use both approach
1.
define var isEnterHitOnce=true globally which loaded at the time of form load
on keyPress Event or on submitForm()
if(event.keycode==13 && isEnterHitOnce){
isEnterHitOnce=false;
//Process your code. Sent request to server like submitForm();
}
isEnterHitOnce=false;
2.
disable the field object from where you received the action like
beginning of method in formSubmit()
document.getElementById(objName).disabled=true; // objName would be your fields name like submitButton or userName
//At the end of method or execution completed enable the field
document.getElementById(objName).disabled=false;
I just want to ask how can I stop my html textbox from refreshing when I press enter.
<div id="topSearchBox">
<input id="Text1" type="text" value="search..."/>
<img id="topSearchBoxIcon" alt="search buttom" src="~Images/Search-32x32.png" width="18px" height="18px" />
</div>
I have a script that tells it to do some thing else, but after the script has completed it refreshes the page anyway.
$(document).keyup(function (e) {
if (e.keyCode == 13) { // enter
Search();
}
});
I've read a bit on it, but nothing seems to work.
$(document).keyup(function (e) {
if (e.keyCode == 13) { // enter
Search();
return false; //you can also say e.preventDefault();
}
});
If I well understood, maybe the page refresh because you may have a submit input (or button) after to the input text field so when you hit the enter key you also send the form itself.
try to stop the propagation of the event with
$(document).keyup(function (e) {
if (e.keyCode == 13) { // enter
e.stopPropagation();
Search();
}
})
Return false in the event to stop the default event (submit) taking place. This is assuming that the submit event is being triggered.
$(document).keyup(function (e) {
if (e.keyCode == 13) { // enter
Search();
return false; //this will stop the default event triggering
}
});
You could also put it outside of a form (if it's inside).
Note - Also, it's better if you bound the event to your input directly.
$('#Text1').keyup();
I have answered it here. https://stackoverflow.com/a/16016122/1047337
It's about having only one text box in the form.
I have more than one form on the same page:
I would like to know if there is any way I can submit the right form when the user press the "return keyboard key" ?
Thanks
How about this:
<form id="form1">
<input type="text" />
</form>
<form id="form2">
<input type="text" />
</form>
<script type="text/javascript">
for (var i = 0; i < document.forms.length; i++) {
document.forms[i].onkeypress = function(e) {
e = e || window.event;
if (e.keyCode == 13)
this.submit();
}
}
</script>
Basically loop through each form, wire the onkeypress event for each one that checks for enter (keycode == 13) and calls submit on that form.
I assume by right form you mean the form the user is working on !
Well it is not the cleanest of way but if you really want to work this way, You can designate form boundaries and you can set the focus to the appropriate submit button as soon as the user scroll pass from one form to other.
With neater version, you can drive the users to chose appropriate options and lead them to work on a single form (may be hide the irrelevant form once you get enough information about what user is going to work on)
Check which element has the focus. Check which form is his parent. Execute submit.
document.onkeypress = function() {
var element = activeElement.parentNode;
while(element.nodeType != /form/i) {
element = element.parentNode;
}
element.submit();
}