How can we make a form in a page doesn't submit on pressing Enter — rather. it does the same work as pressing a particular button or icon or image?
Here are the contents of my form:
<input type="text" id="txt" /><input type="button" value="search"
onclick="searchresult()" />
The problem is that if I press Enter, the form submits and text field clears itself but the function searchresult() doesn't show its effect. When only pressing the button, it works well.
HTML
<input type="text" id="txt"/>
<input type="button" value="search"/>
jQuery
$('input[type=text]').on('keyup', function(e) {
if(e.which == 13) { // 13 is keycode for enter
e.preventDefault();
}
})
You can also bind to submit() like following
$('form').submit(function(e) { // instead of only `form`,
// use with `id` or `class` combination
if(e.which == 13) {
e.preventDefault();
}
});
Remainder
Don't forget to place you code within
$(document).ready(function() {
// your code
});
in short
$(function() {
// your code
});
Alternatively, instead of disabling the enter key, you might be able to bind to the onsubmit event to perform any processing prior to submitting the form. From the MDN documentation:
The submit event is raised when the user clicks a submit button in a form ().
Try:
$('form').submit(function(event){
if(!$(':focus',this).is(':button'))
event.preventDefault();
});
This attaches to the form itself. If it was submitted any way other that clicking the submit button it halts the submission process. For better performance narrow down the 'form' selector.
Try this:
form
<form id="myForm">
<input type="text" id="txt" />
<input type="submit" value="search" />
</form>
js
<script>
$(document).ready(function(){
$("#myForm").submit(function(e){
e.preventDefault();
searchresult();
});
});
</script>
Related
I want to stop a user submitting a form upon clicking enter.
This works for that
$(document).ready(function() {
$(window).keydown(function(event){
if(event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
However I have other buttons on the page that when I tab to and click enter to avail of their functionality, this is blocked via this function.
The button sits as so:
<input type='button' tabindex="29" value='Add Additional Drug' id='addButton'>
And I only want to submit the form when enter pressed while my submit button is selected.
<input type="submit" name="submit" value="Submit" tabindex="40" class="submit"/>
How would I do this?
EDIT
I see the answer in the attached Stackoverflow but he allow people to press Enter if they have completed all the fields:
I don't want a user to press Enter unless they have a button selected(i.e. Can't press Enter, tab to button, can press enter, which will trigger the button to do its functionality and not submit the form.
The form works on a Tabbing basis, so a user will tab over all the fields.
Binding the keydown event to the whole document will affect all inputs and forms on the page, you may have several ones in your page so it will mess up the whole page logic.
You can bind it to a specific form instead:
$("#myForm input").not("#addButton").keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
Demo:
$("#myForm input").not("#addButton").keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
form input {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="myForm">
<input type="text" name="input1" />
<input type="text" name="input2" />
<input type="text" name="input3" />
<input type="submit" name="submit" value="Submit" tabindex="3" class="submit" />
</form>
Note:
I used #myForm as test id here to target a specific form in the
page, you just need to use your form id.
Using jQuery .not() method in .not("#addButton") won't affect the button with id="addButton".
First, keep in mind that what you are attempting breaks UI accessibility standards.
Bearing this in mind, you'll need to stop using a true "submit" button and use a regular button that impersonates the submit button.
Next, you'll need to manually trigger the click events for all non-submit button buttons via code.
Here's a working example. See the comments for details:
$(document).ready(function() {
$(window).on("keydown", function(event){
// Check to see if ENTER was pressed and the submit button was active or not
if(event.keyCode === 13 && event.target === document.getElementById("btnSubmit")) {
// It was, so submit the form
document.querySelector("form").submit();
} else if(event.keyCode === 13 && event.target !== document.getElementById("btnSubmit") ){
// ENTER was pressed, but not while the submit button was active
alert("Enter pressed on something other than submit button.");
// Cancel form's submit event
event.preventDefault();
// Invoke click event of target so that non-form submit behaviors will work
event.target.click();
// Tell JQuery to cancel the event
return false;
}
});
// Non-submit button event handling
$("#btnOther").on("click", function(){
alert("Other button clicked!");
});
// Set up your "regular" button to act as a "submit" button when it is clicked
$("#btnSubmit").on("click", function(){
// Submit the form
document.querySelector("form").submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action=# method=post>
<input name=test>
<input type=button id="btnOther" value="Other Button">
<input type=button id="btnSubmit" value=Submit>
</form>
I have a form with one field that the user needs to type into, and a button underneath that when clicked, does some jQuery and hides the login-form. But when I hit enter after typing something in, the page refreshes...
There's part of me that thinks it doesn't need to be an <input> or a <form>
I don't actually need to post anything. I have tried changing the input to a <button> which completely ruins my styling and still doesn't work. What's the best way of getting round this?
<div class="login-page">
<div class="form">
<form class="login-form" method="POST">
<!-- user inputs -->
<p class="phc">PHC:</p><input type="text" id="username" placeholder="Enter Your PHC Here" />
<!-- your submit button -->
<input class="login" type="button" id="submit" value="login">
</div>
True, Adam. If the form does not contain the type submit button, a keypress event has to be added manually. Otherwise Enter will act as the Accept Button on the form.
You need to attach keypress event to the form or at least the field. For convenience, you also need to combine the callback functions into one.
$('#username').on('keypress', function(event){
var code = event.keyCode || event.which;
if(code == 13){
// submit the form.
}
});
$('#username').on('keypress', function(event){
var code = event.keyCode || event.which;
if(code == 13){
console.log('Submitting form');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="login-form" method="POST">
<p class="phc">PHC:</p><input type="text" id="username" placeholder="Enter Your PHC Here" />
<input class="login" type="button" id="submit" value="login">
</form>
If the enter key is pressed when focused to an input field inside a form that has a submit button, the default browser behaviour is to fire a submit event on that form. You can prevent this happening by either:
return false;
or
e.preventDefault();
Full code:
$('.login-form').on('submit', function() {
return false;
});
Fiddle: https://jsfiddle.net/nc1e2gm6/
Bear in mind that if you go down the route of using e.preventDefault(); instead or return false;, you need to pass the e variable from the function call, like:
$('.login-form').on('submit', function(e) { ...
Don't think i explained it very well but i have fixed it, the enter key now activates the submit button rather than refresh the page.
$("form").submit(function() { return false; });
$(document).ready(function(){
$('#username').keypress(function(e){
if(e.keyCode==13)
$('#submit').click();
});
});
I am creating a comment functionality and below are my code so far.
html
<form action="http://website.com/transaction_items/add_comment" class="" id="form-comment" role="form" method="post" accept-charset="utf-8">
<input type="hidden" name="checklists_item_id" value="6" style="display:none;">
<input type="hidden" name="user_id" value="1" style="display:none;">
<div class="input-group col-xs-12">
<input type="text" name="comment" value="" class="form-control" id="comment-input" placeholder="Enter your comments..">
<span class="input-group-btn">
<button class="btn btn-default" id="doc-comment" type="button">Post</button>
</span>
</div>
</form>
jQuery
This function is called when document is ready.
function comment () {
$('#doc-comment').click(function (e) {
var form_id = '#' + $(this).parents('form').attr('id');
// submit data from the form
submit.send(form_id);
});
}
The problem:
Using the button <button class="btn btn-default" id="doc-comment" type="button">Post</button> to submit data work fine, but
if I use enter in the keyboard, submit.send(form_id); will not do its function, instead the default form submission will execute.
How can I use ajax if use enter in the keyboard to submit form data?
nutshell
$("#form-comment").on('submit', function(evt) {
evt.preventDefault();
// do your ajax stuff here
});
you can then toss the onclick button listener.. as this will handle the button submit as well
There are more ways to submit a form then simply pressing the submit button.
You need to:
Use the forms submit method
Keep the form from doing the full submit.
-
// This will catch the *enter* as well as the submit button
$("#form-comment").on('submit', function(evt) {
evt.preventDefault();
// You can then submit the form via ajax and update things as needed.
});
IF you are going to use a button you should at least do a
<button type="button">...</button>
which behaves differently.
$("#form-comment").keyup(function (e) { // On pressing enter
if (e.keyCode == 13) {
// put your ajax code here
}
});
You may have to disable the default Enter event for the form submit button as well depending on your browser.
So in the Jquery Button click function make sure you have something like
event.preventDefault();
Here the code below disables search button when search box is empty. When input type for search button is set to submit then neither submit nor the enter key from keyboard submits empty form but when I change input type to button and put the cursor inside input field and press enter button even empty form is posted causing reloading of page. How to prevent submitting search form on pressing enter when search field is empty?
<form action="search.php" method="post">
<input type="text" class="search" placeholder="search here"/>
<input type="submit" class="Button" value="search"/>
</form>
<script>
$(document).ready(function(){
$('.Button').attr('disabled',true);
$('.search').keyup(function(){
if($(this).val().length !=0)
$('.Button').attr('disabled', false);
else
$('.Button').attr('disabled',true);
})
});
</script>
Add a event listener for the form submission
$('form').submit(function(e){
// check logic here
if ($('.search').val().length < 1)
e.preventDefault()
});
where e.preventDefault will avoid the form being submitted if no value
otherwise the form will submitted normally
here is your code with some modification:
JsFiddle Demo
$(document).ready(function(){
// By default submit is disabled
$('.Button').prop('disabled', true);
$('.search').keyup(function() {
if($(this).val().length !=0 ) {
$('.Button').prop('disabled', false);
} else {
$( ".search").focus();
$('.Button').prop('disabled', true);
e.preventDefault();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="search.php" method="post">
<input type="text" class="search" placeholder="search here"/>
<input type="submit" class="Button" value="search"/>
</form>
JsFiddle Demo
You can try like this
$('form').submit(function(e){
if ($('.search').val().length<=0)
return false;
});
you should use prop instead of attr if you want to change disabled
$(function() {
$('.Button').prop('disabled', true);
$('.search').keyup(function() {
$('.Button').prop('disabled', !$(this).val());
});
});
I got a form which I would like to submit using jQuery if the result of checkBrowser function is old.
<form action="xxx" method="post">
...
<input id="iop" type="submit">
...
</form>
jQuery:
$("#iop").mousedown(function(e){
e.preventDefault();
var status=checkBrowser();
if(status=='old'){
$("#iop").submit();
}
});
What I have done:
I debugged the code and it reaches the line $("#iop").submit(); but nothing happens. any idea?
You need to use submit() on <form> not <input> element. From the docs:
The submit event is sent to an element when the user is attempting to
submit a form. It can only be attached to elements
if(status=='old'){
$("form").submit();
}
or more specific by using .closest() to get the closest matching form element of your submit button when traverse up the DOM tree:
if(status=='old'){
$(this).closest('form').submit();
}
Now you are refering to the submit input instead of the form.
Change this:
$("#iop").submit();
To this:
$("form").submit();
Instead of calling submit() explicitly, let the default action do it:
$("form").submit(function(e){
var status=checkBrowser();
if(status != 'old'){
e.preventDefault();
}
});
Also, bind the handler to the form's submit event, not the button.
Change <input id="iop" type="submit"> to <input id="iop" type="button">
and $("#iop").submit(); to $("form").submit();
Try this
<form action="xxx" method="post">
<input id="iop" type="button" value="Submit">
</form>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#iop").mousedown(function(e){
//e.preventDefault();
// var status=checkBrowser();
status = "old";
if(status=='old'){
$("form").submit();
}
});
});
</script>