Using JavaScript and Ajax - Stripes...and Java Web Development is Fun Again - page 338

Browser page

<s:form ...>
<s:select name="make" onchange="..."/>

<span id="models"/>

</s:form>

<s:select name="models">
. ...
</s:select>

make

Server

Figure 15.9: Using Ajax to inserting form input controls into an existing
form

When the user selects a car make, the onchange= event triggers a call to
updateModels ( ), which sends an Ajax request with the selected model.
The response is put back into the 'modelChoices' element:

Download ajax/web/WEB-INF/jsp/cars.jsp
function updateModels(control) {
var form = control.form;
var params =
$H(form.serialize(true)).update({'_eventName':'updateModels'});

new Ajax.Updater('modelChoices', form.action,
{ method: 'post',
parameters: params

}

);

}

Notice how this time we're using the _eventName request attribute to
indicate the name of the event handler. The call to Prototype's $H() turns
the parameters into a hash, making it easy to add a key-value pair
before submitting the request.