Is there a way to make a table form submit on enter?

[amfsyn]

Is it possible to modify this example, so that when an input is focused, the user can press enter to submit the form?

I understand that the problem is that the input is not inside the form. There has to be a way to do this though.

[ckosloski]

I use the ng-keyup to detect enter and then submit the form

Add this to the edtiable- span data-e-ng-keyup="$event.keyCode == 13 && submitForm('submitForm{{::$index}}')"

My button definition

<button type="submit" name="submitForm" id="submitForm{{::$index}}" data-ng-disabled="bookform.$waiting" class="btn btn-primary phonePaddingSmall" aria-label="Save">
                                    <i class="glyphicon glyphicon-floppy-disk" aria-hidden="true"></i>
                                </button>

My functions:

                    $scope.submitForm = function (id) {
                        commonFunctions.clickElement(id);
                    };

                clickElement: function(id) {
                    $timeout(function() {
                        angular.element("#" + id).trigger('click');
                    }, 50);
                },

[amfsyn]

Do you think it's technically possible to replace the entire row with an enclosed \<form> on edit? I know that's a big ask, but it would preserve native form behavior.

[amfsyn]

I ran with what you gave me and created a simple directive that makes the solution easy. If you put this on the table's \<tr> you can really easily add submit on enter.

app.directive('submitOnEnter', function () {
    return {
        link: function (scope, element, attrs) {
            $(element).keypress((event) => {
                if (event.keyCode === 13) { // <enter>
                     $(element).find('form').find(':submit').click();
                }
            })
        }
    }
});

Do you think this would be fit for a PR?

[ckosloski]

Sure, go for it!!

[mochsner]

@amfsyn any reason this wasn't actually merged? I think this would still be really useful.