logo
down
shadow

How do I differentiate between clicking a submit button and hitting enter in an input to submit a form?


How do I differentiate between clicking a submit button and hitting enter in an input to submit a form?

By : Sujatha Kulkarni
Date : November 17 2020, 11:52 AM
To fix this issue Kind of a hacky solution, but you can tie the event handler to a click on the submit button, instead of a submit of the #form. Then you can check if there were non-zero coordinates associated with the event. If so, the submit button was clicked, if not, the enter key was pressed. e.g.
code :
$("input[type='submit']").click(function(event){
    if (event.screenX === 0) alert("You hit the enter key!");
    else alert("You clicked the submit button!");

    return false; // Allows me to read the console before the form submits!
});


Share : facebook icon twitter icon
Hitting enter in any textbox in chrome triggers the form submit, even when there is no submit button

Hitting enter in any textbox in chrome triggers the form submit, even when there is no submit button


By : user2102009
Date : March 29 2020, 07:55 AM
may help you . I am building a site which uses jQUery validation plugin and want things validated before submitting the form. My code looks like follows , use this syntax:
code :
<form onsubmit="return validateAndSubmit()">
...
How can I have a HTML form submit by just hitting Enter (no submit button)?

How can I have a HTML form submit by just hitting Enter (no submit button)?


By : user3677014
Date : March 29 2020, 07:55 AM
I wish did fix the issue. I do not want to have a submit button as I want people to be able to enter the form field and then to search all they have to do is press the enter button.
code :
<div class="search1" form action="weezyresults.php" method="post">
<div class="search1">
<form action="weezyresults.php" method="post">
Submit form data both on clicking enter and hitting the submit button

Submit form data both on clicking enter and hitting the submit button


By : Serenity
Date : March 29 2020, 07:55 AM
To fix this issue I have updated code. Create a function and call it on both textbox keypress event and identify submit button then call function and on click event of button.
code :
function submitLogin() {
$.ajax({
    url:"script.php",
    type:'POST',
    dataType:"json",
    data: $("#login-form").serialize()
}).done(function(data){
   //do domething
});
}

$('#email').keypress(function(e) {
if (e.which == '13') {
         submitLogin();
   }
});
$('#passwd').keypress(function(e) {
if (e.which == '13') {
         submitLogin();
   }
});
$('#login').click(function(){
    submitLogin();
});
Submit form data both on clicking enter and hitting the submit button from a Bootstrap modal window

Submit form data both on clicking enter and hitting the submit button from a Bootstrap modal window


By : enanex
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Listen to form submit event - it gets triggered by both enter and click events.
Markup
code :
<form id="yourForm">
  <input type="text" name="username">
  <input type="password" name="password">
  <input type="submit" value="Submit">
</form>
$('#yourForm').submit(function(event){

  // prevent default browser behaviour
  event.preventDefault();

  //do stuff with your form here
  ...

});
How to submit text area by clicking submit button OR by hitting Enter?

How to submit text area by clicking submit button OR by hitting Enter?


By : Lang Shoats
Date : March 29 2020, 07:55 AM
wish helps you You can call multiple event listeners in one function by separating them with a space.
In this case we're listening for both the keypress and click events, and passing in the event parameter to listen for which button was entered.
code :
<input type="submit" id="submit-btn">Submit</button>

$(function(){
    $("#submit-btn").on("keypress click", function(event){
        var formValue = $("textarea").val();
        if (event.which === 13 || event.type === "click") {
           // Form submission code goes here
        }
    });
});
$("#submit-btn").click(function(){
    var formValue = $("textarea").val();
        // Submission logic goes here.
    })

    // Trigger the submit button's click event

    $("textarea").keypress(function(event) {
        if (event.which === 13) {
            $("#submit-btn").click();
        }
    });
Related Posts Related Posts :
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • How to hide other div apart from touched div to the band
  • Is global variable assignment atomic on NodeJS?
  • Datepicker onchangemonthyear beforeshowday
  • trying to render html files using jade but it still adresses it as a jade
  • Google Analytics - Understanding and Dissecting the Snippet: What is | | [ ];
  • Replacing "[aA09.b]." to "[aA09.b]\n" in in JavaScript
  • Why wrap a function definition in an immediate function?
  • Enable / disable jQuery script on switching to different tab in a HTML page
  • how can find return variable value outside anonymous function in node js mysql query function
  • Converting 1 to 0001 in javascript array
  • svg viewbox should not resize the text fontSize?
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org