根据web表单中选择字段的值更改输入字段的数据要求

Question

我正在开发一个web表单，该表单包含一个带有两个选项的选择下拉列表："Cedula"；(在英语中，"Identification"(和"Identification；Pasaporte"(英文为"Passport"(。

这是迄今为止我的网页表单的图片。

请帮助我实现以下目标：当用户选择"Cedula"；，它们被限制为10个数字；Pasaporte，它们不限于10位数字。

这是我到目前为止的代码：

<?php
if ($_GET['id']) {
$cliente = $clienteNegocio->recuperar($_GET['id']);
$txtAction = 'Editar';          
}else{
$cliente = new cliente();
$txtAction = 'Agregar';
}
?>
<div class="container">
<div class="page-header">
<h1><?php echo $txtAction; ?> Cliente</h1>
</div>
<form role="form" method="post" id="principal">
<input type="hidden" name="id" value="<?php echo $cliente->getId();?>" >

<div class="form-group">
<label for="nombre">Nombre</label>
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre" value="<?php echo $cliente->getNombre();?>" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="apellido">Apellidos</label>
<input type="text" class="form-control" id="apellido" name="apellido" placeholder="Apellido" value="<?php echo $cliente->getApellido();?>" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="tipoDoc">Tipo de Documento</label>
<select class="form-control" id="tipoDoc" name="tipoDoc">
<option value="Cedula"  <?php if($cliente->getTipoDoc() == 'Cedula') {echo "selected";} ?>  >Cedula</option>
<option value="Pasaporte" <?php if($cliente->getTipoDoc() == 'Pasaporte') {echo "selected";} ?> >Pasaporte</option>
</select>
</div>
<div class="form-group">
<label for="nroDoc">Numero de Documento</label>
<input type="number" class="form-control" id="nroDoc" maxlength=10 oninput="if(this.value.length > this.maxLength) this.value = this.value.slice(0, this.maxLength);"
name="nroDoc" placeholder="Numero de Documento" value="<?php echo $cliente ->getNroDoc();?>" required>
<div class="help-block with-errors"></div>
</div>

Answer 1

好了。

我已经编写了一个javascript函数来检查您选择Pasaporte/Cedula时的长度。

其次，在<input type = "number"/>中，不能设置maxLength。因此，必须设置<input type = "text" />。此外，一个onKeyPress事件，用于验证输入为数字

<?php
if ($_GET['id']) {
$cliente = $clienteNegocio->recuperar($_GET['id']);
$txtAction = 'Editar';          
}else{
$cliente = new cliente();
$txtAction = 'Agregar';
}
?>
<script>
function setMaxLength(){
var inputVal = document.getElementById("tipoDoc")
var selIndex = inputVal.options[inputVal.selectedIndex].value
var inputNum = document.getElementById("nroDoc");

if( selIndex === "Cedula"){
inputNum.maxLength = 10
selIndex.substr(0, 9);
inputNum.value = inputNum.value.substr(0, 9);
} else{
// Set your own limit here
// if selIndex === "Pasaporte"
inputNum.maxLength = 20
}
}
</script>

<div class="container">
<div class="page-header">
<h1><?php echo $txtAction; ?> Cliente</h1>
</div>
<form role="form" method="post" id="principal">
<input type="hidden" name="id" value="<?php echo $cliente->getId();?>" >

<div class="form-group">
<label for="nombre">Nombre</label>
<input type="text" class="form-control" id="nombre" name="nombre" placeholder="Nombre" value="<?php echo $cliente->getNombre();?>" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="apellido">Apellidos</label>
<input type="text" class="form-control" id="apellido" name="apellido" placeholder="Apellido" value="<?php echo $cliente->getApellido();?>" required>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="tipoDoc">Tipo de Documento</label>
<select class="form-control" id="tipoDoc" name="tipoDoc" onChange="setMaxLength()">
<option value="Cedula"  <?php if($cliente->getTipoDoc() == 'Cedula') {echo "selected";} ?>  >Cedula</option>
<option value="Pasaporte" <?php if($cliente->getTipoDoc() == 'Pasaporte') {echo "selected";} ?> >Pasaporte</option>
</select>
</div>
<div class="form-group">
<label for="nroDoc">Numero de Documento</label>
<!-- 
Here onKeyPress method is used to check if the input is a number
in <input type = "number"/> you cannot set maxLength
hence you have to set <input type = "text" />
-->
<input type="text" class="form-control" id="nroDoc" maxlength=10 onkeypress="if ( isNaN(this.value + String.fromCharCode(event.keyCode) )) return false;"
name="nroDoc" placeholder="Numero de Documento" value="<?php echo $cliente ->getNroDoc();?>" required>
<div class="help-block with-errors"></div>
</div>
</form>
</div>