不幸的是,在你發佈你的應用程序的照片之前,我開始寫這個答案。這些想法仍然相關,但我會更多地針對你的工作量身定做我的例子。對於那個很抱歉。
我會使用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