我有一个带有javascript函数的php代码。该脚本有“添加更多”按钮,如果我们单击此按钮,它将再添加一行,其中包含2个名为“Pront ID:”和“Pronto Title:”的文本框。脚本工作正常。但我需要脚本,它应该允许我输入12个字符到“Pronto ID”字段。如果它超过/少于12个字符,它应该回显消息以添加完全12个字符。
在HTML代码中我们可以使用“pattern =”\ w {12}“title =”输入12个字符“”行回显“输入12个字符”但我需要在内部javascript函数“添加”。 请帮帮我。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="./jquery-1.7.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.del').live('click',function(){
$(this).parent().parent().remove();
});
$('.add').live('click',function(){
var i = 1;
var appendTxt = "<tr><td>Pront ID:</td><td><input type='text' name='input_box_one[]' pattern='\w{12}' title='Enter 12 characters'></td><td>Pronto Title:</td> <td><input type='text' name='input_box_two[]' /></td> <td><input type='button' class='del' value='Delete' /></td></tr>";
$("tr:last").before(appendTxt);
var inputs = document.getElementsByTagName('input').length;
//alert(inputs);
if(inputs == 18){
document.getElementById("countButton").disabled = true;
}
$i++
});
});
</script>
</head>
<body>
<form name="form1" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<table id="options-table">
<tr>
<td>Pront ID:</td><td><input type="text" name="input_box_one[]" pattern="\w{12}" title="Enter 12 characters" /></td>
<td>Pronto Title:</td><td><input type="text" name="input_box_two[]" /></td>
<td><input type="button" class='del' value='Delete' /></td>
<input type="hidden" name="count" value="<?php $i; ?>">
</tr>
<?php
echo "<tr><td><input id=\"countButton\" type=\"button\" class=\"add\" value=\"Add More\"/></td><td><input type=\"submit\" name=\"submit\" value=\"submit\"></td></tr>";
?>
</table>
</form>
</body>
</html>
<?php
foreach ($_POST['input_box_one'] as $v) {
echo $v;
echo "\n";
}
foreach ($_POST['input_box_two'] as $p) {
echo $p . "\n";
}
?>