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

新手上路,请多包涵

我正在处理一个带有宠物文本框和“添加宠物”按钮的网络表单。每次单击该按钮时,都应在原始文本框下方显示一个附加文本框。

我假设这将通过一个 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>

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

非常感谢任何建议。

更新:我在阅读答案后意识到我应该包含更多我的代码,让你们更好地了解我页面的实际布局。我的表单中有几个文本字段,需要在原始“宠物”文本框的正下方显示额外的文本框。这是我拼凑的一个 jfiddle,可以让你们更好地了解布局。 http://jsfiddle.net/a5m8nqwk/

原文由 user2932587 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 320
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());
});

原文由 Sukima 发布,翻译遵循 CC BY-SA 3.0 许可协议

这样 的吗?

 <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);
}

编辑:我建议使用表格来设置输入框的样式,使它们保持一致。 小提琴

原文由 akinuri 发布,翻译遵循 CC BY-SA 3.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题