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.

Now we will create a feed that does the job of retrieving the firstname and lastname of the User account based on the dropdown selection in our form. For this example we'll call our feed "Autofill".

<xmod:Feed ContentType="text/html">

    <ListDataSource CommandText="SELECT Firstname, Lastname FROM Users WHERE Username = @Username">
      <Parameter Name="Username" Value='[[Form:Username]]' DataType="String" />  
    </ListDataSource>
    
    <ItemTemplate>
      <span class="fname">[[Firstname]]</span>  
      <span class="lname">[[Lastname]]</span>
    </ItemTemplate>

</xmod:Feed>

Notice what we've done with this feed. We're querying our Users table in DNN and asking for the Firstname and Lastname based on the Username that we're sending with the query. But where do we get the Username value from? Take a look at how I'm using the Parameter tag. I'm telling the feed that it's a form posted value, and it's called "Username". We haven't wired this into our form yet but we're about to. Another thing to take note of is the classes I added to Firstname and Lastname spans. When we retrieve our data with a form post we'll want to parse through it to get what we want.

Save this feed and lets go back to our form. Are you jQueryReady?

Add the following jQueryReady script at the bottom of your form but before the closing form tag.

<jQueryReady>
  $('#' + Autofill.Users).change(function() {
    var uName = $(this).val();
    
    $.ajax({ 
      url: '/DesktopModules/XModPro/Feed.aspx', 
      type: 'POST',
      dataType: 'html',
      data: { 
      	"xfd" : "AutoFill",
      	"pid" : 0,
      	"Username" : uName
    	}, 
      
      success: function(data) { 
      	$('#' + Autofill.Firstname).val($(data).filter('.fname').text());
        $('#' + Autofill.Lastname).val($(data).filter('.lname').text());
        
      } 
  	});
      
  });
</jQueryReady>

Lets step through this jQuery:

1. I'm using Clientname="Autofill" in the opening form tag. This enables us to easily work with jQuery in our code without trying to guess the auto-generated UniqueID's from asp.net. So the first line of our jQuery is attaching a change event to the dropdown list. Basically, when that list selection changes we're going to do something.
2. The second line we're creating a variable called "uName" and assigning it the value of the currently selected item in the dropdown which is the person's username.
3. Next we initiate an ajax post:
4. We tell it the URL where our feed.aspx is located.
5. Then we use POST as our method. 
6. Then the DataType we'll be using.
7. And then the Data we'll be posting to the URL we designated.
8. "xfd" : "Autofill" is the name of our feed.
9. "pid" : 0 - this is our PortalID. Feed.aspx must have a PortalID.
10. "Username" : uName - We're assinging our variable that we created for the Username.

Basically when the dropdown changes, this feed will be triggered and return its response. That's where the success function comes in. We now have the entire response within the data object. The success function filters through the result looking for those class names we created, and inserts them into the textbox for Firstname and Lastname.

That's all there is to it. Feeds are a very powerful tool but use them carefully. Remember they are public by default, so assigning ViewRoles to the opening feed tag is important depending on what type of data you're returning or posting.