从下拉列表中根据所选选项获取要显示的图像 [英] Get image to display based on selected option from drop down list

问题描述

我需要帮助修复我试图添加到我的代码中的头像图片。



我正在使用xml文件来存储数据。我的问题是我想在注册人从下拉列表中选择它后显示的头像图像。问题是当我删除runat = server和Type = image时它会起作用。问题：它停止表单工作，因为要提交到xml文件的脚本。因为它需要值，而select需要在服务器端运行。



头像

图片

显示



下拉列表

IE Weed Farmer被选中

杂草农民形象应填充< ; img>



我的尝试：

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>

推荐答案

\" /><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>

" /><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>

This problem has been solved. I found the problem and now it is working great. I found that I was using jquery 1.11.1, I changed it to jquery 1.11.2 and everything started working.

This problem has been solved. I found the problem and now it is working great. I found that I was using jquery 1.11.1, I changed it to jquery 1.11.2 and everything started working.

这篇关于从下拉列表中根据所选选项获取要显示的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！