How to create dynamic form in asp

[vkdixit]

Hi all,
Actually i want a dynamic form, which has some contact information about our clients. Like..Phone no (more than 1), email address(more than 1) and save it to the corresponding database.

[Old Pedant]

What is dynamic about it???

You mean you want them to be able to add as many phone numbers or email addresses as they want? [If so, you will want to use JavaScript--*not* ASP code--to "extend" the form fields.]

Is your database properly designed to handle that? [That is, if you really allow any number of email addresses, then there needs to be a separate table just for them.]

[vkdixit]

What is dynamic about it???

You mean you want them to be able to add as many phone numbers or email addresses as they want? [If so, you will want to use JavaScript--*not* ASP code--to "extend" the form fields.]

Is your database properly designed to handle that? [That is, if you really allow any number of email addresses, then there needs to be a separate table just for them.]

Yes exactly, but how will i do this by java script...I have properly designed a table for the email as well as phone no.

Table design for email:
autoid, client_id, email_add, email_type(home, work)
and design table for phone same as email.

can u help me with this.....

[Old Pedant]

Well, if you are willing to put a reasonable upper limit on the number of emails and phones per users, the easiest way is to create the <FORM> with that number of fields and then simply *hide* the extra ones until asked for by the user.

Dirt simple example, off the top of my head:

<script>
var emCount = 1;
var phCount = 1;

function addEMail( )
{
if ( ++emCount <= 5 )
document.getElementById("EMAIL_" + emCount).style.display="block";
}
function addPhone( )
{
if ( ++phCount <= 5 )
document.getElementById("PHONE_" + phCount).style.display="block";
}
</script>
...
<form ...>
... fields ...
<input name="EMAIL_1" id="EMAIL_1">
<input name="EMAIL_2" id="EMAIL_2" style="display: none;">
<input name="EMAIL_3" id="EMAIL_3" style="display: none;">
<input name="EMAIL_4" id="EMAIL_4" style="display: none;">
<input name="EMAIL_5" id="EMAIL_5" style="display: none;">
...
<input name="PHONE_1" id="PHONE_1">
<input name="PHONE_2" id="PHONE_2" style="display: none;">
<input name="PHONE_3" id="PHONE_3" style="display: none;">
<input name="PHONE_4" id="PHONE_4" style="display: none;">
<input name="PHONE_5" id="PHONE_5" style="display: none;">
...
</form>

See? Keep it dirt simple. For better appearance, you might want to wrap the <INPUT>s with a <DIV> and put the ID on the div instead of the <INPUT>. Up to you.

[vkdixit]

Well, if you are willing to put a reasonable upper limit on the number of emails and phones per users, the easiest way is to create the <FORM> with that number of fields and then simply *hide* the extra ones until asked for by the user.

Dirt simple example, off the top of my head:

<script>
var emCount = 1;
var phCount = 1;

function addEMail( )
{
if ( ++emCount <= 5 )
document.getElementById("EMAIL_" + emCount).style.display="block";
}
function addPhone( )
{
if ( ++phCount <= 5 )
document.getElementById("PHONE_" + phCount).style.display="block";
}
</script>
...
<form ...>
... fields ...
<input name="EMAIL_1" id="EMAIL_1">
<input name="EMAIL_2" id="EMAIL_2" style="display: none;">
<input name="EMAIL_3" id="EMAIL_3" style="display: none;">
<input name="EMAIL_4" id="EMAIL_4" style="display: none;">
<input name="EMAIL_5" id="EMAIL_5" style="display: none;">
...
<input name="PHONE_1" id="PHONE_1">
<input name="PHONE_2" id="PHONE_2" style="display: none;">
<input name="PHONE_3" id="PHONE_3" style="display: none;">
<input name="PHONE_4" id="PHONE_4" style="display: none;">
<input name="PHONE_5" id="PHONE_5" style="display: none;">
...
</form>

See? Keep it dirt simple. For better appearance, you might want to wrap the <INPUT>s with a <DIV> and put the ID on the div instead of the <INPUT>. Up to you.

Actually if i want to add 15 or 20 so its a problem...
i want dynamically add the textboxes after click some text like:
add another

[Old Pedant]

Well, it's still a JavaScript question, not an ASP question.

You can do it a hacky way that works only in MSIE or you can do it the right way using createElement( ). Look in the DOM documents for that method.

[whammy]

I would avoid depending upon javascript for this type of input for many reasons.

I suggest a simpler solution, such as having the user input multiple email addresses delimited by a comma.

i.e. "Please separate multiple email addresses using a comma (,)."

You could then validate the data client and/or server-side by splitting the input into an array. Just my 2 cents.

I've stored a lot of data in arrays like this, it's much easier on the programmer that way, at least in my experience. ;)

[Old Pedant]

I'm afraid you are fighting a losing battle on this one, Whammy. The modern way to do this is clearly to allow the user to click on an "Add address" button (or the like) as many times as he/she pleases.

Most designers nowadays frown very heavily on depending on users to enter any kind of delimited values. If I'd tried it with last designer I worked with, he would have had a hairy fit!

Actually, on the backend, processing the form, it's better, anyway. Because surely you are going to use a many-to-one table in the DB to save these multiple values. And so looping through the form fields storing one per record becomes easy to do.

[whammy]

Perhaps you are correct, I'd like to see it in action. ;)

I'm not fighting a battle here, just going by my own past experience. I still think the K.I.S.S. rule is law, in any case. I always admit if I'm wrong. :)

[Old Pedant]

Well, the code I showed--having the additional entry fields hidden and showing them as needed--is by far the simplest way to do this. And it works in all browsers. Even if you had, say, an all-text browser from 1998 or so, all that would happen is that the user would see all the fields, because of course the style "display: hidden;" wasn't supported in those browsers.

But it's not that hard to do it using the DOM. You just have to use document.createElement( ) and then attach the new elements in the proper place in the "tree" of objects. Pure JS code, not relevant to ASP per se, so I won't belabor the point in this forum.

[whammy]

Old Pedant said:
Well, if you are willing to put a reasonable upper limit on the number of emails and phones per users

I think I'd pose that question to the client before worrying about adding programming time which likely won't be necessary - that's all I'm trying to get at. Time is money!

My suggestion of using delimiters was from a past intranet standpoint, with users already familiar with it, and perhaps not relevant to this discussion - I definitely wouldn't try that on an average internet user.

However, from realistic standpoint, I just don't see where people are ever going to enter multiple "contact" email addresses or phone numbers, and if they do it is likely going to be very minimal, no more than 2-3.

I can see where createElement() and your other solution with hidden fields (which I have made use of before myself) could definitely be applicable to other situations though!