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

用户2932587

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

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

还有其他一些内容,但是它们都没有影响到我遇到的这个特定问题,因此由于相当长,因此没有必要包括完整的代码。

任何建议,不胜感激。

更新:在阅读答案后,我意识到我应该包含更多的代码,以便让大家更好地了解页面的实际布局。我的表单中有几个文本字段,需要其他文本框显示在原始“宠物”文本框的正下方。这是我凑在一起的小提琴,目的是让大家对布局有个更好的了解。http://jsfiddle.net/a5m8nqwk/

寿木

您可以轻松地将元素添加到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());
});

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

在按钮上单击,通过文本框javascript循环

来自分类Dev

在按钮单击和选项上添加新的div以选择显示文本框的选项

来自分类Dev

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

来自分类Dev

使用 C# WPF 在按钮单击事件上使用文本框值更新 SQL 条目

来自分类Dev

按钮上的Java单击可为文本框添加值

来自分类Dev

我正在尝试使用JavaScript在按钮的onclick的有序列表中添加文本框,并在添加文本框时增加ID名称

来自分类Dev

jQuery仅在先前div的文本框值不为空的情况下,在按钮单击上添加新的div

来自分类Dev

在按钮上单击INSERT从表格内的多个控件插入多个(文本框和标签)文本

来自分类Dev

如何在按钮上使用Jquery删除文本框

来自分类Dev

在按钮上单击ng js的ng-repeat表行中突出显示文本框

来自分类Dev

如何在单击按钮时在div上添加图像和文本框

来自分类Dev

VB .net 在按钮单击时更改所选文本框的文本

来自分类Dev

单击Angular JS中的按钮添加新文本框

来自分类Dev

单击按钮添加新标签和文本框

来自分类Dev

使用单个按钮单击事件的多个文本框值添加

来自分类Dev

清除表单单击按钮上的文本框

来自分类Dev

清除表单单击按钮上的文本框

来自分类Dev

如何获得单击按钮上的文本框值?

来自分类Dev

在按钮上单击,我想使用JavaScript将文本字段的值设置为零

来自分类Dev

单击按钮从表单上的多个文本框中清除文本框

来自分类Dev

在单选按钮的特定单击上使用jquery在mvc中启用文本框/下拉列表

来自分类Dev

在按钮上添加数字单击使用jQuery吗?

来自分类Dev

当使用JavaScript中的单个功能单击其他单选按钮时,如何禁用文本框?

来自分类Dev

单击按钮时使用文本框值更新面板

来自分类Dev

在按钮上单击ng-repeat时将重点放在文本框上

来自分类Dev

在使用jquery,javascript和html的单击浏览按钮上的进度栏上的文本框中显示文件上载百分比

来自分类Dev

我想使用python KIVY在按钮上添加文本

来自分类Dev

如何使用JavaScript在按钮单击上显示内容

来自分类Dev

单击按钮时显示文本框

Related 相关文章

  1. 1

    在按钮上单击,通过文本框javascript循环

  2. 2

    在按钮单击和选项上添加新的div以选择显示文本框的选项

  3. 3

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

  4. 4

    使用 C# WPF 在按钮单击事件上使用文本框值更新 SQL 条目

  5. 5

    按钮上的Java单击可为文本框添加值

  6. 6

    我正在尝试使用JavaScript在按钮的onclick的有序列表中添加文本框,并在添加文本框时增加ID名称

  7. 7

    jQuery仅在先前div的文本框值不为空的情况下,在按钮单击上添加新的div

  8. 8

    在按钮上单击INSERT从表格内的多个控件插入多个(文本框和标签)文本

  9. 9

    如何在按钮上使用Jquery删除文本框

  10. 10

    在按钮上单击ng js的ng-repeat表行中突出显示文本框

  11. 11

    如何在单击按钮时在div上添加图像和文本框

  12. 12

    VB .net 在按钮单击时更改所选文本框的文本

  13. 13

    单击Angular JS中的按钮添加新文本框

  14. 14

    单击按钮添加新标签和文本框

  15. 15

    使用单个按钮单击事件的多个文本框值添加

  16. 16

    清除表单单击按钮上的文本框

  17. 17

    清除表单单击按钮上的文本框

  18. 18

    如何获得单击按钮上的文本框值?

  19. 19

    在按钮上单击,我想使用JavaScript将文本字段的值设置为零

  20. 20

    单击按钮从表单上的多个文本框中清除文本框

  21. 21

    在单选按钮的特定单击上使用jquery在mvc中启用文本框/下拉列表

  22. 22

    在按钮上添加数字单击使用jQuery吗?

  23. 23

    当使用JavaScript中的单个功能单击其他单选按钮时,如何禁用文本框?

  24. 24

    单击按钮时使用文本框值更新面板

  25. 25

    在按钮上单击ng-repeat时将重点放在文本框上

  26. 26

    在使用jquery,javascript和html的单击浏览按钮上的进度栏上的文本框中显示文件上载百分比

  27. 27

    我想使用python KIVY在按钮上添加文本

  28. 28

    如何使用JavaScript在按钮单击上显示内容

  29. 29

    单击按钮时显示文本框

热门标签

归档