Example of jQuery loading form fields

This post is more than 2 years old.

I've exchanged a few emails lately with a reader, Daniel, who was looking at how he could use AJAX to set the value of a large set of form fields. I whipped up the follow jQuery/ColdFusion demo that I hope others may find useful as well.

To begin, I create a very simple form that allows you to select a person in a drop down. When you select the person, we will use AJAX to get details on the user and then fill in the form fields based on that data. Here is the initial version.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(document).ready(function() {

$("#person").change(function () {
	var val = $(this).val()
	if(val == "") return
	$.getJSON("test.cfc?method=getpersondetails&returnformat=json", {"id":val}, function(res,code) {
		$("#name").val(res.name)
		$("#age").val(res.age)
		$("#codskill").val(res.codskill)
	})
})

}) </script>

<form> <select name="person" id="person"> <option value="">Select a Person</option> <option value="1">Raymond Camden</option> <option value="2">Scott Stroz</option> <option value="3">Todd Sharp</option> </select> <p/> Name: <input type="text" name="name" id="name"><br/> Age: <input type="text" name="age" id="age"><br/> COD Skill: <input type="text" name="codskill" id="codskill"><br/> </form>

Working bottom to top - you can see the simple field with the person selector on top. Below it are the three fields I'll be loading. Now scroll on up to the JavaScript. We've bound an event handler to the person drop down that fires off whenever you change it. If you selected a person (and not just the top item), we do a getJSON request to our component. We get a structure of data back that we then just apply to our form fields. The ColdFusion code isn't important to this demo, but in case you are curious, here is the component:

component {

remote struct function getpersondetails(numeric id) {
	var s = {};
	s["name"] = "Person " & arguments.id;
	s["age"] = arguments.id;
	s["codskill"] = arguments.id*2;
	return s;
}

}

As you can see, I'm basically returning static data based on the ID requested. So this works - but Daniel pointed out that he had 50 form fields. How could you handle that? Well, obviously you can just use 50 .val statements like you see above. However, it may be nicer to do things automatically. If you don't mind tying your service to your view a bit, you can make assumptions that each key of the struct returned will match the ID of a form field. Then your code becomes a bit simpler:

$("#person").change(function () { var val = $(this).val() if(val == "") return $.getJSON("test.cfc?method=getpersondetails&returnformat=json", {"id":val}, function(res,code) { for(var key in res) { $("#" + key).val(res[key]) } }) })

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Dan G. Switzer, II posted on 5/24/2010 at 6:10 PM

Many moons ago, I wrote a jQuery plug-in called the Field plug-in (but it's really mini-library of jQuery add-ons:)

http://www.pengoworks.com/w...

This plug-in includes a hashForm() method which allows you to easily update a form based on a structure. So, all you'd need to do is have your AJAX call return a structure of all your values and pass it into the hashForm() method to completely fill in all the form fields. It'll handle all types of normal HTML form fields (text, textarea, radio, checkbox, etc.)

Comment 2 by Raymond Camden posted on 5/25/2010 at 10:16 AM

Nice - I forgot to mention that - obviously - my code would only work for text fields, and not drop downs/check boxes.

Comment 3 by johans posted on 5/25/2010 at 11:48 PM

I use a simple jquery data binder that looks for class="{variableName}" so when getting response from the server all I need is $.each(data, function(i, val){ databind.value(i,val);
});

Comment 4 by Richard posted on 6/16/2010 at 10:16 AM

Hi Ray,
I am trying to achieve something similar using ajax but my skills in that are failing me:
I need to perfom some calculations when the user types in the second of the form textfields so example form.field1=30 form.field2=40 - how can I achieve that - (may be call a cfc from there to do the calculations)
Thanks

Comment 5 by Raymond Camden posted on 6/16/2010 at 3:41 PM

If the calculations are simple, just do them in JavaScript. JS can do just as much math operations as ColdFusion. If the calculations are complex (or maybe you don't want to duplicate existing logic you already have in CF), then your Ajax calls would pass the values to the CFC and parse the response.

If you can give me more information about your requirements, I can offer more help.

Comment 6 by Jose posted on 10/22/2013 at 11:21 PM

Hi Ray,

Great example, thanks! But, is there a way to retrieve the field values when the user changes input OR clicks on a button?

TIA

Comment 7 by Raymond Camden posted on 10/22/2013 at 11:30 PM

You would just add a listener to a button click.

Comment 8 by Jose posted on 10/23/2013 at 12:09 AM

Sorry to be dense, but, no dice...

http://jsfiddle.net/GYyWk/

Comment 9 by Raymond Camden posted on 10/23/2013 at 12:14 AM

For the life of me I can't get jsfiddle to save my damn mod - here is what I'd use:

$(document).ready(function() {

function doLookup() {
var val = $("#PURL_code").val()
if(val == "") return;
$.getJSON("http://192.168.1.80/code/test.cfc?method=getpersondetails&returnformat=json", {"purl_code":val}, function(res,code) {
$("#fname").val(res.fname)
$("#lname").val(res.lname)
$("#company").val(res.company)
})

}
$("#PURL_code").change(doLookup);

$("#SubmitCode").click(doLookup);

})

Comment 10 by Raymond Camden posted on 10/23/2013 at 12:16 AM

This link should work: http://jsfiddle.net/ZRYRB/1

Comment 11 by Jose posted on 10/23/2013 at 12:40 AM

Thanks, but still no workie

Comment 12 by Jose posted on 10/23/2013 at 1:01 AM

Ugh. All I had to do was change button type="submit" to button type="button"

Thanks for your help!

Comment 13 by Raymond Camden posted on 10/23/2013 at 1:09 AM

Oh - you can keep it as submit, just add e.preventDefault() to the handler, but button makes more sense probably anyway.