1

我对如何实现/构建表单有疑问。这是概述。

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

结果应该是这样的： 

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

我只需要一些关于如何构建/实现表单的想法。

编辑 1

这是我尝试过的

第一步 第一步——责任中心

第二步
第二步 - 帐户代码

结果
结果

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

  1. 如何为每个责任中心添加帐户代码？
  2. 如果我尝试过的不是实现它的实用方法，那我该怎么做呢？
4

1 回答 1

2

不幸的是，在您发布您的应用程序图片之前，我开始写这个答案。这些想法仍然是相关的，但我会根据你正在做的事情来定制我的例子。对于那个很抱歉。

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

此处的示例假设一个空白（即在编写此之前我没有看到您的示例应用程序）：

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

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

在您的 HTML 中，您需要一个 DIV，您将在其中附加每个 RC DIV。您还需要一个链接/按钮/任何用户来启动新 RC 的创建。这将是一个简短的表格，甚至只是 [RC Title] 和 [Account Code] 以及一个链接/按钮/任何东西来创建另一个 [Account Code] 字段和一个 [Done/Submit] 按钮。

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);
});

当用户按下 [Done] 时，再次使用 jQuery 检查每个 [Account Code] 字段是否已完成。

$('#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）

  • 创建交流电时使用该号码

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

在上面的例子中：

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

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

num ==> 使用链接的 jQuery 方法一个接一个地获取 RC 的 id 的数字部分。

$(this) ==> 无论点击哪个 [添加帐户代码] 按钮/链接/任何内容。

.parent() ==> 这对于您的情况可能正确也可能不正确。这是我们遍历 DOM 以找到 RC 元素的 ID 代码的部分，如下所示RC-3：您将需要尝试：

.parent().parent() .sibling() .parent().sibling() .closest() .prev() 或 .next()

使用这些选择器，打开开发工具窗口。只需几分钟即可找到您的 RC 元素——或者提出另一个问题并发布您的 HTML。

.attr('id') ==> 很明显，返回ID的文本，在我们的例子中RC-3

.split('-')[1] ==> 创建一个数组，RC一侧（零），另一侧3（1）

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

于 2013-07-29T16:04:37.080 回答