Forum Stats

  • 3,872,125 Users
  • 2,266,392 Discussions
  • 7,911,052 Comments

Discussions

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

ValentinShinkarenko
ValentinShinkarenko Member Posts: 11 Green Ribbon

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.

Best Answers

  • anirbmuk
    anirbmuk Member Posts: 1 Red Ribbon
    edited Jan 28, 2021 11:35AM Answer ✓

    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.

    <form method="GET" id="myLoginForm">

    .. 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

    and the below blog post:


  • ValentinShinkarenko
    ValentinShinkarenko Member Posts: 11 Green Ribbon
    Answer ✓

    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.

Answers

  • ValentinShinkarenko
    ValentinShinkarenko Member Posts: 11 Green Ribbon

    HTML code

    <!DOCTYPE html>

    <div class="oj-hybrid-padding" data-bind="visible: [[!isLoggedIn]]">

    <div>

    <div class="oj-flex oj-sm-flex-direction-column oj-md-flex-direction-column">

    <div class="oj-flex-item">

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

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

    data-bind="ojComponent: {

    component: 'ojInputText',

    value: username,

    invalidComponentTracker: tracker}"/>

    </div>

    <div class="oj-flex-item">

    <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>

    <div class="oj-flex-item">

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

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

    component: 'ojButton',

    label: 'Login',

    chroming: 'full'}">

    </div>

    </div>

    </div>

    </div>

  • ValentinShinkarenko
    ValentinShinkarenko Member Posts: 11 Green Ribbon

    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
    anirbmuk Member Posts: 1 Red Ribbon
    edited Jan 28, 2021 11:35AM Answer ✓

    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.

    <form method="GET" id="myLoginForm">

    .. 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

    and the below blog post:


  • ValentinShinkarenko
    ValentinShinkarenko Member Posts: 11 Green Ribbon
    Answer ✓

    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.