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.
Related
I have a textarea that I submit while pressing Enter
https://stackblitz.com/edit/angular-uvxifq-uyxteg
<textarea class="message-area" (keyup.enter)="ValidateCommentAndPost(commentErr, $event);" [(ngModel)]="comment" matInput #commentErr="ngModel"></textarea>
I would like to disable the new Line while I press enter, so I took some information on the web and did .
ValidateCommentAndPost(ngComment:NgModel, event?:KeyboardEvent){
event.preventDefault();
if((ngComment.invalid && (ngComment.dirty || ngComment.touched)) && ngComment.errors) {
this.ResetComment();
} else {
this.PostComment();
}
}
But this doesn't work, also, return false; still create a white line.
What can I do?
Add event to capture enter and prevent the default behaviour.
Add the keydown event to your component html
<textarea required
(keydown.enter)="onKeydown($event)" (keyup.enter)="ValidateCommentAndPost(commentErr, $event);" pattern="/^[/\S/]+$/i" [(ngModel)]="value" matInput #commentErr="ngModel"></textarea>
and add this to your component ts file
onKeydown(event){
event.preventDefault();
}
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 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.
I have a form with several submit buttons. I want my last button to handle the submit rather than the HTML5 spec'ed first button.
I can't change the html at this point and am fairly sure this requires JS. But when I've given it a shot I've gotten into nasty loops or dead code trying to prevent default behaviour and then fire my other button.
Has anyone done this before? jQuery is on the page if needed.
Thanks,
Denis
Since you mentioned jQuery :)
If all you want to do is submit your form when a user presses the enter key, then
$(function() {
$('body').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$('#myForm').submit();
}
});
});
However, if you have different behavior/forms depending on which button is clicked and you want the enter key to trigger your last button's click event, then
$(function() {
$('body').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
$('input[type="submit"]:last').click();
}
});
});
You should just change the input element's type attribute to button instead when you don't want it to submit the form. (I know you said you can't really change the HTML, but this is the best way)
<input type="button" name="mybutton" class="submit-button" value="I wont submit!" />
jQuery code:
$('.submit-button').click(function() {
$('#secret-value-field').val($(this).val());
$(this).parents('form').submit();
});
Or something along those lines.