0

如果在按钮旁边添加一个按钮，我的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>

4

1 回答 1

0

这可能会让你开始......

您可以创建一个按钮或锚<a>链接（任何您喜欢的）来调用该函数：

<input type="button" onClick="addMoreForm('the parameters come here*')" value="Add More" />

或者

  • 您可以传递要复制的表单的formNameand ，同样是一些链接：formId
  • https://stackoverflow.com/a/921302/468763
  • https://stackoverflow.com/a/710347/468763

  • 一个使用纯 javacript 进行克隆的示例，我正在克隆您form1以创建一个容器，例如您将在其中创建form2的标签：addingMoreId<div>form2

    var 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 回答