DjangoのフォームにJavaScriptが反映されない

前提・実現したいこと

Django3で検索窓を作りました。
フォーム内に記入したクエリ送信後、カーソルが自動でフォームにフォーカスし、入力内容もリセットした状態にしたいです。
テンプレートのHTMLにJavaScriptを埋め込み、上記を実現したいです。

参考

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

エラーは発生していません。index.htmlも閲覧でき、formも動作します。
しかしindex.htmlに埋め込んだjavaScriptが反映されません。

該当のソースコード

index.html

HTML
1<form method="post" name="form">
2    {% csrf_token %}
3    {% for field in form %}
4    <p>
5      <label>{{ field.label }}</label>
6      {{ field }}
7      <input type="button" value="検索" class="btn btn-info" name="record_id" onclick="rset(this.form)">
8    </p>
9    {% endfor %}
10    <script type="text/javascript">
11      function rset(f){
12      f.submit();
13      f.reset();
14      document.form.record_id.focus();
15      }
16    </script>
17  </form>

base.html

HTML
1<!doctype HTML>
2<html>
3    <head>
4        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
5        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
6        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
7        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
8      </head>
9    <body>
10        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
11            <a class="navbar-brand" href="/">ラベル検査</a>
12        </nav>
13        <div class="container mt-4">
14        {% block main %}
15        <p>※コンテンツがありません。</p>
16        {% endblock %}
17        </div>
18    </body>
19</html>

views.pyは関係なさそうですが掲載します。

Python
1from django.views.generic.edit import FormView
2from . import forms
3from .models import RecordID
4from .scraping import isRightID
5
6class IndexView(FormView):
7    form_class = forms.TextForm
8    template_name = "labelChecker/index.html"
9
10    def form_valid(self, form):
11        data = form.cleaned_data
12        text = data["record_id"]
13
14        RecordID.objects.create(
15            record_id = text,
16            is_right_id = isRightID(text)
17        )
18
19        ctxt = self.get_context_data(recordid=RecordID.objects.all(), form=form)
20        return self.render_to_response(ctxt)

試したこと

外部のJavaScriptファイルを読み込み実現しようとしましたが、やはり反映されませんでした。

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

回答1件

自己解決

解決方法

index.html内の{% for field in form %}を削除し、手動でinputタグを書きました。これにより、入力内容が毎回リセットした状態になりました。

続いて、onclick属性とdocument.form.record_id.focus();を組み合わせていたことがフォーカスしない原因だったため、この記述をfunction rset()から外し、別のscriptタグで定義し直しました。

修正後のコード

index.html

HTML
1<form method="post" name="form">
2  {% csrf_token %}
3  <p>
4    <label for="record_id">資料ID</label>
5    <input type="text" name="record_id" id="record_id">
6    <input type="button" value="検索" name="reord_id" class="btn btn-info" onclick="rset(this.form)">
7  </p>
8  <script type="text/javascript">
9    function rset(f){
10      f.submit();
11      f.reset();
12    }
13  </script>
14  <script type="text/javascript">
15  window.onload = function() {
16    document.getElementById('record_id').focus();
17  };
18  </script>
19</form>