Search Articles


Sort By
  

Article Categories

Authors & MVPs

Kelly Ford

Introducing DNNDev University

The new DNNDev University doesn't have a winning football team. It is built on people - you and I and everyone who uses DotNetNuke and XMod Pro.

XModPro

Auto-populate a textbox based on dropdown

Leveraging the power of feeds

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.

Comments & Ratings

    (Ratings: 0   Avg: )
Rate It!
Share It!