Hi Everyone,
I've got an online form that is broken up into several different sections and some of these sections will ask questions where multiple values can be supplied. For instance someone's address or information about their education. Just for simplicity I'll focus on someone's address and I want to collect the following information:

Address Line 1,
Address Line 2,
Address Line 3,

Now while on the same form I would like to make it available so they can supply up to 3 addresses. I don't want to list these questions out three times, just allow them to add another address if they choose to do so.

What I have done so far is create a class called Address and another class to handle the collection of Addresses and then used AJAX to send only that information back to the backend to store this in a session variable until the user submits it with the rest of the application. It doesn't seem the best of practices and wanted to know if anyone has some suggestions for improving it.


Since no one else has answered your question I will tell you how I would do this. I would not use a session variable. Instead I would use straight javascript, its cleaner. I would put Address line 2 and Adress Line 3 in thier own div tags and set the visibility:hidden;. I would then use javascript to make them visible if the user wants to add more addresses. See the code below

<input id="btnAdd" type="button" value="Add Address" onclick="addAdress();" />
    <div id="add2" style="visibility:hidden;">
        Address Line 2    
    <div id="add3" style="visibility:hidden;">
        Address Line 3    

Then add this code to your head

function addAdress() {
        var address2 = document.getElementById('add2').style.visibility;        
        if (address2.toLowerCase() == "visible")
            document.getElementById('add3').style.visibility = "visible";
            document.getElementById('add2').style.visibility = "visible";

How if a user clicks the btnAdd button the javascript will run and will make
<div id="add2" visible. If the user clicks the button again it will make
<div id="add3" visible.

Hope this helps

I might have confused the question by not clarifying what I meant about adding additional addresses. The address line 1, 2 and 3 are components of an individual address. Also the address was just an example of an object to collect. It can be anything that requires several pieces of information such as something simple as a phone number and the country the number belongs too or something complex as an address where it can have several questions. I'm wondering if there is a methodology for collecting similar information multiple times on the same form. The user enters in the information for one address that is their home address and then clicks on a button to save that to a collection and then allows them to enter in a work address.

What I have done is created an address class that stores the information in my previous post and a collection class that implements a generic collection class that can manage several addresses. This collection class is stored in a session variable until the entire form is being submitted and then persisted to a database. Just wondering if anyone has developed something similar and have any comments on best practices.