不幸的是,在你发布你的应用程序的照片之前,我开始写这个答案。这些想法仍然相关,但我会更多地针对你的工作量身定做我的例子。对于那个很抱歉。
我会使用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新帐户代码:
在上面的例子:
==>因为我使用的类,每当点击与该类任何元素将火。当然,当你创建按钮,您必须将类添加到该按钮闪避,如:
<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)
希望这一切给你从哪里开始的一些想法...
请告诉我们你已经尝试过.. – DevlshOne
你有多个这里的问题。我建议提出具体的问题,否则你会收到非常普遍的答案。 – gibberish