Get image to display based on selected option from drop down list

See more:

DropDownList

I need help fixing the Avatar Image I am trying to add to my code.

I am using an xml file to store the data. My problem is the Avatar image I want displayed after the person registering selects it from the drop down list. The problem is it will work when I remove the "runat=server" and the "Type=image". Problem: It stops the form from working because the scripting to submit to the xml file. Since it requires the value and the select requires to runat on the server-side.

Avatar
Image
Display

Drop Down List
I.E Weed Farmer is chosen
The Weed Farmer image should populate the <img>

What I have tried:

<UserLoginDetials>
  <users>
    <Avatar />
    <FullName />
    <Street />
    <City />
    <State />
    <Postal />
    <Contact />
    <Alternate />
    <EmailAddress />
    <UserName />
    <Password />
    <PinCode />
    <SecurityQuestion />
    <SecurityAnswer />
    <Roles />
</UserLoginDetials>

<%@ Import Namespace="System.Data" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<%@ Import Namespace="System.Web.Security " %>
<%@ Import Namespace="System.IO" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"
  <script runat="server">
    private void Page_Load ( Object sender, EventArgs e )
      {
          String loginname = Request.QueryString["UserName"];
          String email = Request.QueryString["EmailAddress"];
        String password = Request.QueryString["Password"];

      if (null != loginname)
          UserName.Value = loginname;
      if (null != email)
          SecurityQuestion.Value = email;
      if (null != password)
          Password.Value = password;
      }
      
    private void AddUser_Click ( Object sender, EventArgs E )
        {
        if ( !Page.IsValid ) {
            Msg.Text = "Some required fields are missing";
            return;
            }
        DataSet ds = new DataSet ( );
        String userFile = "K10e20R20r07Y/UserInformation.xml";
        
        FileStream fs = new FileStream ( Server.MapPath ( userFile ),
            FileMode.Open,FileAccess.Read );
        StreamReader reader = new StreamReader ( fs );
        ds.ReadXml ( reader );
        fs.Close ( );
        
        DataRow newUser = ds.Tables [ 0 ] .NewRow ( );
        newUser["Avatar"] = Avatar.Value;
        newUser["FullName"] = FullName.Value;
        newUser["Street"] = Street.Value;
        newUser["City"] = City.Value;
        newUser["State"] = State.Value;
        newUser["Postal"] = Postal.Value;
        newUser["Contact"] = Contact.Value;
        newUser["Alternate"] = Alternate.Value;
        newUser["EmailAddress"] = EmailAddress.Value;
        newUser["UserName"] = UserName.Value;
        newUser["Password"] = Password.Value;
        newUser["PinCode"] = PinCode.Value;
        newUser["SecurityQuestion"] = SecurityQuestion.Value;
        newUser["SecurityAnswer"] = SecurityAnswer.Value;
        newUser["Roles"] = Roles.Value;
        ds.Tables[0].Rows.Add(newUser);
        ds.AcceptChanges ( );
        
        fs = new FileStream ( Server.MapPath ( userFile ), FileMode.Create,
            FileAccess.Write|FileAccess.Read );
        StreamWriter writer = new StreamWriter ( fs );
        ds.WriteXml ( writer );
        writer.Close ( );
        fs.Close ( );

        Response.Redirect("K10e20R20r07Y/UserAdded.aspx", false);
    }
  </script>

   <script type="text/javascript">
     <!--
       function checkPhone(obj) {
           str = obj.value.replace(/[^0-9]+?/g, '');
           switch (str.length) {
               case 0:
                   alert('Please enter numbers only.');
                   obj.select();
                   return;
               case 7:
                   str = str.substr(0, 3) + "-" + str.substr(3, 4);
                   break;
               case 10:
                   str = "(" + str.substr(0, 3) + ") " + str.substr(3, 3) + "-" + str.substr(6, 4);
                   break;
               default:
                   alert('Please enter a 7 digit phone number (with area code, if applicable).');
                   obj.select();
                   return;
           }
           obj.value = str;
       }
       //-->
  </script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="BlueView" Runat="Server">
  <div class="demo">
<---------WON"T WORK -------------->

<img id="image" src="../app_images/faces/av00-anonymous.jpg" alt="" />

<select id="Avatar" runat="server" <big>onclick="setAvat()"</big> type="image">
    <option value="../app_images/faces/av00-anonymous.jpg" anonymous /option>
    <option value="../app_images/faces/av02-cannabisrevolution.png" cannabisrevolution /option>
    <option value="../app_images/faces/av05-weedfarmer.png" weedfarmer /option>
</select>

  <script language="javascript" type="text/javascript">
      function setAvat() {
          var img = document.getElementById("image");
          img.src = this.value;
          return false;
      }
      document.getElementById("Avatar").onchange = setAvat;
  </script>

<---------WON"T WORK -------------->
  
  Full Name: 
  <asp:RequiredFieldValidator ID="FullNameValidate" runat="server" ControlToValidate="FullName" Display="Static" ErrorMessage="* Required" /> 
  <asp:RegularExpressionValidator ID="regexpName" runat="server"     
                                    ErrorMessage="This expression does not validate." 
                                    ControlToValidate="FullName"     
                                    ValidationExpression="^[a-zA-Z'.\s]{1,40}$" /><br>
  
  Username:  
  <asp:RequiredFieldValidator ID="UsernameValidator" runat="server" ControlToValidate="UserName" Display="Static" ErrorMessage="* Required" /><br>
  

  Password:   
  unmask 
  <asp:RequiredFieldValidator ID="PasswordValidator" runat="server" ControlToValidate="Password" Display="Static" ErrorMessage="* Required" /><br>
  
  Security Pin:  
  <asp:RequiredFieldValidator ID="PinCodeValidator" runat="server" ControlToValidate="PinCode" Display="Static" ErrorMessage="* Required" /><br>
  
  Security Question:  
  <asp:RequiredFieldValidator ID="QuestionValidator" runat="server" ControlToValidate="SecurityQuestion" Display="Static" ErrorMessage="* Required" /><br>
  
  Security Answer:  
  <asp:RequiredFieldValidator ID="AnswerValidator" runat="server" ControlToValidate="SecurityAnswer" Display="Static" ErrorMessage="* Required" /><br>
  
    <asp:Label ID="Msg" runat="server" style="visibility:hidden">
  <!-- Persistent Forms: --><asp:CheckBox Visible="false" id="PersistForms" runat="server" autopostback="true"  />
  </div>