質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

1735閲覧

【ajax】form内のbutton要素のvalueを取得,送信したい

kureid

総合スコア3

Django

DjangoはPythonで書かれた、オープンソースウェブアプリケーションのフレームワークです。複雑なデータベースを扱うウェブサイトを開発する際に必要な労力を減らす為にデザインされました。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/11/02 05:19

編集2020/11/04 06:04

前提・実現したいこと

ajaxにて,form内のボタンのvalueを送信しようとしています.

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

ボタンをクリックしても,そのボタンのvalueが取得できておらず,受け取り先ではnoneとなってしまいます.

# postメソッドからcolorという名前のデータを受け取る. color = request.POST.get('color') # 受け取ったデータを出力する print(color) →none

試したこと

form内のbtnクラスがクリックされた時に,そのvalueを取得するような動きを目指してコーディングしましたが,うまく動作させることができませんでした.

該当のソースコード

base.html

{% load static %} <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script type="text/javascript" src="http://code.jquery.com/jquery-3.3.1.min.js" ></script> <link rel="icon" href="{% static 'img/favicon.ico' %}" /> <title>{% block title %} {% endblock title %}</title> </head> <body> {% block contents %} {% endblock contents%} </body> </html>

game.html

html

1{% extends 'coloring/base.html' %} {% block title %} game {% endblock title %} 2{% block contents %} 3 4 <div id="game"> 5 <form name="color-form" action="{% url 'coloring:ajax_change_color' node_num %}" method="POST" > 6 {% csrf_token %} 7 <input type="submit" id="color" class="btn" value="red" > 8 <input type="submit" id="color" class="btn" value="blue" > 9 <input type="submit" id="color" class="btn" value="green" > 10 </form> 11 </div> 12 13 <script> 14 $("#color-form").submit( function(event) { 15 event.preventDefault(); 16 var form = $(this); 17 $(".btn").click( function(event) { 18 event.preventDefault(); 19 var btn = $(this); 20 $.ajax({ 21 url: form.prop("action"), 22 method: form.prop("method"), 23 data: { 24 'color': btn.val(), 25 }, 26 timeout: 5000 27 }) 28 .done( function(data) { 29 alert(data); 30 console.log(data); 31 }) 32 .fail( function(xhr, err) { 33 alert(err); 34 console.log(err); 35 }) 36 }); 37 }); 38 </script> 39 40{% endblock contents %} 41

views.py

python

1def ajax_change_color(request, node_num): 2 color = request.POST.get('color') 3 print(color) 4 5---省略---

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

macOS 10.15.7
python 3.8.2
django 3.1.2

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

受け取っているように見えます。

}).done( function(data) { console.log(data); });

で戻り値をみてみてください

投稿2020/11/02 05:27

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/11/04 02:47

そうなるとfail処理に流れているかもしれません }).done( function(data) { console.log(data); }).fail( function(xhr,err) { console.log(err); }); で確認してみてください
kureid

2020/11/04 06:00

ご回答ありがとうございます. failを追加してもコンソールへの出力は確認できませんでした... alertでなら出力されるかと思い,記述してみましたが,alertですら出力されませんでした. base.htmlの方にjqueryの読み込みのコードを記述し,読み込み漏れの対策もしたつもりですが,今回の問題はjavascriptをうまく動作させられていないということになるのでしょうか...?
guest

0

自己解決

alertを様々な位置に配置してデバッグをしてみたところ,
$("#color-form").submit( function(event)以下の部分が動作していないとわかりました.
そのため,game.htmlのスクリプトを

<script> $(".btn").click( function(event) { (省略) } </script>

としたところ,無事に動作し,データの取得ができました.

formのsubmitをスクリプトのトリガーにしたことが原因なのは分かったのですが,
どのように記述すれば元々の記述でも動作させられたのかが分かっていないので,
ご存知の方がいらっしゃればご教授いただけますと幸いです.

投稿2020/11/05 05:47

kureid

総合スコア3

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問