I am trying to disable the submit action when a user presses the Enter key.
Here is my HTML:
<form name="form1" class="form-horizontal"
onkeypress="return event.keyCode != 13;"
ng-submit="submitForm()">
<div class="form-group">
<div>Test here</div>
<textarea ng-model="message" rows="3"></textarea>
</div>
</div>
The onkeypress attribute will make the form NOT get submitted when user presses Enter; however, the user won't be able to have breakline in the textarea element. In other words, the user can only keep typing without break even if they hit Enter. Is there a way to fix this?
Thanks a lot!
Remove this: ng-submit="submitForm()" Add a button to the form to do the submission through ng-click="submitForm(). All forms should have a button to submit with, so that should take care of your issue. Use type="button".
$("form").submit(function(e) {
e.preventDefault();
});
Since you're using Angular:
$(document).on("submit", "form", function(e) {
e.preventDefault();
});
Related
I am trying to find out how to create a submittable chat entry. What I want is a text box that can wrap. From what I have seen so far, this is done with textarea. However, the text area does not let me submit by just pressing enter. It required a send button. How can I have the best of both worlds? (wrapping input text, but also being able to submit by pressing "enter")
This is the code that was working fine, but would not let me wrap text when I inserted text:
<form action="">
<input id="m" autocomplete="off"><button>Send</button>
</form>
This is my new code that will wrap text. It will submit, but only when I press the send button. I want to submit when the "enter" key is pressed:
<form action="" style="height: 8%">
<textarea name="m" style="height:100%; width: 80%"></textarea>
<button>Send</button>
</form>
I believe that the input id section let me submit when I pressed "enter" only, but textarea will not allow me to.
This code will submit the textarea content after pressing enter (like input). I added ids to both form and textarea:
var textArea = document.getElementById("chatBox"); // set the textarea as variable
textArea.addEventListener("keyup", function(event) { // listen to keypress on the textarea
if (event.keyCode === 13) { // 13 is the "Enter" key on the keyboard
document.getElementById("chatForm").submit(); // submit the form
}
});
<form id="chatForm" action="" style="height: 8%">
<textarea name="m" id="chatBox" style="height:100%; width: 80%"></textarea>
<button>Send</button>
</form>
Hope that helps.
You can catch keyup events on the textearea and then submit the form :
<form action="" id="yourForm">
<textarea name="m" onkeyup="submit"></textarea>
</form>
with :
function submit() {
document.getElementById('yourForm').submit();
}
I am trying to build a page that would allow a user to input text into a text field and hit enter on their keyboard and it would return the top 10 Wikipedia entries with that text.
Currently, my concern is that the page refreshes every time it fetches the JSON. I attempted the e.preventDefault() method, as I read about on other questions, but it isn't working. Can someone help me understand why this auto-refresh is happening, and how to fix it? Thank you.
Here is my HTML:
<div class="container-fluid">
<form action="#">
<input id="search" name="query" onkeyup="" type="text"></input>
</form>
</div>
<div class="main"></div>
</div>
And here is my Javascript:
$(document).ready(function() {
$("#search").on("keyup", function(e) {
// attempt to prevent page refresh
e.preventDefault();
// if key pressed is "enter"
if (e.keyCode == 13) {
// retrieve user input
var search = document.getElementById("search").value;
// build Wikipedia API url
var request = "https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch=" + search + "&format=json&callback=?";
$.getJSON(request, function(json) {
var x = json.query.search[0]["snippet"];
$(".main").html(x);
});
};
});
});
Here's a link: https://codepen.io/lieberscott/pen/RLVaGE
Because you submit the form (pressing enter does that). The form submits to the current page which looks like a reload.
<form id="searchform>
<input id="search" name="query" onkeyup="" type="text"></input>
</form>
$('#searchform').on('submit', function(e){
e.preventDefault();
// your magic here.
});
The preventDefault stops the key UP, but by that time, you've already started submitting. The poreventDefault stops the enter getting input as text (you can check this with a textarea). If you'd change it to a letter, say A, you'd type the A, but not see it.
You can also remove the form itself, keeping just the input, if that doesnt create other issues, resulting in less HTML, which is nice.
Remove <form> tag from your HTML.
You are using a form and on enter/return it will try to submit the form.
Unless there is a button type="submit" or input type='submit' remove the form and use only input
<div class="container-fluid">
<input id="search" name="query" onkeyup="" type="text"></input>
</div>
<div class="main"></div>
</div>
I'm only using HTML and JavaScript.
I have one form
<form id="form1">
<input name="name" type="text" size="20">
</form>
And one button
<button onclick="outputname()" type="submit">Search</button>
So the idea is the user types a number on the form and clicks the search button and an action is performed (this works great).
However, if the user enters a number and hits the Enter button on keyboard the page is refreshed. The same happens on iPad. ("Return" button is displayed instead of "Go").
So I want the Enter button to work on keyboard and Go to work on iOS.
The idea is that the user enters a customer number and the relevant details are displayed.
Give an ID to both your input field and button, to be sure you trap the correct one:
HTML:
<form action="destination.html" method="post">
<input id="foo" name="name" type="text" size="20">
<button id="mybutt" onclick="outputname()" type="submit">Search</button>
</form>
Note that destination.html is where you want the data posted to. If you want it posted to the same file, just use: action="" or leave it out.
Javascript:
document.getElementById('foo').onkeypress = function(e){
if (!e) e = window.event;
var keyCode = e.keyCode || e.which;
if (keyCode == '13'){
var btn = document.getElementById('mybutt');
mybutt.click();
return false;
}
}
Sources:
How to detect when the user presses Enter in an input field
Capturing the Enter key to cause a button click with javascript
Insert this:
action="post"
Inside your form tag. I.e., your form tag will have to be this way
<form id="form1" action="post">
In this case, you could manage the submit event, instead of key/click events.
<form id="form1" onsubmit="outputname()">
Submission events triggered by either a click or pressing enter will call outputname.
I know this question has been asked before but I could not find a satisfactory answer for my situation. So I am asking again.
I have a simple form with 2 text boxes and a submit button. After the user enters text in either text box they should not be able to submit through the Enter key, only the submit button should allow them to submit. I thought trapping the enter keypress and returning false from the onChange event handler would do the trick but apparently not, this still causes a form submission...
function doNotSubmit(element) {
alert("I told you not to, why did you do it?");
return false;
}
</script>
<form id="myForm" action="MyBackEnd.aspx" method="post">
<table>
<tbody>
<tr>
<td>
Joe: <input id="JoeText" type="text" onChange="doNotSubmit(this)">
</td>
<td>
Schmoe: <input id="SchmoeText" type="text" onChange="doNotSubmit(this)" >
</td>
</tr>
</tbody>
</table>
<input type=submit>
I tested on both Chrome and FF (latest versions).
Can you please show me how to prevent the form submission?
Thanks.
to piggy back on #Dasein's anwser you want to prevent the default behavior instead of stopping propagation ( i.e. returning false):
document.getElementById("myForm").onkeypress = function(e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) {
alert("I told you not to, why did you do it?");
e.preventDefault();
}
}
<form id="myForm" action="MyBackEnd.aspx" method="post">
<table>
<tbody>
<tr>
<td>
Joe: <input id="JoeText" type="text">
</td>
<td>
Schmoe: <input id="SchmoeText" type="text" >
</td>
</tr>
</tbody>
</table>
<input type=submit>
I think this should do:
document.getElementById("myInput").onkeypress = function(e) {
var key = e.charCode || e.keyCode || 0;
if (key == 13) {
alert("I told you not to, why did you do it?");
return false;
}
}
If you include a submit button then the default form behavior is to submit on enter key. To prevent accidental submissions you could add a confirm dialog to the onsubmit event (form A). Another alternative is to replace the submit button with your own (form B). However, the user would then need to click the button to submit.
Run snippet to test
(Tested in Chrome, Firefox, and IE 5-11)
<html>
<body>
Form A: This form submits on enter key
<form action="handler.aspx" method="post" onsubmit="return confirm('submit form?')">
<input type="text" >
<input type="text" >
<input type="submit">
</form>
<p>
Form B: This form submits only on button click<br>
<form action="hanlder.aspx" method="post" >
<input type="text" >
<input type="text" >
<input type="button" value="submit" onclick="if (confirm('Submit form?')) document.forms[1].submit()">
</form>
</body>
</html>
I am surprised no one has given a solution that achieves the desired effect of preventing accidental submission by hitting enter on a text field without also preventing intentional submission by hitting enter while the submit button has the focus.
To this end, I recommend:
function submitFunction(e)
{
if(document.activeElement!=document.getElementById('submit')) e.preventDefault();
}
The lazy solution, which works but often results in code that is less extensible or more work to maintain, is to put this in the onsubmit attribute of the <form> element. Often a better solution is to use addEventListener to add the function as a listener to the form element:
document.getElementById('myForm').addEventListener('submit', submitFunction);
Regardless of which method you choose to invoke the function, in your HTML make sure to give an ID to the submit button:
<input type="submit" id="submit" />
I prefer this solution because it allows the expected behavior of allowing the user to submit the form by tabbing through the form and then pressing enter when the submit button is highlighted, and it also allows clicking on the submit button, because that element will have the focus in both these cases, but it prevents accidental submission because the submit element will not have the focus in these cases.
This is an improvement for accessibility which can be important for disabled users, users using a text-only console browser, users without a mouse, and can still be marked improvement for users with a mouse that is unreliable or inconvenient. It happens more than you might realize. Plus, some users just like being able to navigate this way, so not breaking this behavior is an improvement in user experience.
How about below code snippet
<form method="POST">
<div style="display: none;">
<input type="submit" name="prevent-enter-submit" onclick="return false;">
</div>
</form>
For those using react:
<form
onSubmit={handleSubmit(onSubmit)}
onKeyDown={e => {
if (e.key === 'Enter') {
// Keeps form from submiting on hitting enter
e.preventDefault();
}
}}
>
Thank you for any help.
I am trying to use Parsley for Form Validation. My form has one submit button and some other buttons to dynamically add inputs to the form. But when I press these other buttons, form validation is carried out. But I am not submitting any form.
How to prevent form validation from happening when I press other buttons than submit button?
Sorry, I dont know how to JS Fiddle. My code is like the following:
<form method="post" action="confirm" data-parsley-validate>
<input id="brand" data-parsley-trigger="submit" required />
<button id="addQuantity">Add</button>
<input type="number" required data-parsley-trigger="submit" />
<input type="submit" value="Submit">
</form>
When I press Add, the form is validated. How should I prevent this?
Thank you very much.
The tag button which was introduced in HTML5 is equivalent to input type="submit" hence when you press add it will automatically fire submit action. What you can do is replace the tag to input type="button" or you can prevent the default action in jquery like this
<script>
$('#addQuantity').click(function(event)
{
event.preventDefault();
//do your action goes below
});
</script>
I found adding formnovalidate to the button skipped form validation for the form only when clicking that button.