javascript - 在一个网页中处理两种形式

Question

我有一个带有 div 区域的网页。在这个领域，可以有两种不同的形式。它看起来像这样:

表格 1:

<div id="data" ...>
    <form action="/action1" method="post">
        <label for="label1">ID</label>
        <input type="text" name="id" id="label1" value="" />
        <label for="label2">Name</label>
        <input type="text" name="name" id="label2" value="" />
        <label for="label3">Description</label>
        <input type="text" name="desc" id="label3" value="" />
        <label for="label4">Address</label>
        <input type="text" name="address" id="label4" value="" />
     </form>
</div>

表格 2:

<div id="data" ...>
    <form action="/action2" method="post">
        <label for="label1">ID</label>
        <input type="text" name="id" id="label1" value="" />
        <label for="label2">Firstname</label>
        <input type="text" name="first" id="label2" value="" />
        <label for="label3">Lastname</label>
        <input type="text" name="last" id="label3" value="" />
        <label for="label4">Address</label>
        <input type="text" name="address" id="label4" value="" />
        <label for="label5">eMail</label>
        <input type="text" name="mail" id="label5" value="" />
     </form>
</div>

所以有两种不同的形式。这些值将使用 jQuery 设置(Ajax 调用后端)。

处理这两种形式的最佳方式是什么？我应该创建两个仅包含表单的文件并在需要时加载表单吗？ (如果有人点击按钮 1，则需要表格 1，如果有人点击按钮 2，则需要表格 2 - 事件在客户端处理)。或者我应该将两个表单都放入单个 HTML 文件中并启用或禁用表单吗？

Answer 1

没有什么能阻止您在 HTML 中同时拥有两种形式并有条件地隐藏/显示您想要激活的形式。最好的办法是给每个表单(或其包含的 div)一个唯一的 ID，并使用它来使用 jQuery 显示/隐藏。