Как получить логин из формы HTML на JavaScript? - PullRequest
Новая
       5

Как получить логин из формы HTML на JavaScript?

0 голосов
/ 27 мая 2020

Я пытаюсь заставить пользователя ввести имя пользователя и получить доступ к этому значению из отдельного файла js. Страница перенаправляется с одного html на другой после того, как пользователь вводит имя в коде сервера (python). Это вызывает проблему? Потому что независимо от того, какой метод (имя, идентификатор, форма, поле ввода) я стараюсь, он не работает. Если я запустил сценарий из файла html, я смогу получить к нему доступ. Любая помощь приветствуется! 

const userStore = window.localStorage;

document.addEventListener('DOMContentLoaded', () => {

    // Connect to websocket
    var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port);

    if (!userStore.getItem('username')){
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelector('#username').onsubmit = function() {
                const name = document.querySelector('#username').value;
                alert(`Welcome back ${name}!`);
            };
        });
    } else {
        userStore.setItem('username', document.querySelector("#username"));
    }

{% extends "layout.html" %}

{% block title %}
Title
{% endblock %}

{% block main %}

<section id="cover" class="min-vh-100">
    <div id="cover-caption">
        <div class="container">
            <div class="row text-white">
                <div class="col-xl-5 col-lg-6 col-md-8 col-sm-10 mx-auto text-center form p-4">
                    <h1 class="display-4 py-2">Enter your Username.</h1>
                    <div class="px-2">
                        <form id="form" action="/flackchat" method="POST" class="justify-content-center">
                            <div class="form-group">
                                <label class="sr-only">Name</label>
                                <input id="username" type="text" class="form-control" name="username" placeholder="Username">
                            </div>
                            <button type="submit" class="btn btn-primary btn-lg">Continue</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
{% endblock %}
...