質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.07%

リロードした時にLocalStorageにinput valueで設定している初期値が保存される

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 968
退会済みユーザー

退会済みユーザー

お世話になってます。

入力フォームでバリデーションをかけ、エラーが表示された際にリロードされるのですが
リロードされてもフォームに入力した内容は、そのまま表示させて置きたいので
LocalStorageを使用しています。

しかし、リロードされた時にinputタグのvalue属性に初期値が設定されていた場合、
その初期値がLocalStorageに保存されてしまいます。

<form id="make" method="post" action="get.php">
    <ul>
        <!-- ユーザー名前 -->
        <li>
            <label for="name">ユーザー :</label>
            <input id="name" class="box" type="text" name="user">
        </li>

        <!-- タイトル -->
        <li>
            <label for="title">タイトル : </label>
            <input id="title" type="text" name="title">
        </li>

        <!-- 掲載開始日 -->
        <li>
            <label for="body">掲載開始日 : </label>
            <input id="startY" maxlength="4" type="text" name="start_year" value="2019"><input id="startM" maxlength="2" type="text" name="start_month" value="03"><input id="startD"maxlength="2" type="text" name="start_day" value="01"></li>

        <!-- 掲載終了日 -->
        <li>
           <label for="body">掲載終了日 : </label>
            <input id="endY" maxlength="4" type="text" name="finish_year"><input id="endM" maxlength="2" type="text" name="finish_month"><input id="endD" maxlength="2" type="text" name="finish_day"></li>

        <!-- 本文 -->
        <li>
            <label for="body">本文: </label>
            <textarea id="textarea" type="textarea" name="body"></textarea>
        </li>
    </ul>

    <button id="button" type="submit">掲載する</button>
</form>
document.getElementById("button").onclick = saveStorage();

function saveStorage()
{
    var name     = document.getElementById('name').value;//user name
    var title    = document.getElementById('title').value;//title
    var textarea = document.getElementById('textarea').value;//body

    var startY = document.getElementById('startY').value; //掲載開始日
    var startM = document.getElementById('startM').value;
    var startD = document.getElementById('startD').value;

    var endY = document.getElementById('endY').value; //掲載終了日
    var endM = document.getElementById('endM').value;
    var endD = document.getElementById('endD').value;

    window.localStorage.setItem("name",contributor);
    window.localStorage.setItem("title",title);        
    window.localStorage.setItem("textarea",textarea);

    window.localStorage.setItem("startY",startY);
    window.localStorage.setItem("startM",startM); 
    window.localStorage.setItem("startD",startD);

    window.localStorage.setItem("endY",endY);
    window.localStorage.setItem("endM",endM);
    window.localStorage.setItem("endD",endD);


    console.log("LocalStorageに保存しました。");
    return;
}

上記の場合、「掲載開始日」にUserが何を入力しても、inputタグのvalue属性に指定してある
デフォルト値(2019,03,01)が入ってしまいます。

どうしたら、inputタグのvalue属性のデフォルト値ではなく、
Userが入力した値をLocalStorageへ保存できるでしょうか。

ご教示いただけましたら幸いです。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

check解決した方法

0

//document.getElementById("button").onclick = saveStorage();
var button = document.getElementById('button');
button.addEventListener("click",saveStorage);


これでできました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

0

代入する際に実行しているからでは。

// document.getElementById("button").onclick = saveStorage();
//                                                        ↓
   document.getElementById("button").onclick = saveStorage;

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.07%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る