人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

複数あるフォームで指定のフォームをローカルストレージに入れるにはどうすればいいでしょうか?
以下のソースの場合name="form3"にある登録リンクをクリックするとform1の"テスト1"の値がローカルストレージに入ってしまいます。
form1の登録リンクを押すと"テスト1"、form3だとテスト3が入るようにしたいです。

<form name="form1">
<input id="postid" type="hidden" value="テスト1">
<a href="#" onClick="setlocalStorage(); return false;">登録<a>
</form>
<form name="form2">
<input id="postid" type="hidden" value="テスト2">
<a href="#" onClick="setlocalStorage(); return false;">登録<a>
</form>
<form name="form3">
<input id="postid" type="hidden" value="テスト3">
<a href="#" onClick="setlocalStorage(); return false;">登録<a>
</form>

<script type="text/javascript">
//init
$(document).ready(viewStorage);
// localStorageへの格納
function setlocalStorage() {
var obj = {
postid:$("#postid").val(),
title:$("#title").val(),
};
//データの保存
localStorage.setItem($("#postid").val(),JSON.stringify(obj));
}
</script>


●質問者: shuheiok
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● きゃづみぃ
●0ポイント

setlocalStorageに引数を設けて、その値により formなんとかを区別するようするというのは いかがでしょうか?


きゃづみぃさんのコメント
setlocalStorage(1)とかsetlocalStorage(2)とかにすれば その引数をみれば、 どこでクリックされたかわかりますよね?

2 ● a-kuma3
●500ポイント ベストアンサー

「同じ形のフォームが複数あって、クリックした要素が含まれているフォームの値を取り出したい」のだと、脳内で変換しました。

<form name="form1">
 <input type="hidden" value="テスト1"> <!-- id 削りました -->
 <a href="#" class="register">登録</a> <!-- onclick ではなく、class を指定 -->
</form>
<form name="form2"> <!-- form の名前と、input の value だけが違います -->
 <input type="hidden" value="テスト2">
 <a href="#" class="register">登録</a>
</form>
<form name="form3">
 <input type="hidden" value="テスト3">
 <a href="#" class="register">登録</a>
</form>


<script type="text/javascript">

/*
 class="register" な要素に処理を登録
 */
$(".register").click(function(event) {

 // クリックされた要素のひとつ前を取り出す
 var e = $(this).prev();

 // ひとつ前の要素の value 属性を確認
 alert(e.val());


 /*
 ローカルストレージに入れるなり、何なり...
 */


 // Aタグのデフォルトの動作を無効にする
 event.preventDefault();

});

</script>

この範囲であれば、フォームの name もユニークにする必要はないです。




質問の補足を受けての、追記です。

form内にidが複数ある場合はどうすればいいでしょうか?

クリックした要素の親から、その子供を取得します。
こんな感じ。

<form name="form1">
<input id="postid1" type="hidden" value="テスト11">
<input id="postid2" type="hidden" value="テスト12">
<input id="postid3" type="hidden" value="テスト13">
<a href="#" class="register">登録</a> <!-- 最後が <a> になってたのが地味に罠です :-) -->
</form>
<form name="form2">
<input id="postid1" type="hidden" value="テスト21">
<input id="postid2" type="hidden" value="テスト22">
<input id="postid3" type="hidden" value="テスト23">
<a href="#" class="register">登録</a>
</form>

<form name="form3">
<input id="postid1" type="hidden" value="テスト31">
<input id="postid2" type="hidden" value="テスト32">
<input id="postid3" type="hidden" value="テスト32">
<a href="#" class="register">登録</a>
</form>

<script type="text/javascript">

$(function() {

 /*
 class="register" な要素に処理を登録
 */
 $(".register").click(function(event) {

 // クリックされた親の要素(フォーム)
 var f = $(this).parent();

 // フォームの子供で、type="hidden" な INPUT を取り出す
 var obj = {}
 $("input[type='hidden']", f).each(function() {
 obj[ this.id ] = $(this).val();
 });

 // JSON 形式の文字列にする
 var data = JSON.stringify(obj);

 // データを確認
 console.log(data);

 // データを保存
 localStorage.setItem("form_data", data);

 // Aタグのデフォルトの動作を無効にする
 event.preventDefault();
 });

});
</script>

最初に質問に書かれたコードを尊重して、データを JSON 形式の文字列でストレージに保存していますが、それぞれの ID をキーにして保存したいのであれば、子要素をたどるところをこんな感じに。

 // フォームの子供で、type="hidden" な INPUT を保存する
 $("input[type='hidden']", f).each(function() {
 localStorage.setItem(this.id, $(this).val());
 });

a-kuma3さんのコメント
質問の追記に関する分を、回答に追記しました。

shuheiokさんのコメント
いつもありがとうございます。 静的なページだと大丈夫なのですが、 動的に取得しているページ内だと要素が取れないみたいです。。。 解決策は有りますでしょうか?

shuheiokさんのコメント
すみません。解決しました。 お手数おかけし申し訳ありませんでした。

質問者から

form内にidが複数ある場合はどうすればいいでしょうか?

<form name="form1">
<input id="postid1" type="hidden" value="テスト11">
<input id="postid2" type="hidden" value="テスト12">
<input id="postid3" type="hidden" value="テスト13">
<a href="#" onClick="setlocalStorage(); return false;">登録<a>
</form>
<form name="form2">
<input id="postid1" type="hidden" value="テスト21">
<input id="postid2" type="hidden" value="テスト22">
<input id="postid3" type="hidden" value="テスト23">
<a href="#" onClick="setlocalStorage(); return false;">登録<a>
</form>

<form name="form3">
<input id="postid1" type="hidden" value="テスト31">
<input id="postid2" type="hidden" value="テスト32">
<input id="postid3" type="hidden" value="テスト32">
<a href="#" onClick="setlocalStorage(); return false;">登録<a>
</form>


関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ