在按钮上添加文本框点击使用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/
您可以轻松地元素添加到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());
});
你有错字,'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:23:51
http://jsfiddle.net/a5m8nqwk/ – 2014-10-07 02:27:06
语法错误,'VAR副本= ;'是坏的JavaScript。 – Sukima 2014-10-07 01:59:32
这个问题有几个并发症。也就是说,添加DOM元素,附加事件处理程序,并将新的表单元素名称设置为唯一且与您的服务器脚本兼容。我只是让你知道。 – Sukima 2014-10-07 02:04:31
@苏基马,是的,我主要只是把它放在那里,所以那里会有东西。它显示了语法错误,当我决定尝试它以防万一。 – 2014-10-07 02:06:03