【Django】入力フォームの増減機能からDBに保存する方法 - 株式会社CoLabMix

【Django】入力フォームの増減機能からDBに保存する方法

開発部の「エイジ」です。

今回は入力フォームの増減機能からDBに保存するまでの手順を書きたいと思います。

完成すると下記のようなものができます。

環境

Django v3.1
Python v3.6.5

インストール

 

今回はjquery.add-input-areaというプラグインを用いて入力フォームの増減を導入します。

CDNを用いて導入します。

参考


上記のscriptを指定します。

使用例

使用例

使用例を元に使い方を解説します。

参考

まず5行目id=“list”で指定をします。

増やしたいものを6行目のように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行目)を追加して完了です。

 

保存手順

基本DBに保存する手順としてはフォームのname属性を識別するのですが、

今回は動的に変わってしまうので正規表現を用いてフォームの数だけ保存を繰り返すようなコードを作ります。

 

これでフォームの量をに応じた保存ができるようなります。

以上になります。最後までお読みいただきありがとうございました。

 

 

 

 

 

 

このブログは株式会社CoLabMixによる技術ブログです。

GCP、AWSなどでのインフラ構築・運用や、クローリング・分析・検索などを主体とした開発を行なっています。

Ruby on RailsやDjango、Pythonなどの開発依頼などお気軽にお声がけください。

開発パートナーを増やしたいという企業と積極的に繋がっていきたいです。

お問い合わせやご依頼・ご相談など

    関連記事

    1. Pythonでのgoogle-cloud-bigqueryライブラリを…

    2. SublimeText3でリモートのサーバ上にあるファイルを開いたり編…

    3. Elasticsearchのkuromojiの検索で重要な辞書(dic…

    4. WordPressでRESTAPIを使った画像の投稿と記事の投稿

    5. ElasticSearchでjava.lang.OutOfMemory…

    6. python3でGoogleDriveからファイルの取得