jQuery “Populate” plugin
Populate a form or an element's child elements using a JSON object.
Posted on Tuesday, February 12th, 2008 at 12:37 pm
I don’t like mixing HTML and PHP when I build my forms. Instead I like to keep my HTML completely clean, then if a form needs to be pre-filled (for example retrieving a bunch of database results), get JavaScript to fill it in for me after the page has loaded.
This plugin supports full PHP naming and deep data structures, as well as checkbox arrays, other non-standard UI controls, and even standard HTML elements such as labels or divs.
The plugin can be used as part of your AJAX toolkit, or for separating server-side code from HTML by populating a form after the page has loaded eg:
$('form').populate({text:'text', radio:1})
and not inline as the page is processed, such as:
You can also populate non-form controls such as
$('div').populate({'text-1':'text', 'text-2':'More text'})
This can be useful when you want to show the results of a database call, but don’t want the text to be editable.
Instructions and demos
View the jQuery Populate demo for a view a full set of instructions and a working demo, with examples of populating:
- a simple form, using string variable types for textfields, radiobuttons, dropdowns and checkboxes
- a complex form, using array variable types for checkbox arrays and multi-list boxes
- a hierarchical form, using hierarchical JSON data
Update 29th November 2009
Thanks to everyone who spotted bugs and contributed their comments. The following features are added / bugs are now squished:
- Now populates standard HTML elements within forms
- Is now case-sensitive for element value comparisons (keith, 5030SDEC, Mark Croxton)
- Now skips function references and undefined elements (Henning, Found-a-Bug)
- Fixed debug trace for missing elements (Found-a-Bug)
Download
JavaScript
- Populate (no compression) 4.6k
- Populate (packer compression) 1.6k
PHP
- PHP jQuery helper functions
- PHP JSON class
Demo files
- Populate standalone demos
Fixed debug trace for missing elements (Found-a-Bug)
Now skips function references and undefined elements (Henning, Found-a-Bug)
Now populates standard HTML elements
Is now case-insensitive for element value comparisons (keith, 5030SDEC, Mark Croxton)
Hi
It’s possible put one example complete for this plugin on your site, or demo ??
David.
Hi David,
Sure. Am in deadline hell right now though, so might take a week or so.
If you just download the files, though, you should have everything you need to get started.
Hi Dave,
I try the plugin jquery.populate and for me not work.
I have:
jQuery(document).ready(function($) {$('div.example').populate({'text-1':'text', 'text-2':'More text'})
})
but not work?
Why?
Hi Dave,
I try the plugin jquery.populate and for me not work.
I have:
jQuery(document).ready(function($) {
$(’div.example’).populate({’text-1′:’text’, ‘text-2′:’More text’})
})
but not work?
Why?
Hi again David.
I designed populate to be used with forms mainly, and the div stuff was an afterthought.
However, it looks as if something is up, but I’ll get onto soon, and hopefully I’ll have something up and working in the next week or so.
Hi Dave,
Any luck getting the demo up sometime soonish ?
Cheers,
Vipul
Funny you should mention that – I’m doing the demo now! Check back later today or perhaps tomorrow…
jquery form populate does not populate checkboxes and radio buttons in safari.
Also it would be cool to recognize max length on fields that are array and apply a value between them. For example if you have a json data like {”phone”:”″} and there were 3 fields like phone[0],phone[1],phone[2] it would split the phone up based off each fields max length
Damn… whadya know. I’ll look into it when I get a moment. Thanks for flagging it
Dave, a bug report from me. The populate doesnt work with *radio and combo boxes* in Safari for Mac. I don’t know if the status of this bug with Safari for Windows. And Populate works perfectly with Firefox and Opera.
OK
thanks guys for reporting the safari bug! Strange that it made it so far without being detected. I’m pretty good at testing on the major browsers so surprised that this made it through, especially after ALL this time!
Anyway – bug fixed. It was due to safari not implementing the item() method on collection elements.
Thanks again,
Dave
Great plugin!
Found a bug — it seems to break if the field name=”length”
great plugin. saved me a lot of work. thanks dave.
Hey,
I use populate to build up what once shall become a web-application
I had a hard time getting .populate() working properly in FF and mainly IE. I managed to figure out, that this was due to the wide range of objects running through the main loop in function populateFormElement().
So there are two fixes which got me rich of these errors:
One insert in line 123 of the uncompressed version:
if(typeof element == “undefined” || typeof == “function”)
continue;
This actually was enough to make the FF running (and hopefully it will speed up the script as well)…
IE was a bit more tricky but targeting a similar problem. I edited lines 161 to 168 of the uncompressed file to look like this:
case ‘text’:
case ‘button’:
case ‘textarea’:
case ’submit’:
value = value == null ? ” : value;
element.value = value;
break;
case ‘div’:
element.innerHTML = value;
break;
default:
break;
The point is that often IE seemed to throw an error as he had to work on a function or non-Formelement and apply something like this:
element.value = value;
Whatsoever. This is what is currently working for me. Maybe one of you may find my contribution useful for his or her own problem or you, Dave, can use it as an idea for future improvement.
Thanks for this great Plugin!
Bye,
Henning
Great plugin. I’m having a problem with selects in IE7. Your demo works fine but on my implementation the selects are showing up blank. I have State and Country values in uppercase. It seems like the problem is in the select case statement
line 158 of uncompressed:
element.value = value.toString().toLowerCase() || value;
removing the toLowerCase() seems to resolve this for me.
Hi Keith and Henning,
Thanks for the posts. I’ll take a look!
Cheers,
Dave
Hey Dave,
This plugin is just what I need however I’m having issues getting it to work. No JS errors, just a blank form! Would it be possible to post a simple .zip with nothing but the js includes, a tiny html form and the jquery populate call? Something super super simple?
Thanks so much for your hard work!
Cheers,
Tyler
Hi Tyler,
Good idea. Maybe I’ll do that in the next few days, and will drop you a mail when done
OK, the demos are up. Good suggestions folks.
Hi Dave,
I have just started using the populate plugin with jquery 1.3.2 and it populates my form perfectly except for select drop downs. It doesn’t change them to the value in the json string. Here is an example of my json string:
{”UNIQUENO”:63421, “DATAPROTECTEXTDISCLOSE”:”Y”, “STATUS”:”Active”, “DATAPROTECTWEBPUBLISH”:”Y”}
The UniqueNo is just a text field but the others are all single select dropdowns.
Is this a problem with my json string or is there some issue with populate and jquery 1.3.2? I noticed that your demos are using 1.2.1?
Cheers,
Dave
Seems like populate select box doesn’t work if value is not lowercase…
This work:
Test
This *DOES NOT* work
Test
Hey guys,
Sorry you’re having trouble there.
Dave, can you post a link to some live code? There shouldn’t be any problems. I used this code and it was fine:
{"UNIQUENO":63421, "DATAPROTECTEXTDISCLOSE":"Y", "STATUS":"Active", "DATAPROTECTWEBPUBLISH":"Y"}DEC, yes, populate may have issues with some elements that are lower case. I was adhering to the HTML specs by converting everything to lower case, but it’s not very user-friendly. Do a search in the code and remove the toLowerCase() checks and that might solve it. In the meantime I’ll take another look.
I can’t find the code for results.php (with the simple demo)…and you don’t have it in your demo zip file!
Hi Eric,
Ah, it’s just a simple print_r() that dumps the submitted form variables to the browser window. I can post it if you like…
If you could, please? I don’t know what to pass onto the function…
OK, that’s done. All it does is print out the form variables though, and you need to run it on the server to do so.
Great plugin! I got it to work and then I had an idea for an improvement that takes it past the current implementation (maybe you know if there is already plugin that does this).
Here is what I need:
When there is a known set of fields this works great. Each field is mapped to a JSON element. But when you have an array of data, the current implementation of Populate only sets on the select or checked attribute. What if populate could create a list of fields based on an array? That is what I am after. For example, an employee may have a single email address or they may have 10 (or more). Since I can’t anticipate how many, it would be great if Populate could just create a list of fields anchored by the div or field id. At the very least it would be great to get a list of items generated but even better would be a list of fields.
I know this goes beyond the current scope of what you are trying to accomplish, but it would be very helpful if variable arrays could rendered in the form “automagically”. I may look around for a plugin that does this but it seems a nice enhancement for populate.
Thanks Pete!
Yeah, it does the job alright.
Your plugin suggestion is kind of the opposite of Populate, but shouldn’t be too hard to accomplish. I guess the thing they have in common is the JSON format.
Take a look at this, which is similar to what you described. It’s unfinished, and one of the issues was always “how much functionality to add?”
https://keyframesandcode.com/resources/html/form-builder/html/form%20creator%2008.html
Really, I should break the code out into a library, but as with a lot of my stuff, as I said, it’s unfinished!!
I gave it a shot although my javascript and jQuery skills are pretty bad. Here is what I did with the assumption that the incoming arrays are key:value pairs and a anchors the placement of them (roughly).
I added this hack to populateformelement
// might be a div so check for it’s existance
objref = document.getElementById(name.substring(0,name.length-2));
// check that the named element exists in the form
var name = getElementName(name); // handle non-php naming
var element = form[name] || objref;
And then at about line 160
case ‘DIV’:
for(var j = 0; j < value.length; j++)
{
var fields = value[j].split(”:”);
var fieldname = fields[0];
var fieldvalue = fields[1];
var divname = name.substring(0,name.length-2);
// Append the fields here
$(”#”+divname).append(”" + fieldname + “ ” );
}
break;
I can’t say that it will work in all cases but it does what I need which is to populate a div with a list of key – value pairs that allows for editing.
Thanks!
Hello,
I’ve found your plugin very usefull, but i tought i was’nt using the power of jQuery as it should… So i rewrited itfrom scratch:
packed version (668bytes!)
(function($){$.populate=function(h,i){$.each(h,function(b,c){var d=typeof c,e=$(i+’ [name='+b+'],’+i+’ [name='+b+'\\[\\]]’),f=e.is(’:radio,:checkbox’);if(d===’boolean’&&f)e.attr({checked:c?’checked’:null});else if(d===’object’&&!$.isArray(c))for(var g in c)arguments.callee(b+’\\['+g+'\\]‘,c[g]);else e.val(f?$.makeArray(c).map(function(a){return a.toString()}):c)})};$.fn.extend({populate:function(b,c){if(!b)return this.reset();var d=this.selector;if(typeof b===’string’)$.getJSON(b,c,function(a){$.populate(a,d)});else if(typeof b===’object’)$.populate(b,d);return this},reset:function(){return this.filter(’form’).each(function(){this.reset()}).end()}})})(jQuery);
Full version:
(function($){
$.populate = function(data, selector){
$.each(data, function(name, value){
var type = typeof value,
element = $(selector+’ [name='+name+'],’+selector+’ [name='+name+'\\[\\]]’),
check = element.is(’:radio,:checkbox’);
if (type === ‘boolean’ && check)
element.attr({checked: value ? ‘checked’ : null});
else if (type === ‘object’ && !$.isArray(value))
for (var key in value)
arguments.callee(name+’\\['+key+'\\]‘, value[key]);
else
element.val(check ? $.makeArray(value).map(function(key){return key.toString();}) : value);
});
};
$.fn.extend({
populate: function(data, options){
if (!data)
return this.reset();
var selector = this.selector;
if (typeof data === ’string’)
$.getJSON(data, options, function(data){ $.populate(data, selector); });
else if (typeof data === ‘object’)
$.populate(data, selector);
return this;
},
reset: function(){
return this.filter(’form’).each(function(){this.reset();}).end();
}
});
})(jQuery);
my version don’t use id, but names, as only names are realy required in forms… and using id (especially if different from names) in forms is a very bad idea (you can’t have multiple edit form in the same page by example… and the php array result submited from the form could be different from the one use to populate it: not good!).
my version target a use with form, and not text… but it should be easy to add text/html injection to an element with a certain class if no form element match the given name….
Sorry, just a test, hoping the layout will be better! (you should provide a preview)
(function($){
$.populate = function(data, selector){
$.each(data, function(name, value){
var type = typeof value,
element = $(selector+' [name='+name+'],'+selector+' [name='+name+'\\[\\]]'),
check = element.is(':radio,:checkbox');
if (type === 'boolean' && check)
element.attr({checked: value ? 'checked' : null});
else if (type === 'object' && !$.isArray(value))
for (var key in value)
arguments.callee(name+'\\['+key+'\\]', value[key]);
else
element.val(check ? $.makeArray(value).map(function(key){return key.toString();}) : value);
});
};
$.fn.extend({
populate: function(data, options){
if (!data)
return this.reset();
var selector = this.selector;
if (typeof data === 'string')
$.getJSON(data, options, function(data){ $.populate(data, selector); });
else if (typeof data === 'object')
$.populate(data, selector);
return this;
},
reset: function(){
return this.filter('form').each(function(){this.reset();}).end();
}
});
})(jQuery);
Maybe I’m blind, but in the stand-alone demos, I’m not seeing where you’re adding the one-liner: “$(’#form’).populate({first_name:’Dave’,last_name:’Stewart’})”
It’s trivial to JSON encode a PHP array, but you didn’t make it clear where this appears… only a reference that it must come after the form. What is really needed here is an example of where to add our own JSON encoded array to a form. I don’t think it’s helpful to print out the JSON text into a text field merely for display purposes.
This is a good plugin, and it is right on in its aim to preserve the MVC architecture for form handling, but the documentation still needs some clarification.
Sorry guys – not really been paying any attention to the blog or my plugins for a long while!
Thanks for commenting though
Nice little form population script. I wish something like this was moved to jQuery core…
There’s a bug when using the debug option. Namely, undefined fields always get debugged to console even when debug is false, because the debug option isn’t consulted before the debug function is called.
Other than that, great job.
Found a bug – the select menu (single) selected value is converted to lowercase, so won’t match the original html value if it has uppercase characters!
Problem line 158:
element.value = value.toString().toLowerCase() || value;
Change to:
element.value = value.toString() || value;
Thanks chaps, I’ll take a look at these in the next week or so as I have a few updates to do and will see if I can add a fix or two
Two issues actually:
1. Internet Explorer will throw an error if an element is undefined in the for loop of populateFormElement(). Add the following below the
var element = elements[e];line:if(!element) continue; //Prevents undefined errors in IE2. also in populateFormElement(), the ‘No such element as…’ is always traced when triggered regardless of debug settings.
Sweet, thanks for the spot. Populate needs a wee update, so I’ll make sure it gets one.
Thanks
Just to let everyone know, I’ve finally got round to updating the plugin. Also, I’ve added support for regular HTML elements, so you should now be able to update labels, error messages, or anything else within a form that is not a regular HTML form control.
Enjoy!
Great plugin but I’m having an unexplainable behavior. I add the populator call to my page and I see the field value show instantaneously before disappearing. It’s as if the value gets added then immediately removed. As I mentioned I can see it blink and then disappear.
Javascript:
$( "#firstName" ).val( value );
HTML
Hey imarichardson,
Not too sure what you’re doing there. That looks like jQuery not Populate code!
Email me with some details if you like.
Hi Dave,
Is there a license or copyright or something similar that is associated with your code?
Thanks, Jim
Nope – just a use if you want to. I should probably put one in as someone else commented on that. I’m not so anal that I care, but apparently others do