Simulate an input key in a form field and save other handlers

Question

We are trying to make a general approach for the part of the software that we develop that are related to the form fields.

So far, so good, but we are working with an edge that prevents the submission of the form / field to which another handler is bound.

Here's a (concise) use case:

HTML:

<form id="form1"> <input type=field id="field1"/> </form> <a href="#" id="link">click to submit</a> 

The normal behavior is that when the user enters “foo” into the field and enters it, the form is processed and sent to the correct “endpoint”, which is not necessarily defined in the form’s opening tag. There may be some function (from somewhere else) that handles this event-event.

Unfortunately, we cannot predict what this function is, we would like to keep it universal.

In the above HTML, clicking on the link should trigger an event-event in the form field, which mimics the behavior of the browser / user and, therefore, an unknown handler.

This is our Javscript (we use jquery):

 $('#field1').keypress(function (event) { if (event.which == 13) { console.log("enter pressed"); //return false; only if needed } }); $( "#link" ).click(function() { var e = jQuery.Event('keypress'); e.which = 13; // #13 = Enter key $("#field1").focus(); $("#field1").trigger(e); }) 

When you enter "foo" in the field and click, enter the form to be submitted. But when we click on the link, we do focus (), and then trigger the key event, but the form is not submitted .

We cannot use submit () due to unknown handlers.

Try the code here: http://codepen.io/conversify/pen/yOjQob

Answer 1

What happens when you press the enter key, if the input is inside the form, the form is submitted. This is the default behavior. When you simulate a keystroke, you must do the same if the default behavior is not prevented.

 $('#field1').keypress(function (event) { if (event.which == 13) { console.log("enter pressed"); // event.preventDefault(); if needed } }); $( "#link" ).click(function() { var e = jQuery.Event('keypress'); e.which = 13; // #13 = Enter key $("#field1").focus(); $("#field1").trigger(e); var form=$("#field1").closest("form"); if(form&&!e.isDefaultPrevented()) form.submit(); }) 

Now you can pass the event object to the handlers, and they can prevent it from being sent if they want to, or you can prevent it in your keystroke handler.

Answer 2

You must separate the form handler from the input and click handlers.

 var formHandler = function(e) { // ... code to submit form ... console.log("form handled"); }; 

Then install the keypress handler as follows:

 $('#field1').keypress(function (event) { if (event.which == 13) { formHandler(); } }); 

And your click handler looks like this:

 $( "#link" ).click(function() { formHandler(); }); 

Answer 3

You can untie unknown handlers with unbind('submit') and then use submit() as shown below.

 $("#link").click(function () { $("#form1").unbind('submit').submit(); });