Question

我正在使用带有宠物文本框的网络表单以及添加宠物＆＃34;按钮。每次单击该按钮时，应在原始按钮下方显示另一个文本框。

我假设这可以通过onclick事件完成，但我无法弄清楚如何让它工作。

这是我到目前为止的代码：

    <html>
    <head>
     <title>Project 4</title>
    </head>

    <body>
            <form name="myForm" onsubmit="return validateForm()">
            Pets: <input type="text" id="pets"> 
            <input type="button" id="addPet" value="Add Pet">
            <br>
            </form>
        <script type="text/javascript">
            function makeCopy() {
                var copy = <input type="text">;
                return copy;
            }
        </script>
    </body>
</html>

此外还有其他部分，但它们都不会影响我遇到的这个特定问题，所以没有看到需要包含完整的代码，因为它已经相当长了。

非常感谢任何建议。

更新：我在阅读完答案后意识到，我应该包含更多代码，以便让您更好地了解我的页面的实际布局。我的表单中有几个文本字段，需要在原始＆＃34;宠物＆＃34;正下方显示其他文本框。文本框。这是一个让我们更好地了解布局的小伙伴。 http://jsfiddle.net/a5m8nqwk/

Answer 1

类似于this？

<form name="myForm" id="myForm" onsubmit="return validateForm()">
    Pets: <br />
    <input type="text" id="pets" />
    <input type="button" id="addPet" value="Add Pet" />
    <br/>
</form>

document.getElementById("addPet").onclick = function() {
    var form = document.getElementById("myForm");
    var input = document.createElement("input");
    input.type = "text";
    var br = document.createElement("br");
    form.appendChild(input);
    form.appendChild(br);
}

修改：我建议使用表格来设置输入框的样式，使它们保持一致。 FIDDLE

Answer 2

您可以轻松地向DOM添加元素：

function createPetField() {
  var input = document.createElement('input');
  input.type = 'text';
  input.name = 'pet[]';
  return input;
}

var form = document.getElementById('myForm');
document.getElementById('addPet').addEventListener('click', function(e) {
  form.appendChild(createPetField());
});

使用javascript按钮单击添加文本框

2 个答案: