如何保留後額外添加的輸入字段中的數據

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

從渲染表單服務器端到使用JavaScript重建它的一些可能的解決方案，基於從PHP轉儲到腳本標記的一些數據。

至於你的JavaScript似乎只有DOM操作，而不是數據備份（angularjs，vuejs等等），那麼第一選擇可能是最簡單的：

$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的短回波標籤<?=在<?php echo作爲一個個人喜好，他們在功能上是相同的