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

User generated input field using javascript, how do I populate their data back in the input field if validation fails

本文关键字：字段 输入 填充 数据 他们的 失败 如果 javascript 用户 验证      更新时间：2023-09-26

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

<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>

这是所需的初始拾取位置，如果验证失败，且值为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个字段，如果验证失败，我将如何重新显示他们输入的数据，并且我想通过向他们显示他们之前输入的内容来让他们更容易修复？

只需在服务器端迭代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>
相关文章：