jquery でform の項目を追加・削除

2012/12/16 [11:38:21] (日)

縦書き小説のEPUB3作成ページ https://books.doncha.net/epub/ を使ってkindleストアに登録してるんだけど。作品が増えてくるといわゆる作品一覧、既刊一覧が欲しくなったので仕込んでみた。

紙印刷の本の場合、既刊一覧は、売れ筋が入ったらとか、時間やページがあったら作る、のんきなところがあった。そもそも、版を作ったり紙印刷代もかかる。でも、kindleの場合、外部リンクで既刊にアクセスがすぐにできるので、今までの既刊一覧とは性格が違う販促直結ページ。できるだけ簡単にメンテしていきたい。
エディタでhtmlを書けば済むんだけど、公開ページだし、フォームに記入すればhtmlが生成されて、それを登録すればEPUB3の巻末にページ追加される、ということにした。

「作品数がわからないので、作品の数だけフォームが追加できるようにする」
jQueryでいくつかライブラリがあったけど、なんだかオーバースペックだったので、簡単・シンプルなものを自作。

form の html
<form action="test.cgi" method="post"> <div id="formlist_1"> <p class="title"><input type="text" name="title_1" /></p> <p class="body"><input type="text" name="body_1" /></p> <p class="deletebutton"></p> </div> <input type="button" value="追加する" onclick="add_list();" /> <input type="submit" value="OK" /> </form>
formlist_1のワンセットを追加・削除。

javascript add_list delete_list
var count=1; function add_list(){ var orig; var n = count; var listname = 'formlist_'; while( ! $(orig).length ){ orig=$('#' + listname + n); --n; } var copy = $(orig).clone(); ++count; listname = listname + count; $(orig).after(copy); $(copy).attr('id', listname); var listid = '#' + listname; $(listid + ' p.title input').attr("name", 'title_'+count); $(listid + ' p.body input).attr("name", 'body_'+count); $(listid + ' p.deletebutton).html('<input type="button" value="削除" onclick="delete_list( '+ count + ')" />'); $(listid + ' p .title input').val(''); $(listid + ' p.body input'),val(''); } function delete_list(i){ $('#' + 'formlist_' + i).remove(); }
formlist_ の最後のワンセットをコピーして、最後尾に追加する。グローバル変数でインクリメント。削除されることもあるので、最後のワンセットが存在するとは限らないので、
while( ! $(orig).length ){
最後のワンセットをループで判定している。ここでちょっとハマったのが。
$(orig) 
が常に真になるのに気づかなかった。$(orig).length などとオブジェクトの中身があるかどうかで判定する必要があった。

ということでちまちまメンテしつつ売り上げなどもちまちまチェック。
ありがたいことに毎日ぽつぽつ売れてくれている。iTunesストアなど比べ物にならない。アマゾン、Kindleストアの販売力は大きいなあ、という感想でいいのかな。

» ローカル環境で電子書籍を作る、Macアプリ・Windows版ツール 「かんたんEPUB3作成easy_epub」

»電子書籍制作代行についてはこちら