我正在使用带有用于宠物的文本框和“添加宠物”按钮的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] 删除。
我来说两句