用户使用javascript生成的输入字段，如果验证失败，如何将其数据填充回输入字段

Question

我有一个输入字段部分，需要填写一个字段，但是如果他们想添加更多字段，请点击+按钮，它会生成一个新的输入字段。 他们也可以点击-按钮将其删除。 如何在这些用户生成的输入字段上执行验证？ 当我点击表单上的“提交”按钮时，用户生成的字段消失了，因此我无法重新显示他们填写的数据，以便他们可以看到自己做错了什么并进行更改。

<div id="pick_style">
<label for="pick_up_location">Pick Up Location(s)</label>
<input type="text" name="pick_up_location_1" 
value="<?php if (isset($_POST['pick_up_location_1'])) 
{ echo $_POST['pick_up_location_1']; } ?>"list="pick_up_location" />
<datalist name="pick_up_location" id="pick_up_location">
<?php while($row = mysqli_fetch_array($pickup_location_initial)){ ?>
<option value="<?php echo $row['store_city'] . ',' 
. ' ' . $row['store_state'] . ' ' .$row['store_num']; ?>">
<?php
}
?>
</datalist>

<input type="button" id="add_pickup()" onClick="add_pickup()" value="+" />
</div>

这是必需的初始取件位置，如果使用value = isset $ _POST变量验证失败，则很容易将其显示给用户。 但是，当用户想要添加其他接送地点时，他们会点击+按钮触发此代码：

var p = 1; 
function add_pickup(){

if (p <= 4){

p++; 

var div = document.createElement('div'); 
div.innerHTML = '<label for="pick_up_location"></label>
<input type="text"   name="pick_up_location_'+p+'" list="pick_up_location" />
<datalist name="pick_up_location" id="pick_up_location">
<?php while($row = mysqli_fetch_array($resultpickup)){ ?>
<option value="<?php echo $row['store_city'] . ',' . ' ' .
$row['store_state'] . ' ' .   $row['store_num']; ?>"><?php } ?></datalist>
<input type="button" id="add_pickup()" onClick="add_pickup()" value="+" />
<input type="button" onClick="removePick(this)" value="-" />';
document.getElementById('pick_style').appendChild(div);
}
 }

function removePick(div){

document.getElementById('pick_style').removeChild( div.parentNode )
p--; 

}

如果验证失败，并且他们想通过显示之前输入的内容来简化用户的输入，我该如何重新显示用户输入的数据？2，3，4或5

Answer 1

只需在服务器端遍历pick_up_location_1, ..., pick_up_location_4并使用- （减号）按钮创建HTML：

<div id="pick_style">
<?php for ($i = 1; $i < 5; $i++) { ?>
<?php $key = 'pick_up_location_' + $i; ?>
<?php if (isset($_POST[$key])) { ?>
  <label for="pick_up_location">Pick Up Location(s)</label>
  <input type="text" name="<?php echo $key; ?>"
    value="<?php if (isset($_POST[$key])) { echo $_POST[$key]; } ?>" list="<?php echo $key; ?>" />
  <datalist name="<?php echo $key; ?>" id="<?php echo $key; ?>">
  <?php while ($row = mysqli_fetch_array($pickup_location_initial)) { ?>
  <option value="<?php echo $row['store_city'] . ',' . ' ' . $row['store_state'] . ' ' . $row['store_num']; ?>">
  <?php } ?>
</datalist>
<input type="button" onClick="removePick(this)" value="-" />
<?php } /* if */ ?>
<?php } /* for */ ?>
<input type="button" id="add_pickup()" onClick="add_pickup()" value="+" />
</div>