Assign Image URL to Link Button in JavaScript

Last Reply 8 months ago By pandeyism

Posted 8 months ago

hello,

on checkbox change event i assign value to image from javascript but i notice when i click linkbutton on post back value assign through javascript to image3.imageurl is lost how to retain values assign through javascript to image retain on linkbutton click event

       <label class="switch pull-left">
           <input type="checkbox" checked runat="server" id="myCheck1" onclick="ShowHideDiv(this)">

            

  <span class="slider round"></span>
</label>
Sort by business </h5>

     
  <h5 >


     <label class="switch pull-left">
            <input type="checkbox" runat="server" id="myCheck2" onclick="ShowHideDiv1(this)">

            

  <span class="slider round"></span>
</label>
Sort by name

 

 <script type="text/javascript">
     function ShowHideDiv() {

         if (document.getElementById('<%=myCheck1.ClientID%>').checked == true) {

             document.getElementById('<%=myCheck2.ClientID%>').checked = false;

             document.getElementById('<%=myCheck1.ClientID%>').checked == true;


             document.getElementById('<%=Image3.ClientID%>').src = "/images/a-z.png";
         }
     }
         function ShowHideDiv1() {

             if (document.getElementById('<%=myCheck2.ClientID%>').checked == true) {

                 document.getElementById('<%=myCheck1.ClientID%>').checked = false;

                 document.getElementById('<%=myCheck2.ClientID%>').checked == true;

                 document.getElementById('<%=Image3.ClientID%>').src = "/images/1-9.png";
           
             }
     }
</script>

 

<asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn-xs btn btn-default pull-right" OnClick="LinkButton1_Click">
    <asp:Image ID="Image3" runat="server" ImageUrl="~/images/a-z.png" Width="30px" Height="32px" />
</asp:LinkButton>
You are viewing reply posted by: pandeyism 8 months ago.
Posted 8 months ago

Hi nauna,

Please refer below sample.

HTML

<script type="text/javascript">
    function ShowHideDiv() {
        if (document.getElementById('<%=myCheck1.ClientID%>').checked == true) {
            document.getElementById('<%=myCheck2.ClientID%>').checked = false;
            document.getElementById('<%=myCheck1.ClientID%>').checked == true;
            document.getElementById('<%=Image3.ClientID%>').src = "Desert.jpg";
            document.getElementById('hfValue').value = "Desert.jpg";
        }
    }
    function ShowHideDiv1() {
        if (document.getElementById('<%=myCheck2.ClientID%>').checked == true) {
            document.getElementById('<%=myCheck1.ClientID%>').checked = false;
            document.getElementById('<%=myCheck2.ClientID%>').checked == true;
            var hvalue = document.getElementById('<%=Image3.ClientID%>').src = "Desert.jpg";
            document.getElementById('hfValue').value = hvalue;
        }
    }
</script>
<div>
    <label class="switch pull-left">
        <input type="checkbox" checked runat="server" id="myCheck1" onclick="ShowHideDiv()" />
        <span class="slider round"></span>
    </label>
    <h5>
        Sort by business
    </h5>
    <label class="switch pull-left">
        <input type="checkbox" runat="server" id="myCheck2" onclick="ShowHideDiv1(this)" />
        <span class="slider round"></span>
    </label>
    Sort by name
    <asp:LinkButton ID="LinkButton1" runat="server" CssClass="btn-xs btn btn-default pull-right">
        <asp:Image ID="Image3" runat="server" ImageUrl="Chrysanthemum.jpg" Width="30px" Height="32px" />
    </asp:LinkButton>
    <asp:HiddenField ID="hfValue" runat="server" />
</div>

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!string.IsNullOrEmpty(hfValue.Value))
    {
        Image3.ImageUrl = hfValue.Value;
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not String.IsNullOrEmpty(hfValue.Value) Then
        Image3.ImageUrl = hfValue.Value
    End If
End Sub

Screenshot