Question

我遇到了如何实现/构建表单的问题。这是概述。

表格的第一步是填写“责任中心”。但是，用户可以添加多个责任中心。那么下一步就是 - 每个负责中心都应该有一个或多个“账户代码”。在表单的最后，在提交之前，所有数据都应该是可编辑的。

结果应该是这样的：

|**responsibility center**||**account codes**|  
|        center 1         || account code 1  |  
|                         || account code 2  |  
|        center 2         || account code 1  |
etc..

我只需要了解如何构建/实现表单。

编辑1

这就是我尝试过的

第一步 1st step - responsibility center

第二步
2nd step - account codes

结果
result

编辑2 我已经知道如何添加多行（如第二步），我可以在第一步到第一步实现。所以这是我的问题：

我如何为每个责任中心添加帐户代码？
如果我尝试的不是一种实用的方法，那么我应该怎么做呢？

Answer 1

不幸的是，在您发布应用的图片之前，我开始写这个答案。这些想法仍然具有相关性，但我会更多地根据你的工作量身定制我的榜样。对不起。

我会使用jQuery和AJAX来完成工作。 jQuery用于处理向DOM插入新元素以及字段验证; AJAX验证RC之间没有重复的帐户代码，或者你有什么。就个人而言，我也会使用AJAX来处理表单提交，而不是使用更传统的<form action= method=>，因为它可以更好地控制进程，并且在我准备好之前不会将用户带到另一个页面。但是，最简单的描述<form>示例，您可以先构建它，然后根据需要将其更改为使用AJAX。

这里的例子是假设一个空白的平板（即我在写这个之前没有看过你的示例应用程序）：

首先，在你的jQuery / javascript中，你需要一个计数器来跟踪每个添加的RC。它可以位于HTML / PHP的<head>标记中，也可以存储在单独的文件中。如果你点击我的名字并查看我给出的其他AJAX答案，你会看到许多有用的例子。

<script type="text/javascript">
    $(document).ready(function() {
        var ctr = 0;
    });
</script>

在您的HTML中，您需要一个DIV，您将在其中附加每个RC DIV。您还需要一个链接/按钮/任何用户来启动新RC的创建。这将是一个简短的表格，甚至只是[RC标题]和[帐户代码]，带有链接/按钮/无论是创建另一个[帐户代码]字段和[完成/提交]按钮。

HTML：

<div id="container">
    <form action="yourprocessorfile.php" method="POST" id="myform"></form>
</div>
<input type="button" id="mybutt" value="Add New RC" />

JAVASCRIPT / jQuery（再次，在上面的（document）.ready（）部分中）：

$('#mybutt').click(function() {
    ctr++;
    var str = 'RC TITLE:<br><input id="RC-"'+ctr+' class="RC" type="text"><br>ACCOUNT CODE<br><input id="AC-"'+ctr+' class="AC" type="text"><br>';
    $('#myform').append(str);
});

当用户按[完成]时，再次使用jQuery检查每个[帐户代码]字段是否已完成。

$('#done').click(function() {
    $('.RC').each(function() {
        if ($(this).val() == '') {
            alert('Please complete all fields');
            $(this).focus();
            return false;
        }
    });
    $('.AC').each(function() {
        if ($(this).val() == '') {
            alert('Please complete all fields');
            $(this).focus();
            return false;
        }
    });
    $('#myform').submit();
});

编辑2 /问题1：

您可以通过以下方式添加链接到RC的新帐户代码：

您需要以某种方式为RC分配唯一的数据元素，例如递增ID
有一个添加新AC的链接
使用jQuery获取最近的RC元素的ID
使用.split()拆分数字部分（分配给var）
在创建AC时使用该号码

$（'。add_AC'）。click（function（）{//注意我使用了一个类，所以你可以为每个RC都有一个链接 var num = $（this）.parent（）。attr（'id'）。split（' - '）[1]; var str =''; }）;

在上面的例子中：

==＆GT;因为我使用了一个类，只要单击该类的任何元素，它就会触发。当然，在创建按钮时，必须将该类添加到按钮def，如：

<input type="button" class="add_AC" value="Add Account Code" />

num ==＆gt;使用链式jQuery方法，一个接一个地获取RC id的数字部分。

$（this）==＆gt;无论[添加帐户代码]按钮/链接/点击了什么。

.parent（）==＆gt;这可能适用于您的情况，也可能不正确。这是我们遍历DOM以找到RC元素的ID代码的部分，它看起来像这样：RC-3。您需要尝试：

.parent（）。亲本（）。兄弟（） .parent（）。兄弟（） .closest（） .prev（）或.next（）

使用这些选择器进行游戏，打开Dev Tools窗口。只需要几分钟就可以找到你的RC元素 - 或者提出另一个问题并发布你的HTML。

.attr（'id'）==＆gt;显然，在我们的案例RC-3

中返回ID的文本

.split（' - '）[1] ==＆gt;在一侧（零）创建一个RC的数组，在另一侧创建3的数组（1）

希望这一切能让您了解从哪里开始......

多步形式

1 个答案: