I'd like to trigger a function on key and on click

Question

I currently have a function run when the calculate button is clicked.

<button class="hvr-shrink"  type="submit" value="submit" id="submit"> Calculate </button>

I want that the function runs when I not only click the submit button but also the ENTER KEY

Function works with perfection just want it to also work when user hits enter

Check the javascript here!

HTML to the function

<html>

<head>

    <title>Project</title>

    <link href="../CSS files/style.css" rel="stylesheet" type="text/css">
    <link href="../CSS files/hover.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>

</head>

<body>
    <div id="home">
        <a href="home.html"> 
            <img class="hvr-shadow" src="../../misc/hoem.png" id="homeicon">
        </a>
    </div>
    <h1>Geometric Sequence</h1>
    <h2>Find any term of a Geometric Sequence</h2>

        <input id="firstTerm" placeholder="First Term?">
        <input id="nTerm" placeholder="Nth Term?">
        <input id="commonR" placeholder="Common Ratio?">

        <button class="hvr-shrink" type="submit" value="submit" id="submit"> Calculate </button>



        <p id="term"> </p>

    </div>

    <script type="text/javascript" src="../math fxn (js)/geoseq.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.6.0/firebase.js"></script>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

</body>



</body>

please organize your javascript code a little better so we can have a better view. Thanks — HenryDev, Nov 14 '16 at 00:59
@Gurnnor Kahlon where is the user suppose to give an input?? you don't have an input field?? — HenryDev, Nov 14 '16 at 01:01
Do you only have a button in html?? you don't have an input field where user can enter data in? — HenryDev, Nov 14 '16 at 01:05
@Gurmoor Kahlon I see your javascript code. But what else do you have in the HTML?? only the button?? — HenryDev, Nov 14 '16 at 01:07
your html code is a picture. Can you please paste it on here so its easy to copy and start working on it. Thanks! — HenryDev, Nov 14 '16 at 01:09
@HenryDev I just need a suggestion on how to make it run on both the on-click and on the onkeypress — Gurnoor Kahlon, Nov 14 '16 at 01:10
@Gunoor its hard to test it without actually working on the code. Please paste hmtl code on here — HenryDev, Nov 14 '16 at 01:12
@HenryDev So how can I get it done? I am completely lost on how to get it to work for both. i can get it to work only for on click or only for keypress but I Need it to work for both on click of calculate and when Enter is pressed! — Gurnoor Kahlon, Nov 14 '16 at 01:22
Possible duplicate of [Trigger a button click with JavaScript on the Enter key in a text box](http://stackoverflow.com/questions/155188/trigger-a-button-click-with-javascript-on-the-enter-key-in-a-text-box) — Gurnoor Kahlon, Nov 14 '16 at 03:25
*Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. Questions without a clear problem statement are not useful to other readers. See: How to create a [mcve].* You are not supposed to destroy your post once you get your question answered and you shouldn't post text as an image. — BSMP, Nov 14 '16 at 04:45
Please do not vandalise your questions here, I have rolled it back to the last good version. — halfer, Nov 14 '16 at 10:03

cssyphus · Answer 1 · 2016-11-14T22:14:10.217

0

Add this code to your page:

<script>
$(function(){
    $('input#commonR').keypress(function(event) {
        var keycode = event.keyCode || event.which;
        if(keycode == '13') {
            $('#submit').click();    
        }
    });
}); //END document.ready
</script>

edited Nov 14 '16 at 22:14

answered Nov 14 '16 at 02:07

cssyphus

37,875
18
96
111

Where exactly? I did something similar it didn't work! – Gurnoor Kahlon Nov 14 '16 at 02:18
See update - insert that at the bottom of your document, just above the `
` closing tag. Note the document.ready wrapper `$(function() {} );` -- it ensures the document if fully loaded before binding the javascript to the input element. Without that, the js would fire before the element was rendered, causing the js to not work.
– cssyphus Nov 14 '16 at 22:14

score 0 · Accepted Answer · answered Nov 14 '16 at 02:21

0

Check out the fiddle I have worked on mate and let me know if this is what you need and lets update it to what you want. . . https://jsfiddle.net/e2nf73bu/1/

$(document).on('keypress',function(event){
   if ( event.which == 13 ) {
         $('#submit').click()
  }
})

answered Nov 14 '16 at 02:21

Rani Moreles Rubillos

1,114
7
13

it did not work neither on click or on enter pressed what did i do wrong? https://jsfiddle.net/zrpj0new/ – Gurnoor Kahlon Nov 14 '16 at 02:31
No I used what you added to your fiddle and added to my code because your function is missing some things giving wrong answers. I added the beginning and end of your fiddle: https://jsfiddle.net/zrpj0new/ – Gurnoor Kahlon Nov 14 '16 at 02:33
Copy this fiddle: https://jsfiddle.net/zrpj0new/ . AND ADD it to the fiddle – Gurnoor Kahlon Nov 14 '16 at 02:34
It works on the fiddle but not on my code which is odd – Gurnoor Kahlon Nov 14 '16 at 02:39
Dude it works on the fiddle but on c9 when i preview it wont work – Gurnoor Kahlon Nov 14 '16 at 02:42
you need to add the jquery js dude `` add this to your scripts – Rani Moreles Rubillos Nov 14 '16 at 02:43
No error, just when i click calculate or when i hit enter nothing comes – Gurnoor Kahlon Nov 14 '16 at 02:46
what i have asked is for you to show me the error dude where is the error? – Rani Moreles Rubillos Nov 14 '16 at 02:46
if its working on the fiddle and not on yours guess you dont know how to put it dude let me do the thing for you so its right guess you are just missing some codes. – Rani Moreles Rubillos Nov 14 '16 at 02:47
Like if it works on fiddle a straight copy past should work – Gurnoor Kahlon Nov 14 '16 at 02:52
you should have jquery on your page mate – Rani Moreles Rubillos Nov 14 '16 at 02:56
I do have jquery. But i thought it may be C9 but i downloaded it and it didnt work – Gurnoor Kahlon Nov 14 '16 at 02:57
can you show me where is that and I try to find your error or try hitting f12 so you could see the error mate – Rani Moreles Rubillos Nov 14 '16 at 02:58
I have Still not working – Gurnoor Kahlon Nov 14 '16 at 02:58
you should use the link I gave you dude not that one that would give an error use this instead `` – Rani Moreles Rubillos Nov 14 '16 at 02:59
Uncaught ReferenceError: $ is not defined(…) https://api.getsidekick.com/signals/v1/user/access-token Failed to load resource: the server responded with a status of 404 (Not Found) – Gurnoor Kahlon Nov 14 '16 at 02:59
use this one that is the error its missing the jquery you just said you have `` just copy paste this – Rani Moreles Rubillos Nov 14 '16 at 03:00
i added that still same error geoseq.js:9 Uncaught ReferenceError: $ is not defined(…)(anonymous function) @ geoseq.js:9 https://api.getsidekick.com/signals/v1/user/access-token – Gurnoor Kahlon Nov 14 '16 at 03:01
because your not calling the jquery libraries properly dude dont you know how to do that ? – Rani Moreles Rubillos Nov 14 '16 at 03:03
check the fiddle I called it properly – Gurnoor Kahlon Nov 14 '16 at 03:04
exactly. I have that exact code in my c9 it just wont work – Gurnoor Kahlon Nov 14 '16 at 03:05
hmm if the `$` is the issue then its looking for the jquery libraries dude – Rani Moreles Rubillos Nov 14 '16 at 03:11

I'd like to trigger a function on key and on click

2 Answers2