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])
}
})
})
Archived Comments
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.)
Nice - I forgot to mention that - obviously - my code would only work for text fields, and not drop downs/check boxes.
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);
});
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
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.
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
You would just add a listener to a button click.
Sorry to be dense, but, no dice...
http://jsfiddle.net/GYyWk/
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);
})
This link should work: http://jsfiddle.net/ZRYRB/1
Thanks, but still no workie
Ugh. All I had to do was change button type="submit" to button type="button"
Thanks for your help!
Oh - you can keep it as submit, just add e.preventDefault() to the handler, but button makes more sense probably anyway.