Multi-step form

Question

i'm having a problem on how should i implement/build my form. here's the overview.

the first step of the form is to fill up the "Responsibility Center". however, the user can add multiple responsibility center. then the next step would be - each responsibility center added should have one or many "account codes". at the end of the form, before submitting it, all the data should be editable.

the result should be like this:

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

i just need some idea on how the form should be built/implemented.

EDIT 1

This is what i've tried

1st step 第一步 - 责任中心

2nd step
第二步 - 帐户代码

result

EDIT 2 i already know how to add multiple rows (like on the 2nd step) and i can implement that already on the first to the 1st step. so here are my questions:

how can i add account codes per responsibility center?
if what i've tried is not a practical way to implement it, then how should i do it?

Answer 1

Unfortunately, I began writing this answer before you posted the pics of your app. The ideas are still relevant, but I would have tailored my example more to what you are doing. Sorry about that.

I would use jQuery and AJAX to get the job done. jQuery to handle insertion of new elements to the DOM, and for field validation; AJAX to verify that no account codes are duplicated between RCs, or what have you. Personally, I would also use AJAX to handle the form submission instead of using the more traditional <form action= method=> because it gives greater control over the process and doesn't whisk the user off to another page before I am ready. However, it is easiest to describe the <form> example, and you can first build that and then change it over to using AJAX if you want.

The example from here is assuming a blank slate (ie I had not seen your sample app before writing this):

First, in your jQuery/javascript, you need a counter to keep track of each RC added. This can be in the <head> tags of your HTML/PHP, or it can be stored in a separate file. If you click on my name and look at other AJAX answers I've given, you'll see many useful examples.

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

In your HTML, you need a DIV into which you will append each RC DIV. You also need a link/button/whatever for user to initiate creation of a new RC. This would be a brief form, even just [RC Title] and [Account Code] with a link/button/whatever to create another [Account Code] field and a [Done/Submit] button.

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 (again, inside the (document).ready() section above):

$('#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);
});

When user presses [Done], use jQuery again to check that each [Account Code] field has been completed.

$('#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();
});

Edit 2 / Question 1:

You can add new account codes linked to an RC by:

You need to somehow assign a unique data element to the RC, such as an incrementing ID
have a link for adding the new AC
use jQuery to get the ID of the nearest RC element
use .split() to split-off the numerical portion (assign to a var)
use that number when creating your AC
$('.add_AC').click(function() { //Note I used a class, so you can have a link for each RC var num = $(this).parent().attr('id').split('-')[1]; var str = ''; });

In the above example:

==> Because I used a class, it will fire whenever ANY element with that class is clicked. Of course, when you create the button, you must add that class to the button def, as:

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

num ==> uses chained jQuery methods to, one-after-another, get the number portion of the RC's id.

$(this) ==> whichever [Add Account Code] button/link/whatever was clicked on.

.parent() ==> This may or may not be correct for your situation. This is the part where we traverse the DOM to find the RC element's ID code, which would look like this: RC-3 . You will need to experiment with:

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

Play with these selectors, with Dev Tools window opened. It should only take a handful of minutes to find your RC element -- or ask another question and post your HTML.

.attr('id') ==> Obviously, returns the text of the ID, in our case RC-3

.split('-')[1] ==> Creates an array with RC on one side (zero), and 3 on the other (1)

Hopefully this all gives you some idea of where to begin...

Multi-step form

Question

1 answers

solution1
2 2013-07-29 16:04:37

Multi-step form

Question

1 answers

solution1 2 2013-07-29 16:04:37

solution1
2 2013-07-29 16:04:37