如果在按钮旁边添加一个按钮，我的index.jsp外观将如何，按下该按钮时将显示另一个与前一个相同的搜索表单（如下所示），但具有不同的参数或字段，例如等。示例：Add moreProcessageyear<!-- how will I change the cloned form instead of displaying Car reg: <input type="text" name="car" /> to show age: <input type="text" name="age" /> --> <!-- how will I change the cloned form instead of displaying <input type="button"
onClick="addMoreForm('age')" value="Add More" /> to show <input type="button"
onClick="delete('age')" value="delete" /> -->
</div>
问问题
4026 次
1 回答
0
这可能会让你开始......
您可以创建一个按钮或锚<a>链接（任何您喜欢的）来调用该函数：
<input type="button" onClick="addMoreForm('the parameters come here*')" value="Add More" />
- 该方法可能类似于：formName、fieldName、fieldType、formAction、formMethod 等
parameters通过javascript 创建表单，这里有一些在 javascript 中创建元素的链接（是一个元素 :-)）：addMoreForm<form> - http://www.dustindiaz.com/add-and-remove-html-elements-dynamically-with-javascript/
- 与 jQuery：jQuery document.createElement 等效？
- https://stackoverflow.com/a/327068/468763
- https://stackoverflow.com/a/867981/468763
或者
- 您可以传递要复制的表单的
formNameand ，同样是一些链接：formId - https://stackoverflow.com/a/921302/468763
- https://stackoverflow.com/a/710347/468763
一个使用纯 javacript 进行克隆的示例，我正在克隆您
form1以创建一个容器，例如您将在其中创建form2的标签：addingMoreId<div>form2var form2 = document.getElementById("form1").cloneNode(true); form2.setAttribute("name", "form2"); form2.setAttribute("id", "form2"); document.getElementById("addingMoreId").appendChild(form2);
PS：为了与浏览器兼容，您可以使用jQuery或YUI之类的 javascript 库。
编辑：这是一个示例代码，您可以在此代码中进行很多改进，也可以使其更通用。
<input type="button" onClick="addMoreForm('age')" value="Add More" />
<div id="addingMoreId">
<!-- This is empty, the form2 will be created here -->
<!-- So it is not required that the form be present here -->
</div>
<!-- This script tag goes into the <head> tag -->
<script>
// this function will create the form2 in the div
// you agree or not, you need to learn a lot more about Javascript :-)
function addMoreForm(fieldName) {
var form2 = document.getElementById("form1").cloneNode(true);
form2.setAttribute("name", "form2");
form2.setAttribute("id", "form2");
document.getElementById("addingMoreId").appendChild(form2);
form2.car.setAttribute("name", fieldName); // one way to access the element inside a form: "form2.car", where "car" is the name of the element created inside the form2
form2.elements[fieldName].setAttribute("id", fieldName); // another way to access the element inside a form: "form2.elements["car"]"
}
</script>
让我们希望这会有所帮助:-)
于 2012-08-07T13:24:39.307 回答