jQuery Form Builder Plugin
Trellis Development (a parent company of web-based products which I co-founded) has been developing a custom content management system which needed a form creation tool. I adapted a form builder that I created for a previous project as a jQuery 1.3 plugin. It loads in existing form structure data through an XML file (which would be generated on the server) and passes the changes as a serialized array back to the server.
View the Demonstration
Get source from github
I’ve forked the code from the cms to serve as a stand-alone plugin. It’s extremely easy to setup, as all you need to do is to activate it on an un/ordered list item element. Then, write your backend code to handle the incoming array as you need, and output the xml data for when the form loads.
<ul id="form-builder"></ul>
$(document).ready(function(){
$('#form-builder').formbuilder({
'save_url': 'save.php',
'load_url': 'form-a.xml'
});
});
The save_url is the url that the ajax will be sent to when the user saves the form. The form information is serialized so that the backend programming may handle it as an array.
The load_url is the url of an xml file that describes any existing form information, and the system uses it to restore the fields.
This requires jQuery 1.3+ and uses the scrollTo plugin for nice scrolling.
This is the first revision that’s external to our cms so I’ve labeled it 0.1.
This is one awesome blog.Much thanks again. Keep writing.
Thanks for this it is very handy. I am trying to extend it by adding a required dependency on a previous item entry (an Other option if you like, but with other uses too) if that previous item was a radiobutton, checbox or list field, but am struggling to add the additional fields to the js serializeFormList function. As soon as I do, the deserialize and hash functions in Formbuilder.php fall to bits. Any help appreciated…
Not to worry, discovered the survey string was going over 5K and the DB retrieval routine was truncating it. Fixed now.
Thanks again, this is a great bit of code.
It doesn’t work on IE
What can I do to fix it?
I’m not sure. The version we’re using in our core application works properly in IE. Can you provide any details about what’s happening? I don’t have IE quite handy at this moment but can do further tests if needed.
I have this… $j is because i have a function for no conflict with prorotype and works fine in FF but not in IE8
$j(document).ready(function(){
$j(‘#form-builder’).formbuilder({
‘save_url’: ‘url(‘Edit’); ?>’,
‘load_url’: ‘url(‘details’ . $id . ‘/load’); ?>’,
});
});
Help me please :’(
Well without trying it yet, I can say that the extra comma that follows the load_url segment should not be there. IE tends to break with commas of a list when there’s no next item. I’ll make sure that’s not in my code…
i feel so ashamed.. i wouldnt have imagined it
thank u very much!!!!!!
Not a problem. It’s caused me enough headaches in the past that I have a good idea when it’s lurking in code.
Hey, great stuff! Thanks for sharing
I just have a problem, how to initiate save process? The “save” button won’t work, won’t call the example-save.php script.
The process works using an ajax call to save the serialized form data back to the form. I’d recommend that you use a debugging tool to watch and make sure that request is happening or not. I’m pretty sure it works properly from the latest code downloads.
This is pretty slick. Is there a way for the javascript to generate the HTML that the user sees from the XML that populates the editable view?
There’s no support for that in this version of the application but you could add in support for that. If you would like to contribute any changes back, please feel free.