New demo for dynamic form fields

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.

See demo

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.

Post to Twitter

chris@cbolson.com

There are 6 comments in this article:

  1. 18/09/2009Fabio M. Costa says:

    wow, impressive, really. I liked how you structured your form.

  2. 18/09/2009Chris says:

    Thanks Fabio 🙂
    Still wondering how/when to make the mootools part into a class – I’ll get round to it some day.

  3. 17/02/2010Craig says:

    Hi I would love to use this version of the dunamic form but not sure where the code is for this new demo??

  4. 17/02/2010Chris says:

    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.

  5. 17/02/2010Craig Smith says:

    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?

  6. 17/02/2010Chris says:

    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

Write a comment: