Dynamic Forms Help - How Do I Create These?

sonesay

Jul 14 2007, 09:15 AM

Hi I have a page with a form with some input fields. When it is submited it goes to the comfirmation page. I want the form to have an input / button where if the user can enter/add more fields for input.

i.e

<form>
<input 0>
<input 1>

<input 2> or <button> <submit> --> (update this form with more input fields)

<input ..>
<input ..>

<submit button> --> (submit to confirm.php)
</form

I want the user to be able to enter a value or have a <add form> button to be able to add more fields. I've tried searching the web but havent been able to find anything that works.

ghostrider

Jul 15 2007, 04:33 PM

I actually worked with this concept just a couple days ago working for one of my clients. If you have experience with PHP i'll be glad to explain to you how I did.

reconraiders

Jul 15 2007, 04:48 PM

Use javascript. You can just set some of the input fields to invisible through CSS (the ones you don't want to show up at first). Then use javascript to change the visibility to visible when you click the button or whatever. If you want I can write up a whole script for you.

sonesay

Jul 17 2007, 09:09 AM

The problem with creating the fields and then showing them later is they are fix number of fields. What I am after is the user to be able to select their own number of fields limited from 0-16 fields. I Guess since i would only be using 0-16 fields max that method of creating all 16 then showing them later would work. I think having a button to add or remove those additional input fields is what I am after. Is it possible? Also after being submitted I would need to retain and show what the user submitted in the confirm.php before being processed into the database.

If its not too much trouble I would like to see both your examples so I can decide which one is more suited to what I want. Thanks for your help guys.

reconraiders

Jul 19 2007, 12:09 AM

I made a little something real quick. I'm not very good with javascript, so I'm sure the script could be made more efficient. But I think this is what you wanted.

See a working example

The javascript source

CODE

function addField() {
    id = document.getElementById('next');
    cnt = id.value;
    if(parseInt(cnt) == 16) {
        btn = document.getElementById('add');
        btn.disabled = true;
    }
    id.value = (parseInt(cnt)+1);
    field = 'field'+String(cnt);
    el = document.getElementById(field);
    el.style.display = 'block';
}

The CSS to make the fields invisible initially

CODE

#field6, #field7, #field8, #field9, #field10, #field11, #field12, #field13, #field14, #field15, #field16 {
display:none;
}

The XHTML for the form

CODE

<form action="" method="post">
<div id="field1">Input 1 <input type="text" id="input1" name="input1" /></div>
<div id="field2">Input 2 <input type="text" id="input2" name="input2" /></div>
<div id="field3">Input 3 <input type="text" id="input3" name="input3" /></div>
<div id="field4">Input 4 <input type="text" id="input4" name="input4" /></div>
<div id="field5">Input 5 <input type="text" id="input5" name="input5" /></div>
<div id="field6">Input 6 <input type="text" id="input6" name="input6" /></div>
<div id="field7">Input 7 <input type="text" id="input7" name="input7" /></div>
<div id="field8">Input 8 <input type="text" id="input8" name="input8" /></div>
<div id="field9">Input 9 <input type="text" id="input9" name="input9" /></div>
<div id="field10">Input 10 <input type="text" id="input10" name="input10" /></div>
<div id="field11">Input 11 <input type="text" id="input11" name="input11" /></div>
<div id="field12">Input 12 <input type="text" id="input12" name="input12" /></div>
<div id="field13">Input 13 <input type="text" id="input13" name="input13" /></div>
<div id="field14">Input 14 <input type="text" id="input14" name="input14" /></div>
<div id="field15">Input 15 <input type="text" id="input15" name="input15" /></div>
<div id="field16">Input 16 <input type="text" id="input16" name="input16" /></div>
<input type="hidden" id="next" value="6" />
<div><input type="button" id="add" name="add" value="Add a Field" onclick="addField();" /></div>
<br />
<br />
<div><input type="submit" value="Submit" /></div>
</form>

The hidden input called "next" keeps track of the counter. Each time you click the add field button javascript will change the display property of the current element from "none" to "block". Then it will increment the value of the hidden input called "next". Like I said, this can probably be improved. I just made it real quick.

jlhaslip

Jul 19 2007, 04:30 AM

Awesome little script. I might just use this myself ... Thanks for helping out... that is what i like about the Trap17 Forums. Everyone chips in to assist one another.

sonesay

Jul 19 2007, 10:34 AM

Thanks for that awsome example. Javascript is so awsome I need to learn more about it.

Lyon2

Jul 19 2007, 11:45 AM

Making web forms for your web application, either swebsite, blog, forum, myspace site or whatever, is a ask of the past, meaning, any experienced web designer and even any web developer, do not make web forms, programming them by hand, anymore, now we do it with the proper and right programs/tools.

There are an enourmous amount of free and not free tools, which one or two you could and should buy, to create your web forms, either in cgi/perl, or in php with mysql/ms sql support, even with xml support too, and i know that all, i know about it because i have almost all the best programs of the internet to create awesome and functional and cool web forms. I know what i am talking about.

I am not about to give you the links to download the programs, i am not at home to do that, but, i know the names of the programs, and later, if you would like, i could share those links or even better, i can upload them to my server for you and all to download.

The best programs to create web forms are (freeware and shareware):

Coffeecup web forms creator
Creates flash web forms with dynamic languages, namely, php and xml plus the html files and txt files too, you can create just awesome web forms, here is an example i created for my website visitors:
http://free-flash-clocks.trap17.com/contact.html

Web form designer
Creates web forms with cgi/perl support, rather spectacular this tool to create cgi web forms.

Visual form mail
Creates also cgi web forms, pretty useful too in fact.

Asp Data Form
This one is awesome for asp users, it creates, with a awesome program interface, asp forms with microsoft access (*.mdb) databases support, it is so easy that you will optimize your work a lot with this tool, and it creates asp web forms completely free of errors.

Fast Forms
It creates web forms with support for php, cgi and perl, xml, and with support for integrating a database server like mysql, ms sql and others, this one is very complete.

There are more, at least 5 more which i have installed on my computer, and which i tryed and they all work just fine.

Get the download links by asking google where they are, they are very easy to find, and perhaps you will find even more cool tools now.

reconraiders

Jul 20 2007, 12:13 AM

QUOTE(Lyon2 @ Jul 19 2007, 07:45 AM)

I don't think that's totally accurate. I know lots of programmers who always hand code everything. I know I always do too. I use dreamweaver for the color coding and for the quick complete things for tags. But other than those two little tricks I do everything by hand.

ADD REPLY / Got an Opinion!	Remove these ADs!	RAPID SEARCH!	Free Web Hosting	[X]
Express your Opinions, Thoughts or Contribute more info. to help others. Ask your Doubts & Queries to get answers, So that "Together We can help others!"	Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.		500MB Space No Ads, CPanel, FTP, PHP, MySQL, EMails - 100% FREE