2013-07-29 98 views
0

我有一个问题,我应该如何实现/建立我的表单。这里是概述。多步骤形式

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

的结果应该是这样的:

|**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

EDIT 2 我已经知道如何添加多行(如在第2步),我可以实现已经在第一至第1步。所以这里是我的问题:

  1. 我如何添加每个责任中心的帐户代码?
  2. 如果我试过的不是一种实际的方法来实现它,那么我应该怎么做呢?
+0

请告诉我们你已经尝试过.. – DevlshOne

+0

你有多个这里的问题。我建议提出具体的问题,否则你会收到非常普遍的答案。 – gibberish

回答

2

不幸的是,在你发布你的应用程序的照片之前,我开始写这个答案。这些想法仍然相关,但我会更多地针对你的工作量身定做我的例子。对于那个很抱歉。

我会使用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的(上文同样,(文件。就绪内侧)()部分):

$('#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获取ID最近的RC元件
  • 使用.split()分裂断数字部分(分配给VAR)
  • 使用该号码创建AC

    $( 'add_AC')。点击(函数() {//注意我使用了一个类,所以你可以为每个RC有一个链接 var num = $(this).parent()。attr('id')。split(' - ')[1]; var str =''; });

在上面的例子:

==>因为我使用的类,每当点击与该类任何元素将火。当然,当你创建按钮,您必须将类添加到该按钮闪避,如:

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

NUM ==>使用jQuery的链接方法,一个后另,得到的数字部分RC的ID。

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

.parent()==>这可能会也可能不会正确适合您的情况。这是我们遍历DOM来查找RC元素的ID代码的部分,它看起来像这样:RC-3。您将需要进行实验:

.parent()父() .sibling() .parent()兄弟() .closest() .prev()或的.next()

使用这些选择器,打开Dev Tools窗口。只需要几分钟就能找到您的RC元素 - 或者提出另一个问题并发布您的HTML。

.attr( 'ID')==>显然,返回ID的文本中,在我们的情况下RC-3

.split( ' - ')[1] ==>创建具有RC阵列上一侧(零),3对其他(1)

希望这一切给你从哪里开始的一些想法...

+0

我首先道歉,因为在开始时没有说清楚。你的回答给了我有用的提示。特别是不使用'action = method ='属性。 – addykha

+0

谢谢,如果我的回答很有用,请注意它(如果您有15位代表),并且如果这是最好的答案,请将其标记为这样。请记住,您可以在同一问题上提出尽可能多的问题,每个问题都集中在问题的不同部分。 – gibberish

+0

我会尝试使用你的建议。谢谢! – addykha