Question

我试图建立一个额外的字段，称为＆＃34;年龄＆＃34;在同一条线上或在子场旁边。因此，当我单击添加/加号按钮时，它将为我提供一个包含子项和年龄的额外字段，而不仅仅是一个子字段任何人都有时间帮助并告诉我如何做到正确，因为我无法使其发挥作用。

PHP

      <?php 
if(isset($_POST['name'])){
$name = $_POST['name'];
$phone = $_POST['phone'];
$ageslist = "";
$childlist = "";
$more = TRUE;
$i = 1;
while ($more){
    if ((isset($_POST['child_'.$i])) && ($_POST['child_'.$i] != "") && ($_POST['ages_'.$i]) && ($_POST['ages_'.$i] != "")){
        $childlist .= $_POST['child_'.$i];
        $childlist .= "<br />";
        $ageslist .= $_POST['ages_'.$i];
        $ageslist .= "<br />";
        } else { $more = FALSE;
        } 
        $i++;
        }
        echo $name;
        echo "<br />";
        echo $phone; echo "<br />";
        echo "<br />";
        echo $ageslist;
        echo "<br />";
        echo $childlist; }
        ?>

的javascript

            var i = 1;
            function addKid(){
                if (i <= 6){
                    i++;
                    var div = document.createElement('div');
                    div.style.width = "300px";
                    div.style.height = "50px";
                    div.style.color = "white";
                    div.setAttribute('class', 'myclass');
                    div.innerHTML = 'Child : <input type="text" name="child_'+i+'" ><input type="button" id="add_kid()" onclick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">';
                    div.innerHTML = 'Ages : <input type="text" name="ages_'+i+'" ><input type="button" id="add_kid()" onclick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">';
                    document.getElementById('kids').appendChild(div);
                    }
                    }
                    function removeKid(div) {
                        document.getElementById('kids').removeChild( div.parentNode );
                        i--; }

HTML

                    <form action="more_kids.php" method="post" >
                    Name: <input type="text" name="name"><br />
                    <div id="kids">
                        Child : <input type="text" name="child_1" >
                        Ages : <input type="text" name="ages_1" > <input type="button" id="add_kid()" onclick="addKid()" value="+" />
                    </div> Phone: <input type="text" name="phone"><br />
                    <input type="submit" name="submit" value="submit" />
                </form>

Answer 1

javascript中有一个错误。

div.innerHTML = 'Child : <input type="text" name="child_'+i+'" ><input type="button" id="add_kid()" onclick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">';
                div.innerHTML = 'Ages : <input type="text" name="ages_'+i+'" ><input type="button" id="add_kid()" onclick="addKid()" value="+" /><input type="button" value="-" onclick="removeKid(this)">';

你正在覆盖div.innerHTML。年龄的第二个应该是div.innerHTML + ='';

你也给了div..style.color白色。因此标签是不可见的。这是有效的脚本。

        <script>
    var i = 1;
        function addKid(){
            if (i <= 6){
                i++;
                var div = document.createElement('div');
                div.style.width = "500px";
                div.style.height = "30px";
                // div.style.color = "white";
                div.setAttribute('class', 'myclass');
                div.innerHTML = 'Child : <input type="text" name="child_'+i+'" >';
                div.innerHTML +=  ' Ages : <input type="text" name="ages_'+i+'" > <input type="button" onclick="addKid()" value="+" /> <input type="button" value="-" onclick="removeKid(this)"> \n';

                alert(div.innerHTML);
                document.getElementById('kids').appendChild(div);
                }
                }
                function removeKid(div) {
                    document.getElementById('kids').removeChild( div.parentNode );
                    i--; }    

    </script>

坚持我的动态形式

1 个答案: