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

我正在处理一个带有文本框的宠物和“添加宠物”按钮。每次单击该按钮时，应在原始文件下方显示一个附加文本框。在按钮上添加文本框点击使用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/

来源

2014-10-07 Beth Tanner

语法错误，'VAR副本= ;'是坏的JavaScript。 – Sukima 2014-10-07 01:59:32

这个问题有几个并发症。也就是说，添加DOM元素，附加事件处理程序，并将新的表单元素名称设置为唯一且与您的服务器脚本兼容。我只是让你知道。 – Sukima 2014-10-07 02:04:31

@苏基马，是的，我主要只是把它放在那里，所以那里会有东西。它显示了语法错误，当我决定尝试它以防万一。 – 2014-10-07 02:06:03

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

来源

2014-10-07 02:12:12 Sukima

你有错字，'docent' :-) – 2014-10-07 02:21:23

这有效，但我想我应该发布更多我的代码。我的实际页面有几个文本框，当我添加它时，附加框位于表单下方。有没有办法让额外的文本框显示在原始文本框之下。我把小提琴放在一起，让你更好地了解我的页面布局。 http://jsfiddle.net/a5m8nqwk/ – 2014-10-07 02:33:38

http://jsfiddle.net/g1qswted/1/ – Sukima 2014-10-07 02:38:50

类似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

来源

2014-10-07 02:09:12 akinuri

确切地说，除了因为我实际上在我的页面上有几个文本框，所以在表单下面添加了额外的文本框。是否有一种方法可以将附加文本字段直接显示在原始文本下方。我将把小提琴放在一起，以便更好地了解我的页面布局。 – 2014-10-07 02:23:51

http://jsfiddle.net/a5m8nqwk/ – 2014-10-07 02:27:06

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

回答

相关问题