CODEWITHSUNDEEP
javascriptjqueryasp.net
Rick
Rick

Reputation: 1559

asp.net code doesn't call the javascript function

I am working on a project where I have to show and hide buttons based on drop down selection. Please find the attached fiddler link. My function is not getting called/nothing is happening when I select the drop down values. Any help?!

Page code:

<div class="span6 offset2">
<br />
<div class="row">
Location ID
<select id="iloc_Id" runat="server" class="form-control" style="width: 50%" visible="true" onchange="validate()">
<option disabled="">All Locations</option>
<option value ="1">1- Verona</option>
<option value ="2">2- Como</option>
</select>
</div>
</div>
<br/>
<div class="row">
<asp:LinkButton ID="LinkButton1" CssClass="btn btn-success" runat="server" Width="50%"> First Report </asp:LinkButton>
</div>
<br />
<div class="row">
<asp:LinkButton ID="LinkButton2" CssClass="btn btn-success" runat="server" Width="50%" OnClick="Report2"> Second Report
</asp:LinkButton>
</div>

Javascript:

function validate()
    {
        var selected_loc = $("#iloc_Id").val();
        if (selected_loc == '1')
        {
            $('#LinkButton1').show();
            $('#LinkButton2').hide();
        }
    else  if (selected_loc == '2')
        {
            $('#LinkButton1').hide();
            $('#LinkButton2').show();
        }
    else 
        {
            $('#LinkButton1').show();
            $('#LinkButton2').show();
        }

link: https://jsfiddle.net/rickfiddle/5pvwznge/5/

Upvotes: 0

Views: 33

Answers (2)

Alexis
Alexis

Reputation: 38

Your code is working fine, just need to add a closing bracket at the end 

function validate()
{
    var selected_loc = $("#iloc_Id").val();
    alert(selected_loc);
    if (selected_loc == '1')
    {
        $('#LinkButton1').show();
        $('#LinkButton2').hide();
    }
    else  if (selected_loc == '2')
    {
        $('#LinkButton1').hide();
        $('#LinkButton2').show();
    }
    else  if (selected_loc == '3')
    {
        $('#LinkButton1').hide();
        $('#LinkButton2').hide();
    }
    else 
    {
        $('#LinkButton1').show();
        $('#LinkButton2').show();
    }
}

and change the jsfiddle configuration Load Type from

On Load

to

No wrap - bottom of <head>

Upvotes: 1

Lakshmi Swetha G
Lakshmi Swetha G

Reputation: 73

In the javascript code, after closing validate() function add:

document.getElementById("iloc_Id").onchange = function() {validate()};

Upvotes: 1

Related Questions