Auto-populate a textbox based on dropdown
Leveraging the power of feeds
By Patrick Ryan President, Reflect Media Group
In this article we will create a simple form that will have a dropdown list of Usernames from our site, and a Firstname and Lastname textbox. When a Username is selected from the dropdown list, the Firstname and Lastname associated with that user is automatically placed in the Firstname and Lastname textboxes without a page refresh.
To get started, go ahead and create a custom form. It should look like this:
<addform clientname="Autofill">
<controldatasource id="GrabUsers" commandtext="SELECT [Username] FROM [Users] ORDER BY [Username] ASC"></controldatasource>
<div>
<div class="xmp-form-row">
<label cssclass="xmp-form-label" for="Users">Select Username</label>
<dropdownlist id="Users" datafield="Users" datasourceid="GrabUsers" datatextfield="Username" datavaluefield="Username" appenddatabounditems="True">
<listitem value="-1">(None Selected)</listitem>
</dropdownlist>
</div>
<div class="xmp-form-row">
<label cssclass="xmp-form-label" for="Firstname">First Name</label>
<textbox id="Firstname" datafield="Firstname"></textbox>
</div>
<div class="xmp-form-row">
<label cssclass="xmp-form-label" for="Lastname">Last Name</label>
<textbox id="Lastname" datafield="Lastname"></textbox>
</div>
</div>
</addform>
From the form above you can see that we're grabbing the Username's from the site using the controldatasource. We're assigning those values to our dropdown list. And we have our Firstname and Lastname textboxes below it.