Форма отправки игнорируется Javascript, но принимается Flask - PullRequest
Новая
       1

Форма отправки игнорируется Javascript, но принимается Flask

0 голосов
/ 06 сентября 2018

У меня есть форма в моем приложении Flask. Мне нужно, чтобы отправка формы осуществлялась через Javascript (JS). Желаемое поведение заключается в том, что при отправке формы мы получаем немедленное перенаправление, затем JS обращается к Flask, Flask отправляет ответ, JS обновляет DOM.

Проблема: форма не отправляется в JS. При отправке текст в поле ввода очищается, и страница находится там. Нет ошибок войти в консоль

Кажется, что он игнорирует мой JS, хотя теги <script> в порядке, их размещение в layout.html правильное, и http://localhost:5000/static/index.js отображает файл. Я вставил оператор console.log, чтобы проверить, запускается ли соответствующая функция JS. Ничего не получить. Я вложил все в $(document).ready(). Еще ничего. Размещение атрибута method="post" в теге <form> и атрибута name в поле input формы позволило мне напрямую отправлять данные в Flask, но мне нужно перейти в JS. Все это играет на моей машине, поэтому нет CORS. Куда я иду не так?

Форма, которая должна идти в JS, а затем в Flask 

<div class="container">
    <div class="display-3">
        <strong>Create A Channel</strong>
    </div>
    <form id="channelForm" class="mt-4">
        <label for="channelName">Channel Name</label>
        <input id="channelName" class="form-control" type="text" placeholder="Enter Channel Name">
      <input type="submit" class="btn btn-primary" value="Create Channel">
    </form>
</div>

Сокращенный JS 

document.querySelector('#channelForm').onsubmit = () => {
    console.log("here");
    window.location.href = 'messages.html';

    // other stuff that links to Flask route

};

Колба по маршруту 

@app.route('/channels', methods=["GET", "POST"])
def channels():
    channelList = []
    if request.method == "POST":

        channel = request.form.get("channel")

        if not (channel is None) and not (channel in channelList):
            channelList.append(channel)
            print(channelList)
            return jsonify({"success": True, "channel":channelList})
        else:
            return jsonify({"success": False})

    else:
        return render_template("channels.html")

Головная секция из layout.html 

<head>
    {% block head %}
    <!-- Bootstrap 4 -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
    <!-- Additional CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <!-- JS -->
    <script src="{{ url_for('static', filename='index.js') }}"></script>
    {% endblock %}
</head>

EDIT Когда я нажимаю кнопку, чтобы отправить форму, я вижу "GET /static/index.js HTTP/1.1" 200 - в терминале. Все еще ничего в консоли, но я думал, что запрос GET был необычным, учитывая, что я нажимал кнопку, чтобы отправить форму. Ожидал ПОЧТУ.

Ответы [ 2 ]

0 голосов
/ 06 сентября 2018

Проблема в том, что ваша форма отправляется через протокол HTTP (традиционная отправка формы), а не через JS. Чтобы предотвратить это, вам нужно остановить отправку формы нажатием кнопки: 

var form = document.querySelector('#channelForm'),
    button = form.querySelector('input.btn-primary');

button.addEventListener('click', function(e) {
  e.preventDefault();
  console.log('process form data!');
})

Кроме того, поместите ваш JavaScript-код после ваших HTML-включений, чтобы элементы, на которые ориентирован ваш JS, находились на странице при загрузке JS.

0 голосов
/ 06 сентября 2018

Может случиться так, что ответ от вашего сервера быстрее, чем вы думаете. Вы не запрещаете использовать функцию onsubmit по умолчанию, поэтому вы можете не увидеть, как JS запускается в вашей консоли. Чтобы увидеть это, вы можете попробовать включить сохранение журналов между настройками навигации. Но то, что вам, вероятно, нужно, это запретить дефолт и затем напрямую отправить запрос на ваш сервер: 

document.querySelector('#channelForm').onsubmit = (event) => {
  event.preventDefault()
  ...
  // AJAX request to your server with your data
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...