【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. CentOS 7で firewalld の設定

    2. scrapy-redisを使って、redisを使ったクローリングを試し…

    3. DjangoへWYSIWYGエディターを導入する手順①

    4. AWSのLambdaでScrapyを動かす その2 - S3からの値の…

    5. オープンソース全文検索サーバーの「Fess」をCentOS7にインスト…

    6. terraform構築手順〜API Gateway 編〜