Flask+HTML+javascriptで簡単な書籍管理システムを作成しています。

保存するボタンを押した際にNoneと返ってきます。
保存するを押した際に

<input type="number" class="counter{{loop.index}}" data-max="500" data-min="0" name="{{loop.index}}">

のvalue値とname="{{loop.index}}"の両方をPOSTする方法を教えていただけると幸いです。

ソースコード

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>{{title}}</title>
</head>
<body>
    <h1>{{title}}</h1>
    <table class="table table-bordered table-striped">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">書籍名</th>
                <th scope="col">競合人数</th>
            </tr>
        </thead>
        <tbody>
        {% for item in data %}
            <tr>
                <th>{{loop.index}}</th>
                <th scope="row">{{item[0]}}</th>
                <td>
                    <form action="/" method="POST">
                        <div class="spinner_area">
                            <input type="number" class="counter{{loop.index}}" data-max="500" data-min="0" name="{{loop.index}}">
                            <input type="button" value="＋" class="btnspinner" data-cal="1" data-target=".counter{{loop.index}}">
                            <input type="button" value="－" class="btnspinner" data-cal="-1" data-target=".counter{{loop.index}}">
                        </div>
                    </form>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    <input class="btn btn-outline-success" type="submit" value="保存する">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4"></script>
    <script>
    $(function(){

        var arySpinnerCtrl = [];
        var spin_speed = 20; //変動スピード

        //長押し押下時
        $('.btnspinner').on('touchstart mousedown click', function(e){
            if(arySpinnerCtrl['interval']) return false;
            var target = $(this).data('target');
            arySpinnerCtrl['target'] = target;
            arySpinnerCtrl['timestamp'] = e.timeStamp;
            arySpinnerCtrl['cal'] = Number($(this).data('cal'));
            //クリックは単一の処理に留める
            if(e.type == 'click'){
                spinnerCal();
                arySpinnerCtrl = [];
                return false;
            }
            //長押し時の処理
            setTimeout(function(){
                //インターバル未実行中 + 長押しのイベントタイプスタンプ一致時に計算処理
                if(!arySpinnerCtrl['interval'] && arySpinnerCtrl['timestamp'] == e.timeStamp){
                    arySpinnerCtrl['interval'] = setInterval(spinnerCal, spin_speed);
                }
            }, 500);
        });

        //長押し解除時 画面スクロールも解除に含む
        $(document).on('touchend mouseup scroll', function(e){
            if(arySpinnerCtrl['interval']){
                clearInterval(arySpinnerCtrl['interval']);
                arySpinnerCtrl = [];
            }
        });

        //変動計算関数
        function spinnerCal(){
            var target = $(arySpinnerCtrl['target']);
            var num = Number(target.val());
            num = num + arySpinnerCtrl['cal'];
            if(num > Number(target.data('max'))){
                target.val(Number(target.data('max')));
            }else if(Number(target.data('min')) > num){
                target.val(Number(target.data('min')));
            }else{
                target.val(num);
            }
        }

    });
    </script>
</body>
</html>

app.py

from flask import Flask, render_template, request, session, url_for, redirect, jsonify, g
from flask.views import MethodView
import sqlite3, pickle

app = Flask(__name__)


# get Database Object.
def get_db():
    db = sqlite3.connect('all_data.db')
    return db


# close Database Object.
def close_db(e=None):
    db = g.pop('db', None)

    if db is not None:
        db.close()


def data_get():
    book_data = []
    db = get_db()
    cur = db.execute("select * from book_management_db")
    book_data = cur.fetchall()
    return book_data


@app.route('/')
def index():
    book_data = data_get()
    return render_template('index.html',
                           title='書籍管理システム',
                           data=book_data)


@app.route('/', methods=['POST'])
def post():
    label = request.form.get("label")
    print(label)
    #db = get_db()
    #db.execute(f"UPDATE book_management_db set people = {label.split(':')[1]} where book_name = {label.split(':')[0]}")
    #db.commit()
    book_data = data_get()
    return render_template("index.html",
                           title=f"書籍管理システム+{label}",
                           data=book_data)


if __name__ == '__main__':
    app.run(debug=True)

行動規範の内容に同意します

回答1件

ベストアンサー

index.html
・submitするボタンにbook_nameという名前を設定し、valueで書籍名を返すようにします。
・スピナーのインプットに、peopleという名前を設定し、valueで競合人数を返すようにします。

html
1    <table class="table table-bordered table-striped">
2        <thead>
3            <tr>
4                <th scope="col">#</th>
5                <th scope="col">書籍名</th>
6                <th scope="col">競合人数</th>
7            </tr>
8        </thead>
9        <tbody>
10        {% for item in data %}
11            <tr>
12                <th>{{loop.index}}</th>
13                <th scope="row">{{item[0]}}</th>
14                <td>
15                    <form action="/" method="POST">
16                        <div class="spinner_area">
17                            <input type="number" value="{{item[1]}}" class="counter{{loop.index}}" data-max="500" data-min="0" name="people">
18                            <button class="btn btn-outline-success" type="submit" value="{{item[0]}}" name="book_name">保存する</button>
19                        </div>
20                    </form>
21                    <input type="button" value="＋" class="btnspinner" data-cal="1" data-target=".counter{{loop.index}}">
22                    <input type="button" value="－" class="btnspinner" data-cal="-1" data-target=".counter{{loop.index}}">
23                </td>
24            </tr>
25        {% endfor %}
26        </tbody>
27    </table>
28    <!-- ここは削除　<input class="btn btn-outline-success" type="submit" value="保存する"> -->
29<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js?ver=1.12.4"></script>

　
・app.py
テンプレートからpostされてきたvalueを、各nameをキーとして取り出します。
元のコードだと更新に失敗するので、row_factoryを経由して更新しています。

python
1@app.route('/', methods=['POST'])
2def post():
3    people = request.form.get("people")
4    book_name = request.form.get("book_name")
5    db = get_db()
6    db.row_factory = sqlite3.Row
7    cursor = db.cursor()    
8    cursor.execute("UPDATE book_management_db SET people=? WHERE book_name=?", (people, book_name))
9    db.commit()
10    book_data = data_get()
11    return render_template("index.html",
12                           title=f"書籍管理システム+{book_name}",
13                           data=book_data)

投稿2021/12/06 14:10

編集2021/12/06 22:22

退会済みユーザー

総合スコア0

Seiwell

2021/12/06 21:34 編集

``` Internal Server Error The server encountered an internal error and was unable to complete your request. Either the server is overloaded or there is an error in the application. ``` 試しにローカル環境(windows)ではなくubuntuサーバーの環境下で実行したら、上記にようまエラーが出ました。自力で調べた感じSELinux？が悪さをしているという記事があったので、そのサイトの解決方法をやってみたところ、効果無し。何が原因でしょうか。サイト：https://tkstock.site/2019/10/15/python-sqlite3-operationalerror-write-django/

退会済みユーザー

2021/12/06 22:19 編集

修正後、ローカル環境では「input要素でsubmitしたときにNone値が返ってくる」という問題は解決したという理解でよろしいでしょうか。申し訳ないですが、私自身は主にフロントエンドの部分までしかサポートできませんので、そのような環境要因でのことはわかりません・・・本質問は解決済みにして、上記の問題点を示すタイトルで別質問を立てられた方が、詳しい方の目について解決につながりやすいのではないかと思います。

行動規範の内容に同意します