お世話になってます。
入力フォームでバリデーションをかけ、エラーが表示された際にリロードされるのですが
リロードされてもフォームに入力した内容は、そのまま表示させて置きたいので
LocalStorageを使用しています。
しかし、リロードされた時にinputタグのvalue属性に初期値が設定されていた場合、
その初期値がLocalStorageに保存されてしまいます。
html
1<form id="make" method="post" action="get.php"> 2 <ul> 3 <!-- ユーザー名前 --> 4 <li> 5 <label for="name">ユーザー :</label> 6 <input id="name" class="box" type="text" name="user"> 7 </li> 8 9 <!-- タイトル --> 10 <li> 11 <label for="title">タイトル : </label> 12 <input id="title" type="text" name="title"> 13 </li> 14 15 <!-- 掲載開始日 --> 16 <li> 17 <label for="body">掲載開始日 : </label> 18 <input id="startY" maxlength="4" type="text" name="start_year" value="2019">年 19 <input id="startM" maxlength="2" type="text" name="start_month" value="03">月 20 <input id="startD"maxlength="2" type="text" name="start_day" value="01">日 21 </li> 22 23 <!-- 掲載終了日 --> 24 <li> 25 <label for="body">掲載終了日 : </label> 26 <input id="endY" maxlength="4" type="text" name="finish_year">年 27 <input id="endM" maxlength="2" type="text" name="finish_month">月 28 <input id="endD" maxlength="2" type="text" name="finish_day">日 29 </li> 30 31 <!-- 本文 --> 32 <li> 33 <label for="body">本文: </label> 34 <textarea id="textarea" type="textarea" name="body"></textarea> 35 </li> 36 </ul> 37 38 <button id="button" type="submit">掲載する</button> 39</form>
js
1document.getElementById("button").onclick = saveStorage(); 2 3function saveStorage() 4{ 5 var name = document.getElementById('name').value;//user name 6 var title = document.getElementById('title').value;//title 7 var textarea = document.getElementById('textarea').value;//body 8 9 var startY = document.getElementById('startY').value; //掲載開始日 10 var startM = document.getElementById('startM').value; 11 var startD = document.getElementById('startD').value; 12 13 var endY = document.getElementById('endY').value; //掲載終了日 14 var endM = document.getElementById('endM').value; 15 var endD = document.getElementById('endD').value; 16 17 window.localStorage.setItem("name",contributor); 18 window.localStorage.setItem("title",title); 19 window.localStorage.setItem("textarea",textarea); 20 21 window.localStorage.setItem("startY",startY); 22 window.localStorage.setItem("startM",startM); 23 window.localStorage.setItem("startD",startD); 24 25 window.localStorage.setItem("endY",endY); 26 window.localStorage.setItem("endM",endM); 27 window.localStorage.setItem("endD",endD); 28 29 30 console.log("LocalStorageに保存しました。"); 31 return; 32} 33
上記の場合、**「掲載開始日」**にUserが何を入力しても、inputタグのvalue属性に指定してある
デフォルト値(2019,03,01)が入ってしまいます。
どうしたら、inputタグのvalue属性のデフォルト値ではなく、
Userが入力した値をLocalStorageへ保存できるでしょうか。
ご教示いただけましたら幸いです。
よろしくお願いいたします。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。