jqueryによって動的に生成されたinputタグの中身を取得する方法

Question

実現したいこと

DjangoでAjaxを利用して動的にデータの編集をしたい。

前提

現在Djangoを利用してSNSのようなアプリケーションを作っています。
搭載する機能は投稿のCRUDといいね（Ajax）機能であり、編集機能以外は完成しました。
編集機能の実装は、「元はpタグで出力している投稿内容」を「inputタグに変更して」、「ajax通信を用いてviewに飛ばし」、「viewでDBの書き換えを行う」という処理を想定しています。

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

viewへ値を渡す際に、空白で返ってくる。

該当のソースコード

<form
    action=""
    method="POST"
    name="f"
    class="d-flex flex-column align-items-center"
  >
    <input type="hidden" name="send_id" id="send_id" />
    <input type="hidden" name="send_text" id="send_text" />
{% csrf_token %} {%for post in posts%}
    <div class="card mb-3" style="width: 30rem" id="{{post.id}}">
      <div class="card-body">
        <p class="card-text py-3 mb-0" id="title{{post.id}}">{{post.title}}</p>
        {%if edit%}
        <button class="btn btn-outline-primary edit">編集する</button>
        {%endif%}
      </div>
    </div>
    {%endfor%}
  </form>
<script>
      // HTMLが読み込まれた際に発火するイベント
      $(document).ready(function () {
        // 編集ボタンを押した時にbtnのテキストと入力欄が変更する処理
        $(".edit").click(function (e) {
          // btn本来のform actionに飛ばす機能を無効にする
          e.preventDefault();
          // 該当投稿のidを取得する
          let id = $(this).parents(".card").attr("id");
          // 投稿内容をinputタグに置き換える
          $(`#title${id}`).replaceWith(function () {
            $(this).replaceWith(
              `<input type='text' name='edit_text' class="form-control my-2" id="title${id}" value="${$(
                this
              ).text()}" >`
            );
          });
          // btnのテキストと機能の書き換え
          // 編集ボタンと削除ボタンを取得する
          let edit_btn = $(this);
          let delete_btn = $(this).next();
          // 「編集する」ボタンのテキストを変更
          edit_btn.html("完了する");
          delete_btn.html("変更を破棄する");
          // 完了ボタンを押した際に、編集する
          $(edit_btn).click(function () {
            // idをsend_idに格納する
            let id = $(this).parents('.card').attr('id')
            let text = $(`#title${id}`).val()
            // inputのvalをsend_textに格納する
            $('form[name="f"]').attr('action','{% url 'edit' %}');
            $('form[name="f"]').submit()
            $.ajax({
              url: '{% url "edit" %}',
              type: "POST",
              data: {
                // viewにrequestで押されたbuttonのid属性を渡す
                'id': id,
                'new_text':text,
              },
              dataType: "json",
              // 成功した時
            }).done(function (response) {
              // inputタグをpタグに戻す
              $(`#title${id}`).replaceWith(function () {
                $(this).replaceWith(
                  `<p class="card-text py-3 mb-0" id="title${id}">${response.text}</p>`
                );
              });
              // 完了ボタンを編集ボタンに戻す
              edit_btn.html("編集する");
              // 変更を破棄するボタンを削除ボタンに直す
              delete_btn.html("削除する");
            });
          });
        });
      });
    </script>

# 投稿編集
def edit(request):
    # idを取得
    post_id = request.POST.get('id')
    print(post_id)
    # 編集後のテキストを取得
    edit_text = request.POST.getlist('new_text')
    print(edit_text)
    # 該当投稿取得
    post = モデル名.objects.get(pk=post_id)
    # 書き換え
    post.title = edit_text
    # 変更をセーブする
    post.save()
    return JsonResponse({'text':edit_text})

試したこと

inputの内容をinput type=hiddenのvalueに渡し、viewで受け取る→失敗（空で帰ってくる）
pタグでなくinput disabledにし、編集時にdisabel = Falseとする→成功

この結果から、javascriptで書き換えたinputタグは、requestで送られず、val()も返ってこないと解釈できますが、私が実装したいのが「pタグをinputタグに書き換えてviewに値を渡す」ことであるので、できればこの方法は使いたくありません（CSSを当てる必要があるため）。

また、同じような方法で、input type=hiddenを投稿内容のpタグの下に忍ばせておくことも考えており、良い方法がなければこのやり方で実装すると思うのですが、HTML内にタグを増やしたくないため、書き換えでのやり方があれば教えていただきたいです。

私がご質問させていただきたいのは、「javascriptで動的に生成したinputタグは、入力された値をjsもしくはviewによって値を取得できるのかどうか」です。よろしくお願いしたします。

Comments

[int32_t]

変数 text には期待どおりの値は入ってたんでしょうか?

[ryorgyo]

お世話になります。コメントありがとうございます。

javascript内の処理の変数textについて、値は入っておりませんでした。

漏れていましたが、上記と質問内にもある解釈により、javascriptで動的に生成したinputの入力値はとれないのでは？と思いご質問させていただいた次第です。

[int32_t]

> javascriptで動的に生成したinputの入力値はとれないのでは？

そんなことはないです。絶対に取れます。
replaceWith() の使い方がおかしいとか submit() と AJAX 両方あるのはおかしいとかイロイロ気になるところはありますが、とにかくどこまで期待どおり動いているか1つずつ確認する必要がありますね。

[int32_t]

まずは、「let text = $(`#title${id}`).val()」を実行したときに $(`#title${id}`) が本当に <input> を指しているかどうかの確認ですかね。

[ryorgyo]

ご指摘ありがとうございます。replaceWithやその他に関しては後ほどリファクタリング行います！
また、ajaxとsubmitのダブりも気づきませんでした。こちらはajaxでviewへ遷移するよう修正いたしました。

本題に入りますが、$('#title${id}')は問題なく、変化後のinputタグを取得いたしました。
そして、ブラウザ上のコンソール画面で、$('#title${id}')←こちらのidは手動で入力しました。を取得したところ問題なく、入力した値（編集後の値）を取得することができました。

なので、 #{id}の型が違く、取得できないのでは？と考え、完了ボタンを押した際に発火するイベント内にて、変数${id}での指定ではなく、直打ち（id値をあらかじめ押さえておき、そのtextを書き換える）で指定したところ、うまく行きませんでした。

次の施策で、値を常時取得する関数を「編集ボタンを押した際に発火するイベント」の外で記述してみようと思います。

Answer 1

最初に $(".edit") ボタンを押すともちろん <p> を <input> に置き換える関数が走ります。
次に「完了する」と見た目が変わった $(".edit") ボタンを押すと、こんども同じ関数が走り <input> を別の <input> に置き換え、その後 $(｀#title${id}｀).val() を処理する関数が走ります。<input> を <input> で置き換えるときには $(this).text() は空なので値が失われます。

1つのボタンで複数の異なる役割をこなすのはトラブルの元です。別々のボタン要素にして、場面によって表示非表示を切り替えましょう。

Comments

[ryorgyo]

ありがとうございます。
私も色々な手法で試し、無事値を取得することができましたが、ボタンのイベントが消えずに悩んでいました。

このコメントを拝見して、$(.'edit')のイベントが削除されておらず、2度3度と走っていることに気づきました。

＞＞1つのボタンで複数の異なる役割をこなすのはトラブルの元です。
こちらが身に沁みてわかりました。たくさんアドバイスをくださり、ありがとうございます。ボタンは複数用いて実装することにします。

Answer 2

回答ではありません

とりあえず、djagoで返したHTMLからjQueryのajaxを使ってREST APIっぽくアクセスし、その結果をコンソールに出力する簡易コード環境を作成するスクリプトを書いてみました。本来Django REST frameworkとか使うべきなんだろうけど、原始的なのが良さそうだったので、参考までにということです。

環境構築スクリプト

import os
import venv
import subprocess
ENV = 'env'
if os.name == 'posix':
    BIN = 'bin'
else:
    BIN = 'Scripts'
builder = venv.EnvBuilder(with_pip=True)
builder.create(ENV)
cwd = os.getcwd()
python = os.path.join(cwd, ENV, BIN, 'python')
os.environ['VIRTUAL_ENV'] = os.path.join(cwd, ENV)
os.environ['PATH'] = os.path.join(cwd, ENV, BIN) + os.pathsep + os.environ['PATH']
p = subprocess.run([python, '-m', 'pip', 'install', '--upgrade', 'pip', 'setuptools'])
p = subprocess.run([python, '-m', 'pip', 'install', 'django==4.1.7', 'whatthepatch==1.0.4'])
with open('generated.py', 'wt', encoding='utf8') as f:
    f.write("""\
import subprocess
import os
p = subprocess.run('django-admin startproject mysite', shell=True)
os.chdir('mysite')
p = subprocess.run('python manage.py startapp myapp', shell=True)
p = subprocess.run('python ../patch.py ../patch.diff', shell=True)
""")
with open('patch.diff', 'wt', encoding='utf8') as f:
    f.write("""\
diff --git a/myapp/templates/myapp/index.html b/myapp/templates/myapp/index.html
new file mode 100644
index 0000000..e0a8b77
--- /dev/null
+++ b/myapp/templates/myapp/index.html
@@ -0,0 +1,22 @@
+{% csrf_token %}
+<button id="start_ajax">ここ</button>
+<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
+<script>
+$('#start_ajax').on('click', (ev)=>{
+    $.ajax({
+        url: '{% url "api" %}',
+        type: "POST",
+        headers: {
+            'X-CSRFToken': $('input[name="csrfmiddlewaretoken"]').attr('value')
+        },
+        data: {
+            'id': 'hoge',
+            'new_text': 'fuga',
+        },
+        dataType: "json",
+    }).done((data) => {
+       console.log(data);
+    });
+});
+</script>
+
diff --git a/myapp/urls.py b/myapp/urls.py
new file mode 100644
index 0000000..70c2b6b
--- /dev/null
+++ b/myapp/urls.py
@@ -0,0 +1,7 @@
+from django.urls import path
+from . import views
+
+urlpatterns = [
+    path('', views.index, name='index'),
+    path('api/', views.api, name='api'),
+]
diff --git a/myapp/views.py b/myapp/views.py
index 91ea44a..4ad8b95 100644
--- a/myapp/views.py
+++ b/myapp/views.py
@@ -1,3 +1,8 @@
 from django.shortcuts import render
+from django.http import JsonResponse
 
-# Create your views here.
+def index(request):
+    return render(request, 'myapp/index.html', {})
+
+def api(request):
+    return JsonResponse({'newid': request.POST['id'] + '1', 'text': request.POST['new_text'] + '2'})
diff --git a/mysite/settings.py b/mysite/settings.py
index 5ebda72..4c6fdc7 100644
--- a/mysite/settings.py
+++ b/mysite/settings.py
@@ -31,6 +31,7 @@ ALLOWED_HOSTS = []
 # Application definition
 
 INSTALLED_APPS = [
+    'myapp.apps.MyappConfig',
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
@@ -103,9 +104,9 @@ AUTH_PASSWORD_VALIDATORS = [
 # Internationalization
 # https://docs.djangoproject.com/en/4.1/topics/i18n/
 
-LANGUAGE_CODE = 'en-us'
+LANGUAGE_CODE = 'ja'
 
-TIME_ZONE = 'UTC'
+TIME_ZONE = 'Asia/Tokyo'
 
 USE_I18N = True
 
diff --git a/mysite/urls.py b/mysite/urls.py
index 8bc0cd4..d2fd81c 100644
--- a/mysite/urls.py
+++ b/mysite/urls.py
@@ -14,8 +14,9 @@ Including another URLconf
     2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
 \"\"\"
 from django.contrib import admin
-from django.urls import path
+from django.urls import include, path
 
 urlpatterns = [
+    path('myapp/', include('myapp.urls')),
     path('admin/', admin.site.urls),
 ]
""")
with open('patch.py', 'wt', encoding='utf8') as f:
    f.write("""\
import whatthepatch, os, sys
with open(sys.argv[1], 'rt', encoding='utf8') as fp:
    for diff in whatthepatch.parse_patch(fp):
        header = diff.header
        if header.new_path == '/dev/null':
            os.remove(header.old_path)
        else:
            if header.old_path == '/dev/null':
                old = []
            else:
                with open(header.old_path, 'rt', encoding='utf8') as fo:
                    old = [line.rstrip(os.linesep) for line in fo]
            new = whatthepatch.apply_diff(diff, old)
            try:
               os.makedirs(os.path.dirname(header.new_path))
            except FileExistsError:
               pass
            with open(header.new_path, 'wt', encoding='utf8') as fn:
                for line in new:
                    print(line, file=fn)
""")
p = subprocess.run([python, 'generated.py'])

環境構築スクリプトの使い方

1. 上記ファイルをcreate_env.pyという名前で作成
2. tmpディレクトリを作成
3. tmpディレクトリに移動
4. create_env.pyを実行

Windows(コマンドプロンプト)の場合

C:\...\>cd create_env.pyを作ったフォルダ
C:\...\>mkdir tmp
C:\...\>cd tmp
C:\...\>python ..\create_env.py

Unixライク系(bash)の場合

Ubuntuの場合は、venvを使えるようにpython3-venvパッケージのインストールが必要です(入れてない場合)。

$ cd create_env.pyを作ったフォルダ
$ mkdir tmp
$ cd tmp
$ python ../create_env.py

以上で環境構築完了です。

## 構築環境への入り方
上記スクリプトは他のpython環境に影響を与えないため、`venv`を使った仮想環境(といってもVMとかじゃない)を作っています。環境を使うためには、まずvenvでその環境に入る必要があります。

### Windows(コマンドプロンプト)の場合
```cmd
C:\...\>cd さっき作ったtmpディレクトリ
C:\...\>.\env\Scripts\activate
(env)C:\...\>
...(作業が終わったら)...
(env)C:\...\>deactivate
C:\...\>

Unixライク系(bash)の場合

$ cd さっき作ったtmpディレクトリ
$ ./env/bin/activate
(env)$ 
...(作業が終わったら)...
(env)$ deactivate
$ 

djangoの起動

これは説明するまでもないと思いますが、mysiteプロジェクトのディレクトリに移動後、python manage.py runserverでローカルの8000ポートに起動します。

ブラウザから接続

http://localhost:8000/myappを開き、Ctrl+Shift+Iとかで開発者ツールの画面を開きます。ネットワーク画面でhttpプロトコルの内容を確認しながら、「ここ」ボタンを押すと、ajaxのリクエストが出てレスポンスが返り、コンソールにjsonが表示されているのがわかります。

djangoのviewとtemplateの解説

tmp/mysite/myapp/views.py

from django.shortcuts import render
from django.http import JsonResponse

def index(request):
    return render(request, 'myapp/index.html', {})

def api(request):
    return JsonResponse({'newid': request.POST['id'] + '1', 'text': request.POST['new_text'] + '2'})

index()がhttp://localhost:8000/myapp/の受け口で、テンプレートを返しています。
api()がhttp://localhost:8000/myapp/api/の受け口`で、ajaxでもらったデータに1と2を付けてjsonで返しています。この部分はDjango REST frameworkでいいかもというところです。

tmp/mysite/myapp/template/myapp/index.html

{% csrf_token %}
<button id="start_ajax">ここ</button>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$('#start_ajax').on('click', (ev)=>{
    $.ajax({
        url: '{% url "api" %}',
        type: "POST",
        headers: {
            'X-CSRFToken': $('input[name="csrfmiddlewaretoken"]').attr('value')
        },
        data: {
            'id': 'hoge',
            'new_text': 'fuga',
        },
        dataType: "json",
    }).done((data) => {
       console.log(data);
    });
});
</script>

ボタンを押されたらajaxを実行してるだけです。jsonが返ってきたらコンソールに吐いています。一点面倒なのはdjangoが生成してくれるCSRFトークンのajaxでの送信です。
https://docs.djangoproject.com/en/4.1/howto/csrf/
を参考に送ればOKです。

Comments

[ryorgyo]

原始的は笑いました笑。
僕としては初めて実装したので、めちゃくちゃ便利なものあるじゃん！って感じだったのですが、他の手法で且つ使い勝手の良いもの？があるのですね。それが知れただけ今回質問をこのサイトに投げて良かったです。

また、ソースコードと参考サイトありがとうございます！とても助かります。動かしてみて挙動を勉強してみます。

Answer 3

イベント外で変数textを定義して、入力があるたびにtextの中身を切り替える、その変数をイベントの中から呼び出すことで無事入力値を取得することができました。

おそらく、editボタンが押された際の定義イベント内だと、「生成されたinputタグのvalを取る」動作が働き、動的に値を入手できなかったのだと思います。

$(".edit").on("click", function (e) {
          // btn本来のform actionに飛ばす機能を無効にする
          e.preventDefault();
          // 該当投稿のidを取得する
          let id = $(this).parents(".card").attr("id");
          let text = $(`#title${id}`).text();
          // 投稿内容をinputタグに置き換える
          $(`#title${id}`).replaceWith(function () {
            $(this).replaceWith(
              `<input type='text' name='edit_text' class="form-control my-2" id="title${id}" value="${$(
                this
              ).text()}" >`
            );
          });
          // inputタグに値が入力されるたびに発火するイベント
          $('input[type="text"]').on("input", function () {
            // 変数textの中にinputに入力された値を格納する
            text = $(this).val();
          });
          // btnのテキストと機能の書き換え
          // 編集ボタンと削除ボタンを取得する
          let edit_btn = $(this);
          let delete_btn = $(this).next();
          // 「編集する」ボタンのテキストを変更
          edit_btn.html("完了する");
          delete_btn.html("変更を破棄する");
          // 完了ボタンを押した際に、編集するイベントを追加
          $(edit_btn).on("click", function () {
            // idをsend_idに格納する
            let id = $(this).parents(".card").attr("id");
            // inputのvalをsend_textに格納する
            $.ajax({
              url: '{% url "edit" %}',
              type: "POST",
              data: {
                // viewにrequestで押されたbuttonのid属性を渡す
                id: id,
                new_text: text,
              },
              dataType: "json",
              // 成功した時
            }).done(function (response) {
              // inputタグをpタグに戻す
              $(`#title${id}`).replaceWith(function () {
                $(this).replaceWith(
                  `<p class="card-text py-3 mb-0" id="title${id}">${response.text}</p>`
                );
              });
              // 完了ボタンを編集ボタンに戻す
              edit_btn.html("編集する");
              // 変更を破棄するボタンを削除ボタンに直す
              delete_btn.html("削除する");
            });
          });
        });