開発部の「エイジ」です。
今回は入力フォームの増減機能からDBに保存するまでの手順を書きたいと思います。
完成すると下記のようなものができます。
環境
Django v3.1
Python v3.6.5
インストール
今回はjquery.add-input-areaというプラグインを用いて入力フォームの増減を導入します。
CDNを用いて導入します。
|
1 2 3 4 |
<script src="https://cdn.jsdelivr.net/npm/jquery.add-input-area@4.11.0/dist/jquery.add-input-area.min.js" integrity="sha256-yOwGvcRp3I8/XWkeARhJkgdfLREQygbFA5W2bUpM2FY=" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> |
上記のscriptを指定します。
使用例
使用例を元に使い方を解説します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<form action="{% url 'front_corporation_admin:create_corp_info' %}" method="POST"> <div class="card-body"> {% csrf_token %} <div class="form-group" id="list"> <div class="list_var"> <label>タイトル</label><br> <input class="form-control" type="text" id="list_0" name="title_0"> <label>内容</label><br> <input class="form-control" type="text" id="list_0" name="body_0"> <button class="list_del">Delete</button> </div> </div> <input type="button" value="Add" class="list_add"> </div> <button type="submit" class="btn btn-success" >登録</button> </form> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/jquery.add-input-area@4.11.0/dist/jquery.add-input-area.min.js" integrity="sha256-yOwGvcRp3I8/XWkeARhJkgdfLREQygbFA5W2bUpM2FY=" crossorigin="anonymous"></script> <script type="text/javascript"> $('#list').addInputArea(); </script> |
まず５行目id="list"で指定をします。
増やしたいものを６行目のようにclass="list_var"で括ります。ここが増減します。
8、10行目のようにid="list_0"とすると下記の画像のようにフォームの増減によって数字が変化します。
増減する入力欄の注意点
入力欄のname, id属性は
(任意の文字列) + (番号)の形式で記述して下さい。番号は必ずゼロから始めて下さい。
"任意の文字列"の末尾は、当然、数字で終わってはいけません。
アンダースコア"_"を挟んだりして対処して下さい。
例: list2_0
次にDeleteボタン(11行目)、Addボタン(14行目)をそれぞれ追加します。
それぞれclass="list_del"、class="list_add"と指定することによって機能します。
最後にjquery（20~22行目）を追加して完了です。
|
1 2 3 4 5 |
<script type="text/javascript"> $('#list').addInputArea(); </script> |
保存手順
基本DBに保存する手順としてはフォームのname属性を識別するのですが、
今回は動的に変わってしまうので正規表現を用いてフォームの数だけ保存を繰り返すようなコードを作ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import re def post(self, request, *args, **kwrgs): # 空の配列を作ります titleList = [] bodyList = [] # request.POST.items()でPOSTで送られてきた全てを取得。 for i in request.POST.items(): ＃ name属性のtitle_から始まるものをtitleListに追加 if re.match(r'title_*',i[0]): title.append(i[1]) if re.match(r'body_*',i[0]): body.append(i[1]) # titleListの要素数分を回す for i in range(len(title)): corporationinformation = CorporationInformation( title = titleList[i], body = bodyList[i], ) corporationinformation.save() return redirect(to='/home') |
これでフォームの量をに応じた保存ができるようなります。
以上になります。最後までお読みいただきありがとうございました。
このブログは株式会社CoLabMixによる技術ブログです。
GCP、AWSなどでのインフラ構築・運用や、クローリング・分析・検索などを主体とした開発を行なっています。
Ruby on RailsやDjango、Pythonなどの開発依頼などお気軽にお声がけください。
開発パートナーを増やしたいという企業と積極的に繋がっていきたいです。
