複数あるフォームで指定のフォームをローカルストレージに入れるにはどうすればいいでしょうか?

以下のソースの場合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>

回答の条件
  • 1人5回まで
  • 登録:
  • 終了:2013/10/29 08:04:48
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.2

回答回数4973ベストアンサー獲得回数2154

ポイント500pt

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

<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());
        });
他1件のコメントを見る
id:shuheiok

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

2013/10/29 06:58:23
id:shuheiok

すみません。解決しました。
お手数おかけし申し訳ありませんでした。

2013/10/29 08:04:21

その他の回答1件)

id:taknt No.1

回答回数13539ベストアンサー獲得回数1198

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

id:taknt

setlocalStorage(1)とかsetlocalStorage(2)とかにすれば その引数をみれば、
どこでクリックされたかわかりますよね?

2013/10/28 20:12:54
id:a-kuma3 No.2

回答回数4973ベストアンサー獲得回数2154ここでベストアンサー

ポイント500pt

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

<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());
        });
他1件のコメントを見る
id:shuheiok

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

2013/10/29 06:58:23
id:shuheiok

すみません。解決しました。
お手数おかけし申し訳ありませんでした。

2013/10/29 08:04:21
id: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>

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません