New demo for dynamic form fields
September 18, 2009 | In: General
A few days ago I wrote a post to demonstrate how I was adding form fields dynamically with the use of AJAX and Mootools.
I have now created a new demo that further demonstrates the flexibility of this system.
This demo includes a select box from which you can select an optional question type.
If you choose the “Multiple choice” option it then loads a default set of 3 options to which, at the click of a button, more can be added.
As I mentioned in the last post, all the form fields are defined in an extertanal php file which is called via ajax. This way it is easier to manage than adding the form elements to the javascript, especially if you want to call the form field options (such as for a select list) dynamically from a database.
Availability Calendar.
6 Responses to New demo for dynamic form fields
Fabio M. Costa
September 18th, 2009 at 18:45
wow, impressive, really. I liked how you structured your form.
Chris
September 18th, 2009 at 19:00
Thanks Fabio
Still wondering how/when to make the mootools part into a class – I’ll get round to it some day.
Craig
February 17th, 2010 at 12:06
Hi I would love to use this version of the dunamic form but not sure where the code is for this new demo??
Chris
February 17th, 2010 at 12:25
Hi,
Just take a look at the source code and specifically the js code (dynamic-form.js). In there you will see the javascript code that calls the php ajax file to add the form elements.
That php form, in it’s simplest state, simply prints out the form field type as requested by the javsascript.
Chris
Reminder to me – convert this code into a Mootools Class and return form fields as json data.
Craig Smith
February 17th, 2010 at 18:29
Thanks i did this before i not sure how to setup the file that is loaded in? Should this be a php file with any form i like in it?
Chris
February 17th, 2010 at 18:38
Yes, it basically just consists of form elements.
I have copied my php file (well, part of it) as a txt file so that you can see what I have done:
http://www.cbolson.com/sandbox/mootools/dynamic-form-insert/load.ajax.php.txt
I have used a switch to define which fields to show.
Note – in the original version of this code that I did for a client project, this php file actually gets data from the database to create select lists etc. This is where I think that the idea gets really interesing
Chris