以下のソースの場合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>
「同じ形のフォームが複数あって、クリックした要素が含まれているフォームの値を取り出したい」のだと、脳内で変換しました。
<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()); });
setlocalStorageに引数を設けて、その値により formなんとかを区別するようするというのは いかがでしょうか?
setlocalStorage(1)とかsetlocalStorage(2)とかにすれば その引数をみれば、
どこでクリックされたかわかりますよね?
「同じ形のフォームが複数あって、クリックした要素が含まれているフォームの値を取り出したい」のだと、脳内で変換しました。
<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()); });
いつもありがとうございます。
静的なページだと大丈夫なのですが、
動的に取得しているページ内だと要素が取れないみたいです。。。
解決策は有りますでしょうか?
すみません。解決しました。
お手数おかけし申し訳ありませんでした。
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>
いつもありがとうございます。
2013/10/29 06:58:23静的なページだと大丈夫なのですが、
動的に取得しているページ内だと要素が取れないみたいです。。。
解決策は有りますでしょうか?
すみません。解決しました。
2013/10/29 08:04:21お手数おかけし申し訳ありませんでした。