does not submit the form when the "enter button" is pressed on password field

ValentinShinkarenko · Jan 17, 2021 3:28PM

I have a login page with two fields login and password and with a login button. Authorization occurs only when I click on the login button. I need authorization to occur when the enter button is pressed from the password input field. I really ask for help in solving a problem over which I have been fighting for more than a week.

anirbmuk · Jan 28, 2021 7:02AM

There is no direct method to use enter key to submit the form, but you can make use of jQuery to do so.

In your HTML, you wrap your inputs for username, password and your button inside a <form> tag.

.. your input components and button ...

</form>

In your JS file, you get a hold of your form via its ID.

Include 'jquery' as $ in your requirejs define section.

$(document).ready(function() {

$('#myLoginForm').on('submit', function(event) {

event.preventDefault(); // This is very important. This tells the code to ignore the default form action and instead follow your code

... your login code here ...

});

As an example, you can take a look at the below GitHub repository

https://github.com/anirbmuk/hr-store

and the below blog post:

https://jetsolutions.anirbanblogs.com/2020/03/jet-with-mongodb-nodejs-and-express.html

ValentinShinkarenko · Feb 13, 2021 1:39PM

The problem was in the wrong location of the <form> tag after wrapping the login and password input fields in it, as well as the "submit" button, everything worked. I want to focus on the fact that this solution was applied during the initial attempts to solve the problem, but the extra blocks of <

div> were not removed, after which the train of thought went in a completely different direction.

ValentinShinkarenko · Jan 17, 2021 3:30PM

HTML code

<!DOCTYPE html>

<div>

<oj-label for="username">Username</oj-label>

<input id="username" required="true" type="text"

data-bind="ojComponent: {

component: 'ojInputText',

value: username,

invalidComponentTracker: tracker}"/>

</div>

<oj-label for="password">Password</oj-label>

<form>

<input id="password" required="true" type="password" autocomplete="on"

data-bind=" ojComponent: {

component: 'ojInputPassword',

value: password,

invalidComponentTracker: tracker}"/>

</form>

</div>

<input id="inputButton" type="button"

data-bind="click: login, ojComponent: {

component: 'ojButton',

label: 'Login',

chroming: 'full'}">

</div>

ValentinShinkarenko · Jan 17, 2021 3:33PM

JS code

define(['ojs/ojcore', 'knockout', 'ojs/ojarraydataprovider','jquery', 'ojs/ojknockout', 'ojs/ojmodel', 'ojs/ojbutton', 'ojs/ojlabel', 'ojs/ojinputtext', 'ojs/ojknockout-validation'],

function(oj, ko, ArrayDataProvider) {

function LoginContentViewModel() {

var self = this;

self.username = ko.observable("");

self.password = ko.observable("");

self.tracker = ko.observable();

self.loginResponse = ko.observable();

self.rootModel = ko.dataFor(document.getElementById('mainContent'));

self.isLoggedIn = self.rootModel.isLoggedIn;

self.login = async function () {

try{

await $.post( self.rootModel.usersLoginRestURL(),

{

USERNAME: self.username(),

PASSWORD: self.password()

}

).done(function (results){

self.loginResponse(results)

});

} catch (error) {

alert("Could not reach AFD Login Servers.\nPlease contact an administrator.");

return;

}

if(self.loginResponse().message === 'Failure' || self.loginResponse().message === 'Cannot find user'){

alert("Incorrect username or password.");

return;

}

var trackerObj = ko.utils.unwrapObservable(self.tracker);

if (!this._showComponentValidationErrors(trackerObj)) {

return;

};

self.router = oj.Router.rootInstance;

self.router.configure({

'demandSensing': {label: 'Demand Sensing', isDefault: true},

'forecastAccuracy': {label: 'Forecast Accuracy'},

'autonomousForecast': {label: 'Autonomous Forecast'},

'preferences': {label: 'Preferences'},

'about': {label: 'About'}

});

self.updateNav();

self.rootModel.userLogin(self.username());

self.rootModel.isLoggedIn('true');

self.rootModel.userRole(self.loginResponse().role);

self.rootModel.restSessionId("");

self.username(null);

self.password(null);

oj.Router.sync();

};

// Establishes which portions of the app are accessible

self.updateNav = (event) => {

console.log("USERS ROLE: \n" + self.loginResponse().role);

var params = {

'bubbles': true,

'detail': {

'navArray':

// Demand Sensing only

self.loginResponse().role === 'dsRead' ?

[{name: 'Demand Sensing', id: 'demandSensing',

iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-chart-icon-24'},

{name: 'Preferences', id: 'preferences',

iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-info-icon-24'},

{name: 'About', id: 'about',

iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-info-icon-24'}] :

// Default (All portions):

[{name: 'Demand Sensing', id: 'demandSensing',

iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-chart-icon-24'},

{name: 'Forecast Accuracy', id: 'forecastAccuracy',

iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-fire-icon-24'},

{name: 'Autonomous Forecast', id: 'autonomousForecast',

iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-people-icon-24'},

{name: 'Preferences', id: 'preferences',

iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-info-icon-24'},

{name: 'About', id: 'about',

iconClass: 'oj-navigationlist-item-icon demo-icon-font-24 demo-info-icon-24'}]

}

};

document.getElementById('globalBody').dispatchEvent(new CustomEvent('newnavdata', params));

};

self._showComponentValidationErrors = function (trackerObj) {

trackerObj.showMessages();

if (trackerObj.focusOnFirstInvalid())

return false;

return true;

};

}

return new LoginContentViewModel();

});

anirbmuk · Jan 28, 2021 7:02AM

There is no direct method to use enter key to submit the form, but you can make use of jQuery to do so.

In your HTML, you wrap your inputs for username, password and your button inside a <form> tag.

.. your input components and button ...

</form>

In your JS file, you get a hold of your form via its ID.

Include 'jquery' as $ in your requirejs define section.

$(document).ready(function() {

$('#myLoginForm').on('submit', function(event) {

event.preventDefault(); // This is very important. This tells the code to ignore the default form action and instead follow your code

... your login code here ...

});

As an example, you can take a look at the below GitHub repository

https://github.com/anirbmuk/hr-store

and the below blog post:

https://jetsolutions.anirbanblogs.com/2020/03/jet-with-mongodb-nodejs-and-express.html

ValentinShinkarenko · Feb 13, 2021 1:39PM

The problem was in the wrong location of the <form> tag after wrapping the login and password input fields in it, as well as the "submit" button, everything worked. I want to focus on the fact that this solution was applied during the initial attempts to solve the problem, but the extra blocks of <

div> were not removed, after which the train of thought went in a completely different direction.

Forum Stats

Quick Links

Categories

does not submit the form when the "enter button" is pressed on password field

Best Answers

Answers

Data

Databases

Development

Development Tools

Open Source

Programs

Forum Stats

Categories

does not submit the form when the "enter button" is pressed on password field

Best Answers

Answers