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.
$("#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>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
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:
remote struct function getpersondetails(numeric id) {
var s = {};
s["name"] = "Person " & arguments.id;
s["age"] = arguments.id;
s["codskill"] = arguments.id*2;
return s;
}
}
component {
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])
}
})
})
