You need to set up the menu from Wordpress admin.
General
Sep 18, 2009
Chris
6 Comments

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.

6 Comments

  • Fabio M. Costa September 18, 2009 at 18:45

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

    • Chris September 18, 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 17, 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 17, 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 17, 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 17, 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

Leave a comment

You must be logged in to post a comment.