0

我有一个表单，要求用户为设备类型命名，并说明他们想为该设备类型分配多少属性。该表单调用以下 php 文件，该文件使用循环来创建所需数量的属性。

我使用了 name="attribute".$i 以便能够识别下一个 php 页面上的每个属性，以将信息发送到数据库。

<?php echo $_POST['device-name']; ?>

    <?php 

        $num=$_POST['number-of-attributes'];
        $num=intval($num);

        for($i=0; $i<$num; $i++) {

            newAttribute($i);

        }

        function newAttribute($i) {

            echo ("<div id=\"new-attribute\">");
            echo ("<h3>New Attribute</h3>");
            echo ("<label for=\"attribute".$i."\">Name</label>");
            echo ("<input id=\"attribute\" type=\"text\" name=\"attribute".$i."\">");
            echo ("</div>");

        }

    ?>

但是我也希望用户能够点击例如：

<div id="small-button">New Attribute</div>

并创建另一组字段来定义属性。

我该怎么做？

提前致谢

4

2 回答 2

0

您将需要 JavaScript 来完成上述工作。body在您的 HTML 文档中，在元素的末尾添加以下script元素：

<script type="text/javascript">

var numberOfAttributes = 1;

function newAttributeFields(e) {
    // Creates the div
    var div = document.createElement('div');
    div.id = 'new-attribute';

    // Appends the fields
    div.innerHtml = '<h3>New attribute</h3><label for="attribute' + numberOfAttributes + '">Name</label><input id="attribute" type="text" name="attribute' + numberOfAttributes + '">';

    // Appends it to the body element
    document.getElementsByTagName('body')[0].appendChild(div);

    // Increments the number of attributes by one
    numberOfAttributes = numberOfAttributes + 1;
}

var smallButton = document.getElementById('small-button');

// When the 'small button' is clicked, calls the newAttributeFields function
smallButton.addEventListener('click', newAttributeFields, false);

</script>
于 2013-08-27T19:09:31.773 回答
0

在客户端使用 javascript/jquery：

var template = "<div class=\"new-attribute\">"
             + "<h3>New Attribute</h3>"
             + "<label for=\"attribute\">Name</label>"
             + "<input id=\"attribute\" type=\"text\" name=\"attribute\">"
             + "</div>";

$(document).ready(function() {
// The DOM has loaded
    $("#small-button").on('click', function() {
    // The user clicked your 'New Attribute' button
        // Append a new attribute to the <body> with `template` we defined above:
        $(body).append(template);
    });
});

注意：我改为id="new-attribute"因为class="new-attribute"会有超过 1 个。

于 2013-08-27T19:09:46.737 回答