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/
asked Jun 11, 2019 at 20:00
-
Check the html and inspect the actual generated front-end id's...VDWWD– VDWWD2019年06月11日 20:12:57 +00:00Commented Jun 11, 2019 at 20:12
-
When I run you fiddle, I get a 'validate is not defined' error, so the html cant find the js. Where is this function in relation to the HTML, same page or elsewhere?BattlFrog– BattlFrog2019年06月11日 20:41:25 +00:00Commented Jun 11, 2019 at 20:41
2 Answers 2
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>
Sign up to request clarification or add additional context in comments.
2 Comments
Rick
Thanks. But I'm using Fiddler as a tool here to show my code. What coding related change should I make so the code will work?
Alexis
In that case, as mentioned before, you could add an onchange handler after your validate() function with javascript: document.getElementById("iloc_Id").onchange = function() {validate()}; Or, alternatively, with jQuery: $("#iloc_Id").change(function() {validate()});
In the javascript code, after closing validate() function add:
document.getElementById("iloc_Id").onchange = function() {validate()};
answered Jun 11, 2019 at 20:18
Comments
lang-js