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