Question

每次用户点击+add experience链接时，我都需要重新生成一些输入。这些是表单中的输入：

<label for="company_name">Company Name</label>
<input type="text" class="form-control" id="company-name">
<label for="job-title">Job Title</label>
<input type="text" class="form-control" id="job-title">

这是每次点击时都应生成前一个html的锚标记：

<a href="test.php">+ Add Experience</a>

所以如果用户点击+add experience 3次，html应该在同一页面重复3次

我不知道我是否应该使用某个功能或将html包含在新文件中，以及如何做到这一点！请帮助我，并提前致谢

Answer 1

正如你所说，你的JavaScript知识有点弱，没问题！这不是太难，看看下面这个例子。这就是JavaScript正确完成的方式。在PhP中尝试这100％是低效的。

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("member").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("container");
            // Clear previous contents of the container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode("Member " + (i+1)));
                // Create an <input> element, set its type and name attributes
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);
                // Append a line break 
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

此示例由：https://stackoverflow.com/users/851811/xavi-l%c3%b3pez @ xavi-lópez

提供

Answer 2

您可以采取以下几种方法：

使用js函数动态生成html，并将其附加到DOM。
在原始html文件中存储包含必要输入的隐藏html模板。单击“添加”按钮时，使用隐藏模板上的Node.cloneNode（）并将新克隆的节点附加到DOM。（确保更新您克隆的元素的id属性，我们不需要重复的ID）。
从服务器请求html模板，并将响应附加到DOM。这可以通过jquery / ajax完成。（即$ .load（网址，数据，完整）http://api.jquery.com/load/）

如何使用锚标记多次包含文件

2 个答案: