-1

まず初めに、下記のサイトでも質問をさせていただいております。
情報が更新されましたら随意反映させていただきます。
https://teratail.com/questions/haewttn257y9il

実現したいこと

[http://127.0.0.1:5000/proposed]画面の
[食材名]欄で入力されたものを、「追加」ボタンが押されたら、pythonとhtmlの処理を通して、テーブル名「好き」リストに挿入したいです。

画像の説明をここに入力

前提

pythonで、ユーザーが入力した食材をデータベースで保存するシステムを作っています。
ローカルサーバーで試している段階です。
「好き」リストの写真欄は空欄のままで挿入します。

画面に表示されている「採用」ボタンは、表示されている食材を同じく「好き」リストに挿入する挙動なのですが、これはうまく機能しています。

発生している問題・エラーメッセージ

「追加」ボタンが押されたら、「好き」リストに挿入する機能を実装しても、エラーにはなりませんが、コマンドプロンプト上でリストを確認しても、追加されていませんでした。

画像の説明をここに入力

sqlite> SELECT * FROM 好き;
1|鶏肉|鶏肉.jpeg
2|豚肉|豚肉.jpeg
3|牛肉|牛肉.jpeg
4|羊肉|羊肉.jpeg
sqlite>

(コマンドプロンプト上) 「好き」リストは変わらないまま。

該当のソースコード

app.py

from flask import Flask, render_template, request, session, redirect, url_for
import sqlite3

app = Flask(name)
db_path = 'mydatabase.db'

(中略)

@app.route('/proposed', methods=['GET', 'POST'])
def proposed():

(中略)

elif 'add' in request.form: # 「追加」ボタンの処理
conn = sqlite3.connect(db_path)
cursor = conn.cursor()

# フォームから食材名を取得
food_name = request.form.get('foodName')

# 食材名が入力されている場合は「好きリスト」に追加
if food_name:
    try:
        # 写真は空のままで挿入する例としてNoneを指定
        cursor.execute("INSERT INTO 好き (名前, 写真) VALUES (?, ?)", (food_name, None))
        conn.commit()
        conn.close()
    except Exception as e:
        print("エラー:", e)

    # フォームを非表示にするためにJavaScriptを使用(ここでフォームを非表示にする処理を行う)
    return render_template('proposed.html', suggested_name=session['current_name'], suggested_photo=session['current_photo'], added=True)

# 追加処理が終わった後に再度提案画面を表示するためにリダイレクトを行う
return redirect(url_for('proposed'))
(後略)

proposed.html

提案画面

提案画面

食材名: {{ suggested_name }}

写真
<form method="post" action="/proposed">
  <button type="submit" name="adopt">採用</button>
  <button type="submit" name="different">違う食材</button>
  <button type="button" onclick="addFood()">追加</button>
</form>

<div id="addForm" style="display: none">
  <h3>食材名を入力してください:</h3>
  <form method="post" action="/proposed">
    <input type="text" name="foodName" required />
    <button type="submit" name="add">追加する</button>
  </form>
</div>

<script>
  function addFood() {
    var addForm = document.getElementById("addForm");
    addForm.style.display = "block";
  }
</script>
データベース(好きリスト)の情報

sqlite> PRAGMA table_info(好き);
0|id|INTEGER|0||1
1|名前|TEXT|1||0
2|写真|TEXT|0||0

試したこと

新たに「add.html」に画面推移しようとも試みましたが、うまくいきませんでした。
chat gptに同様の問題を投げかけました。修正されたコードでは改善されませんでした。

補足情報(FW/ツールのバージョンなど)

コードで使用されている主なFW(フレームワーク)とツールは以下の通りです:

・Flask
・SQLite3
・Jinja2

また、コードエディタはVisual Studio Codeです。

他の必要な情報に関しても、お答えいたします。
どうか、ご回答のほど宜しくお願い致します。

開発者ツールの結果

**「採用」**ボタンを押したとき

「採用」ボタンを押したとき

**「追加する」**ボタンを押したとき

「追加する」ボタンを押したとき

1

1 件の回答 1

1

中略などで省略されている部分があってここが悪いというのはピンポイントには分からないのですが、

  • まずはフロントエンド側(ブラウザ)から正しく送信できているのかどうか?
  • 送信できているのであれば、サーバプログラム(python)側で受信できているのか?

などのチェックから問題の切り分けをしてみてはどうでしょうか。

「フロントエンド側から正しく送信できているのか」
はブラウザの開発者ツールなどを使ってブラウザからどのようなデータを送っているかを確認することで分かります。この場合「追加」ボタンを押したときに想定どおりにデータが送信されているか確認するとフロントエンド側の問題かどうかがわかると思います。

フロントエンド側に問題がなく、正しく送信できているのであれば、サーバー側が受信できているのか確認してみて、想定どおりに動作しているか確認してくみてください。

想像で書きますが、

food_name = request.form.get('foodName')

この行で正しく受け取れていない場合、food_nameがNoneになってその後のif文の中に入らず処理を抜けているために「エラーが出ないけど、追加されない」ということ起きてるのではないでしょうか?

Visual Studio Codeでデバッグ実行して、food_nameの値が取得できているか確認するとか、
上記のデバッグ実行のやり方が分からなければ、以下のようにprintで出力してみて

food_name = request.form.get('foodName')
print("food_name=[" + food_name + "]")

フロントエンド側で入力したfood_nameがちゃんと受信できているか?を確認してみるとなにかわかるかもしれません。

5
  • 丁寧にお答えいただき、ありがとうございます。 ご指摘していただいた通り、「フロントエンド側から正しく送信できているのか」を確認したところ、「採用」ボタンで確認できた挙動(サーバーへの正常な送信)が、「追加」では確認できませんでした。どうやらフロントエンド側に問題があるようです。 そこで、「proposed.html」のコードを全て書き直しましたので、問題の原因がありましたら再度ご指摘いただけると幸いです。宜しくお願い致します。 8月1日 8:42
  • HTML側で formが複数あって、追加ボタンが2つあるのがよく分からないです。
    – civi
    8月1日 23:38
  • 説明致しますと、 <form> タグが複数あるのは、ページ内に異なる目的のフォームがあるためです。 最初の<form>タグ: ・アクション: action="/proposed" ・提案画面で「採用」または「違う食材」ボタンが押されたときに実行するアクションを指定しています。 二つ目の<form>タグ: ・アクション: action="/proposed" ・JavaScriptで表示非表示を切り替えるための追加のフォームです。ユーザーが「追加」ボタンを押すと、食材名を入力するフォームと「追加する」ボタンが表示されます。 action属性にはフォームデータを送信するURLを指定しますが、これらの2つのフォームは同じ/proposedエンドポイントに送信されます。一般的なデータの送信や操作に対しては、異なるアクションやエンドポイントを設定することが一般的ですが、このコードでは2つのフォームが同じエンドポイントに対して異なる目的でデータを送信していることになります。 他にも何か疑問点があれば何なりとお申し付けください。 8月2日 0:38
  • "「追加」では確認できませんでした。どうやらフロントエンド側に問題があるようです。 "このように考えたのはどのような動作を期待して、どうのような結果になったためにそう思ったのでしょうか?
    – civi
    8月2日 4:39
  • ありがとうございます。 まず初めに、開発者ツールを用いて確認を行いました。 「採用」の時には確認できたネットワークタブのリクエストが、 「追加する」の時でも表示されることを期待したのですが、表示されませんでした。 参考画像を"質問"の最後の部分(開発者ツールの結果)に追加させていただきます。宜しくお願い致します。 8月2日 6:29

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。