テーブル内のサブミット済みボタンの後にHTMLで入力値を保持する=日付値

Question

私は多大な検索をしましたが、私はここでかなり新しいので、私の挑戦にはうまくいきません。

プロジェクトビュー

何が起こっているのです。 ユーザーは日付または日付範囲を選択した後、私は、ユーザーが日付ピッカーをクリックすることができるページを作っており、それらがクリック選択領域の下に配置されたテーブルの送信ボタン "Verzenden"は、データベース内で利用可能な特定の日付または日付範囲のすべてのデータを表示します。

このテーブルでは、ユーザーは特定のテーブル行からデータを調整できます。 送信 "OK"ボタンをクリックすると、ユーザーが行った変更がデータベースにプッシュされます。

今私の挑戦： ユーザーが行からいくつかのデータを変更したAN彼らは、私は、ユーザーがそれに戻ってきていることは、彼が調整する前に作られた最後の日付の選択だということを実現したいボタンを提出し、「OK」をクリックした後、いくつかの行テーブルのデータ。これを処理する最善の方法は何ですか？参加して読んでくれてありがとう、誰かが私を助けてくれることを願っています。

Answer 1

あなたが探している用語は、「フォームの事前入力」です。あなたは、HTMLに直接書き込まれた値を持っているHTMLを生成することにより、PHPでフォームを事前に読み込むことができ

<input type="text" value="<?php echo htmlspecialchars($someValue, UTF8, ENT_BOTH);?>"> 

あなたの宿題は、おそらくユーザーのセッションに入力を保存し、SESSIONを毎回チェックするためにあなたを望んでいるあなたページをレンダリングします。以前の値がセッション内にある場合、フォームを事前に入力します（つまり、ハードコードされた値でHTMLを表示します）。

Answer 2

はこれを試してみてください：

<form autocomplete="on">...</form> 

「オートコンプリート」属性は、あなたがサイトをリロードした後に提出しました選択を保存することができます。この機能は、いくつかの特別なタグに有効になりたくない場合は、このようなコードを記述する必要があり ：

<form autocomplete="on"> 
    ... 
    <input type="date" autocomplete="off" /> // this tag won't save the choice 
</form> 

Answer 3

チェックこのフィドル：https://jsfiddle.net/9nfz311z/

htmlの一部：

<input type="date" name="test"/> 

js部分：

var dateInput = document.querySelector('input[name="test"]'); 
var DOMReady = function(a,b,c){b=document,c='addEventListener';b[c]?b[c]('DOMContentLoaded',a):window.attachEvent('onload',a)} 

// on change save in localStorage the value 
dateInput.addEventListener('change', function(e) { 
    localStorage.setItem(dateInput.name, dateInput.value); 
}); 

// on dom ready if localStorage has date value apply it to the input 
DOMReady(setDateValue); 

function setDateValue() { 
    var date = localStorage.getItem(dateInput.name); 
    if (date) { 
    dateInput.value = date; 
    } 
} 

Answer 4

私はあなたのコードを使用しようとしましたがtはまだ動作しません。私の実装を確認できますか？

のJs

<script> 
var Datumvan = document.querySelector('input[name="Datum"]'); 
Datumvan.addEventListener('change',function(e) { 
    localStorage.setItem(Datumvan.name, Datumvan.value); 

}); 
document.addEventListener("DOMContentLoaded", function() { 
    var date = localStorage.getItem(Datumvan.name); 
    if(date){ 
     Datumvan.value = date; 
    } 
}); 
</script> 

日付セレクターあなたは、AJAXを使用すると応答が正常に見えるの後に行わ行のみを更新しないのはなぜ

<form method="post"> 
<table width="100%" border="1" cellspacing="0" 
cellpadding="0" align="center"> 
<tr> 
<td width="150"> 
<label>Datum van :</label><input type="date" name="Datum" size="30" require=""/> 
</td> 
<td width="150"> 
<label>Datum tot:</label><input type="date" name="Datum2" size="30" require=""/> 
</td> 
</tr> 
<tr> 
<td><id="button"><input type="submit" value="Verzenden"/></td> 
</tr> 
</table> 
</form>