10

I've found a dozen different SO articles on how to do this, but none of them are working.

I'm trying to write some tests, and I want to test that when I press enter in an input, the form does indeed post back. However, I can't get it to simulate this.

No matter which method I choose, the keypress event is being triggered--event listeners see it--but the form isn't being submitted.

jsFiddle link:

Html

<!-- returns an error on submit, but that's fine... 
     we're only seeing if we can get a submit to happen -->
<form action="POST">
    <input id="myinput" type='text' value="foo" />
</form>

<div id="output"></div>

Javascript

$(function () {
    var $input = $("#myinput");
    $input.on("keypress", function (evt) {
        $("#output").append("Typed: " + evt.keyCode + ", but the form didn't submit.<br>");
    });

    $("form").on("submit", function () { alert("The form submitted!"); } );

    // try jQuery event
    var e = $.Event("keypress", {
        keyCode: 13
    });
    $input.trigger(e);

    // try vanilla javascript
    var input = $input[0];
    e = new Event("keypress");
    e.keyCode = 13;
    e.target = input;
    input.dispatchEvent(e);

    e = document.createEvent("HTMLEvents");
    e.initEvent("keypress", true, true);
    e.keyCode = 13;
    e.target = input;
    input.dispatchEvent(e);
});

Is it possible to simulate an actual keypress like this?

If you focus on the text box (in jsFiddle) and physically press enter, the page will post back and will return something like:

enter image description here

This is what I'm trying to achieve, only in code.

Here's why:

$("input").on("keypress", function (e) {
    if (e.keyCode == 13) {
        e.preventDefault();
    }
});

I ran into this in my code base, and I want to test that this sort of thing doesn't happen again.

sudo
  • 548
  • 1
  • 4
  • 16
dx_over_dt
  • 13,240
  • 17
  • 54
  • 102
  • i got three times "Typed: 13" when i just call your link on osx with chrome, ff and safari...so looks like its working? – marvwhere Mar 25 '15 at 23:46
  • 1
    Focus on the textbox and actually press ... *That's* the behavior I'm looking for – dx_over_dt Mar 25 '15 at 23:47
  • 1
    The keypress is working but i 'think' he's saying that the form submission which happens when you 'press' the enter button manually is not being sent.. i think this is a security thing. Stopping you from auto posting forms perhaps? I'll go and look. – Kevin C Jones Mar 25 '15 at 23:50
  • 1
    @KevinCJones If that is what he is trying to do, using `form.submit()` is the way. – Ismael Miguel Mar 25 '15 at 23:52
  • @IsmaelMiguel Yes, that works fine, as does finding the button and running `.click()`. But that is not what I'm trying to test. – dx_over_dt Mar 25 '15 at 23:53
  • It works fine for me. A popup saying the form was submitted then i was redirected to a page. – jkd Mar 26 '15 at 00:05
  • @jakekimds It does that without manually clicking and pressing enter? – dx_over_dt Mar 26 '15 at 00:06
  • @dfoverdx It does it when I click on the box then press enter. – jkd Mar 26 '15 at 00:07
  • @jakekimds Yes, I want to do it automatically with javascript. – dx_over_dt Mar 26 '15 at 00:07
  • 2
    I don't **think** you can do it, but if this is for user simulation e.g. tests, as you put it, i think you could just do any of your examples but simply capture that keycode 13 was clicked and call the submit function instead... If this was purely an academic excercise, i've even looked into this http://stackoverflow.com/a/18937620/4682576 but didn't find any joy.. – Kevin C Jones Mar 26 '15 at 00:07
  • @KevinCJones Yeah, that's kind of the conclusion I was drawing. It's unfortunate, because I actually ran into a case where some ridiculous code caught the keypress event and if the keycode was 13, it prevented bubbling. – dx_over_dt Mar 26 '15 at 00:09
  • @dfoverdx Not mine, but it might help: http://jsfiddle.net/DxER9/. The plugin part – jkd Mar 26 '15 at 00:09
  • @jakekimds Yeah, tried that one already :) – dx_over_dt Mar 26 '15 at 00:10

1 Answers1

-2

To simulate the keypress event on the input we have to use the KeyboardEvent constructor and pass the event to the input's dispatchEvent method.

const event = new KeyboardEvent("keypress", {
  view: window,
  keyCode: 13,
  bubbles: true,
  cancelable: true
});

document.querySelector("input").dispatchEvent(event);
<!-- returns an error on submit, but that's fine... 
     we're only seeing if we can get a submit to happen -->
<form action="POST">
    <input id="myinput" type='text' value="foo" />
</form>

<div id="output"></div>

You can see more information on mdn documentation on triggering and creating events

Rodrigo5244
  • 5,145
  • 2
  • 25
  • 36
  • 1
    I added your method to the OP jsfiddle. It, too, fails to submit the form. http://jsfiddle.net/pks337w7/10/ – dx_over_dt May 14 '18 at 18:27