投稿後に追加入力フィールドにデータを保持する方法

Question

私は入力フィールドを持つhtml形式ですが、必要に応じてjavascript関数を使用して追加入力フィールドを作成する可能性があります。

<input id="myField0" name="myField[]" value="<?php echo isset($_POST['myField'][0]) ? $_POST['myField'][0] : '' ?>" class="awesomplete" list="myList" size="32"/><br> 
    <input id="myField1" name="myField[]" value="<?php echo isset($_POST['myField'][1]) ? $_POST['myField'][1] : '' ?>" class="awesomplete" list="myList" size="32"/><br> 
    <input id="myField2" name="myField[]" value="<?php echo isset($_POST['myField'][2]) ? $_POST['myField'][2] : '' ?>" class="awesomplete" list="myList" size="32"/><br> 
    <input id="myField3" name="myField[]" value="<?php echo isset($_POST['myField'][3]) ? $_POST['myField'][3] : '' ?>" class="awesomplete" list="myList" size="32"/><br> 

    <script> 
    // Start function for additional input fields 

    var counter = 5; 
    var limit = 15; 

    function addInput(divName){ 
     if (counter == limit) { 
     alert("You have reached the limit of " + counter + " inputs"); 
     } else { 
     // Create new div 
     var newdiv = document.createElement('div'); 
     newdiv.innerHTML = '<br><input type="text" id="myField' + counter + '" name="myField[]" class="awesomplete" list="myList" size="32"/>'; 
     document.getElementById(divName).appendChild(newdiv); 

     // Re instantiate Awesomplete 
     new Awesomplete(newdiv.querySelector('input'), { list: document.querySelector('#myList') }); 

     // Set counter 
     counter++; 
     } 
    } 

    // End function for additional input fields 
    </script> 

     <div id="dynamicInput"> 
     <b></b><input type="text" id="myField4" name="myField[]" value="<?php echo isset($_POST['myField'][4]) ? $_POST['myField'][4] : '' ?>" class="awesomplete" list="myList" size="32"/> 
     </div> 
     <input type="button" id="additional_inputfield" value="Additional input field" onClick="addInput('dynamicInput');"> 

は今、私は、フォームを送信した後、入力フィールドに入力したデータを保存しておきたい。ここでは完璧に動作するスクリプトです。これは、既存の入力フィールドではうまく動作しますが、javascript関数でphpを使用することができないため、追加入力フィールドには作成されません。すべてのフィールドに入力された値を保持する簡単なソリューションはありますか？

Answer 1

PHPからスクリプトタグにダンプされたデータに基づいて、フォームサーバー側のレンダリングから、javascriptを使用した再構築まで、さまざまな解決策があります。あなたのJavaScriptなど

のみDOM操作、バックアップされていないデータであると思われる（angularjsは、vuejsなど）を第一の選択肢は、おそらく最も簡単です：私は、PHP短いエコータグ<?=を使用していた

$inputCount = 4; //default 

if ($_SERVER['REQUEST_METHOD'] == 'POST'){ 
    $inputCount = count($_POST['myfield']); //set count to number of posted fields 
} 
//create as many inputs as required. 
for($i=0; $i<=$inputCount; $i++):?> 

    <input id="myField<?= $i; ?>" name="myField[]" value="<?= isset($_POST['myField'][$i]) ? $_POST['myField'][$i] : ''; ?>" class="awesomplete" list="myList" size="32"/><br> 

<?php endfor;> 

<script> 
// Start function for additional input fields 
var counter = <?=$inputCount +1;?>; 
//the rest of your code 

注意<?php echoの個人的な好みとして、それらは機能的に同じです