javascript函数只允许添加12个字符

时间:2015-05-18 08:01:00

标签: javascript php

我有一个带有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";

}


?>

0 个答案:

没有答案