I have done a code to disable a control when user clicks on a control. On my form i am having a TextBox and a DropDown. When user clicks on a TextBox i will disable the DropDown like that when click on DropDown i will disable the TextBox which works fine.
But when the user clicks on Disabled control i would like to enable that control. Means if i click on TextBox which was disabled i would like to Enable it like that for dropdown too..
My sample Script is as follows
<script type="text/javascript">
function toggleDropDownList1()
{
var d=document.getElementById("<%= DropDownList4.ClientID %>");
if(d.disabled)
{
d.disabled=false;
}
else
{
document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
}
}
function toggleDropDownList2()
{
document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
}
</script>
Design
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox>
<asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="One" Value="1"></asp:ListItem>
</asp:DropDownList>
Apparently Firefox, and perhaps other browsers, disable DOM events on form fields that are disabled, and any event that starts at the disabled form field is completely canceled and does not propagate up the DOM tree.
So, if you want to achieve something like that, you will probably have to do it with a workaround.
Instead of actually disabling the field try to style the fields to look as if they are disabled, that way you can still capture the click event.
The idea is to place a div in front of dropdown list, and this div accept the onclick event.
The issue here is that the div can not place so easy in front of dropdown list. To place it you need to do that dynamically and use the absolut position.
I make here a small code, and test it and working. I have left the background color RED on div to see where it is. Some details I left it to you, eg to find the width and height of your control list, I place the onclick, you can place back the double click, And just remove the red background.
<script type="text/javascript">
function toggleDropDownList1()
{
var MyDiv = document.getElementById("DivForClick");
MyDiv.style.display = "none";
var d=document.getElementById("<%= DropDownList4.ClientID %>");
if(d.disabled)
{
d.disabled=false;
}
else
{
document.getElementById("<%= TextBox1.ClientID %>").disabled = true;
}
}
function toggleDropDownList2()
{
document.getElementById("<%= DropDownList4.ClientID %>").disabled = true;
var MyDdl = document.getElementById("<%= DropDownList4.ClientID %>");
var MyDiv = document.getElementById("DivForClick");
MyDiv.style.display = "block";
MyDiv.style.left = MyDdl.style.left;
MyDiv.style.top = MyDdl.style.top;
// need to find the height/width
// MyDiv.style.height = MyDdl.style.height;
// MyDiv.style.width = MyDdl.style.width;
}
</script>
and the asp code.
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleDropDownList2();"></asp:TextBox>
<br /><br />
<div id="DivForClick" onclick="toggleDropDownList1();" style="z-index:999;position:absolute;left:0;top:0;height:20px;width:40px;background-color:Red;display:none;">
</div>
<asp:DropDownList ID="DropDownList4" runat="server" onclick="toggleDropDownList1();" style="z-index:2;">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="Two" Value="2"></asp:ListItem>
</asp:DropDownList>
Do you mean
function toggleIt() {
var d=document.getElementById("<%= DropDownList4.ClientID %>");
var t =document.getElementById("<%= TextBox1.ClientID %>");
d.disabled=!d.disabled
t.disabled=!t.disabled
}
<asp:TextBox ID="TextBox1" runat="server" onclick="toggleIt();"></asp:TextBox>
<asp:DropDownList ID="DropDownList4" runat="server" disabled="disabled" onclick="toggleIt();">
<asp:ListItem Text="One" Value="1"></asp:ListItem>
<asp:ListItem Text="One" Value="1"></asp:ListItem>
</asp:DropDownList>
Related
I have a dropdownlist in a table with a blank item in it, I want a error message showed in a label if a button is pressed while that blank item is selected in the dropdrownlist
<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" OnSelectedIndexChanged="DropDownListParedesinteriores_ItemChanged">
<asp:ListItem Text="" Value="-1"></asp:ListItem>
<asp:ListItem Value='5'>Excellent</asp:ListItem>
<asp:ListItem Value="4">Very good</asp:ListItem>
<asp:ListItem Value="3">Good</asp:ListItem>
<asp:ListItem Value="2">Bad</asp:ListItem>
<asp:ListItem Value="1">Very bad</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" Text="Button" />
<asp:Label ID="Label9" runat="server" Text=""></asp:Label>
This is my Jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function ()
{
$("#Button1").click(function ()
{
var a = $("#<%= DropDownList1.ClientID %>");
if (a.val() === "-1")
{
document.getElementById("Label9").innerHTML = "<b>Please select an option</b>";
document.getElementById("Label9").style.color = "red";
}
else
{
document.getElementById("Label9").innerHTML = "<b>Comfirmed</b>";
document.getElementById("Label9").style.color = "green";
}
})
})
</script>
First of all this button is a server side button you have to disable postaback to make it work on client side by using onClientClick="return false" .Secondly in order to use Button1 as id($("#Button1")) you need to change ClientIDMode to static same goes for the label
<asp:Button ID="Button1" runat="server" Text="Button" onClientClick="return false" ClientIDMode="Static" />
<asp:Label ID="Label9" runat="server" Text="" ClientIDMode="Static"></asp:Label>
if you dont want to use static client id you have to replace
$("#Button1") with $("#<%= Button1.ClientID %>")
document.getElementById("Label9") with document.getElementById("<%= Label9.ClientID %>")
Your button 1 selector "$("#Button1).click" click event does not consider the client ID like your dropdown list does. That may be causing the issue if jquery finds nothing for button 1 and the click event never gets triggered.
A possible fix is to change the selector to the same as you do in the line where you use jquery to get the dropdown list.
I have asp.net web form with lot of .net controls. where few of the controls are disabled depending on the input of another controls. All of the controls are required so i have to check for required validation as well.
I can disable the control using jquery but i am not able to disable the validation control.
Here is my code.. any better way of doing this will be very appreciable.
<script>
$('#<%=rdb_one.ClientID%> input:radio').click(function () {
var currentIdone = 'Humans';
var currentId = $(this).val();
if (currentId != currentIdone) {
$('#<%=rdb_two.ClientID%> input').attr('checked', false);
$('#<%=rdb_two.ClientID%> input').attr('disabled', 'disabled');
}
else {
$('#<%=lstExposureValue.ClientID%> input').removeAttr('disabled');
}
});
</script>
<asp:RadioButtonList CssClass="Required" ID="rdb_one" runat="server" OnSelectedIndexChanged="rdb_studysubj_SelectedIndexChanged">
<asp:ListItem Value="Humans">Humans</asp:ListItem>
<asp:ListItem Value="Non-Human primates">Non-Human primates</asp:ListItem>
<asp:ListItem Value="Rodents">Rodents</asp:ListItem>
<asp:ListItem Value="Others">Others</asp:ListItem>
</asp:RadioButtonList>
<br/>
<br/>
<asp:RadioButtonList CssClass="Required" ID="rdb_two" runat="server" OnSelectedIndexChanged="rdb_study_popul_SelectedIndexChanged">
<asp:ListItem>Individuals</asp:ListItem>
<asp:ListItem>Population</asp:ListItem>
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="vald_one" Display="None" ErrorMessage="Study Population is Required" runat="server" ControlToValidate="rdb_two"></asp:RequiredFieldValidator>
Here i disable the control "rdb_two" depending on the value from "rdb_one" but i am not able to disable the validation controls for "rdb_two" any ideas. i have this function repeatedly used over all the controls with in the same page.
You can use ValidatorEnable function
for example
ValidatorEnable(document.getElementById($(this).attr('id')), false);
I have a grid view with update panel and I set an image loader when the post back occur, But when I click on one button in for example row 5, all of loader display inline,but i just need to show the exactly image loader near my button that i click on it,How can I do that in j query or java script?
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
//$(".load").show();
$('.btn').live("click", function () {
//$('tr [type="checkbox"]:checked').parent().parent().each(function () {
//if ($(this).find('input[id*="txtSalaryHead"]').length > 0) {
//alert($(this).find('input[id*="txtSalaryHead"]').val() + "---" + $(this).find('input[id*="hdnHeadId"]').val())
//}
$(".load").show();
});
//});
}
function EndRequestHandler(sender, args) {
$(".load").hide();
}
</script>
and this my code:
<asp:Panel runat="server" ID="pnl1">
<asp:UpdatePanel ID="UpdatePanel3" runat="server">
<ContentTemplate>
<asp:Label ID="Label6" runat="server" Font-Bold="True" ForeColor="#D53B22"
Text="تعداد : " Width="42px"></asp:Label>
<asp:DropDownList ID="ddl_no" runat="server" CssClass="ddlno">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem Value="3"></asp:ListItem>
<asp:ListItem Value="4"></asp:ListItem>
<asp:ListItem Value="5"></asp:ListItem>
<asp:ListItem Value="6"></asp:ListItem>
<asp:ListItem Value="7"></asp:ListItem>
<asp:ListItem Value="8"></asp:ListItem>
<asp:ListItem Value="9"></asp:ListItem>
<asp:ListItem Value="10"></asp:ListItem>
</asp:DropDownList>
<asp:Button ID="btn_addBasket" runat="server" CssClass="btn" Text="اضافه به سبد" OnClick="btn_addBasket_Click" />
<img src="images/ajax-loader.gif" class="load" style="display:none;"/>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
//$(".load").show();
$('.btn').live("click", function () {
//$('tr [type="checkbox"]:checked').parent().parent().each(function () {
//if ($(this).find('input[id*="txtSalaryHead"]').length > 0) {
//alert($(this).find('input[id*="txtSalaryHead"]').val() + "---" + $(this).find('input[id*="hdnHeadId"]').val())
//}
$(".load").show();
});
//});
}
function EndRequestHandler(sender, args) {
$(".load").hide();
}
</script>
</asp:Panel>
this code in my grid view template and i want show img with id=loader when my button(id=btn_addbasket) click
I can't be more specific without seeing your markup, but in general it looks like something like this is happening:
<div>
<div>
<span class="load">something</span>
<button class="btn">click here</button>
</div>
<div>
<span class="load">something</span>
<button class="btn">click here</button>
</div>
<div>
<span class="load">something</span>
<button class="btn">click here</button>
</div>
</div>
So in your JavaScript code, when you reference $('.load'), you're referencing every element with that class. But you only want to reference the nearest element to the button that was clicked. Perhaps instead of this:
$(".load").show();
Try something more like this:
$(this).closest('div').find('.load').show();
Again, without seeing your markup, I can't be specific. This is a general concept, not code to be copied/pasted to solve your problem. But what this is essentially doing is:
Referencing the button which was clicked: $(this)
Referencing the parent div (or whatever element you use) to that button: $(this).closest('div')
Referencing children of that parent with the class load: $(this).closest('div').find('.load')
This way only the elements of class load which share that common parent element with the specific button (I'm guessing there should be only one for each button) are referenced when calling show().
i have a drop downlist. When Selected Index changes I wanted to handle it in javascript. So, as starting step , I tried to print the value of list item text in a textbox through javascript. But could not accomplish it successfully. Here is the dropdownlist:
<asp:DropDownList Width="300px" ID="PlaceHoldersDropDownList" runat="server"
AppendDataBoundItems="True" TabIndex="3" AutoPostBack="True"
OnSelectedIndexChanged = "PlaceHoldersDropDownList_SelectedIndexChanged" >
<asp:ListItem Value="">Select</asp:ListItem>
<asp:ListItem Value="ContactName">[Contact Name]</asp:ListItem>
<asp:ListItem Value="ProductName">[Product Name]</asp:ListItem>
<asp:ListItem Value="ProductShortName">[Product Short Name]</asp:ListItem>
<asp:ListItem Value="CurrentTime">[Current Time]</asp:ListItem>
<asp:ListItem Value="EventStartTime">[Event Start Time]</asp:ListItem>
<asp:ListItem Value="EventStopTime">[Event Stop Time]</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="tb" runat="server"></asp:TextBox>
Here is the C# code
protected void PlaceHoldersDropDownList_SelectedIndexChanged(object sender,
EventArgs e)
{
var text = PlaceHoldersDropDownList.SelectedItem.Text;
string x = text;
PlaceHoldersDropDownList.Attributes.Add("onchange", "javscript:PasteTextInEditor
('"+text+"')");
}
Here is the javascript
function PasteTextInEditor(text) {
var x = document.getElementById("<%= tb.ClientID %>");
x.value = text; }
Can you please let me know the mistake I've been doing?
first you have to set AutoPostBack to false to handle it in client side(javascript) and you don't need to add onchange event programatically, you can just write it in the <asp:DrobDownList> something like that
<asp:DropDownList Width="300px" ID="PlaceHoldersDropDownList" runat="server"
AppendDataBoundItems="True" TabIndex="3" AutoPostBack="false"
onchange="PasteTextInEditor()">
and the PasteTextInEditor method will become
function PasteTextInEditor() {
var text = $("#<%= PlaceHoldersDropDownList.ClientID %> option:selected").text();
$("#<%= tb.ClientID %>").val(text);
}
note I am using jquery syntax
Using jQuery you can make the following:
1- turn off AutoPostBack and don't handle the OnSelectedIndexChanged event:
<asp:DropDownList Width="300px" ID="PlaceHoldersDropDownList" runat="server" AppendDataBoundItems="True" TabIndex="3" >
2- add a reference to jQuery
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
3- add a "startup" script to hook the onchanged event for the dropdown list, read the javascripts comments for more details.
<script type="text/javascript">
$(function () {
var ddl = $("#<%= PlaceHoldersDropDownList.ClientID %>");
var txt = $("#<%= tb.ClientID %>");
// hook the change event for the drop down list
$(ddl).change(function (e) {
var selectedValue = $(ddl).val();
// set the selectedValue into the textBox
$(txt).val(selectedValue);
});
});
</script>
I have the code below with sets the focus on a textbox when the page loads and when the user selects a radio button.
How can I change this so that if they choose the last radio option "Mail" the focus is not set to
txtPayerName but instead to the btnSubmit control?
$(function () {
SetDefaultPaymentType();
$("#txtPayerName").focus();
$("#rdLstPaymentOptions").change(function () {
$("#txtPayerName").focus();
});
});
<asp:RadioButtonList ID="rdLstPaymentOptions" runat="server" RepeatColumns="3" RepeatDirection="vertical"
RepeatLayout="Flow" OnPreRender="rdBtnLst_PreRender" TabIndex="1"
ClientIDMode="Static">
<asp:ListItem Text="Credit Card " Value="CreditCard" ></asp:ListItem>
<asp:ListItem Text="Electronics Fund Transfer " Value="EFT"></asp:ListItem>
<asp:ListItem Text="Check By Mail " Value="Mail"></asp:ListItem>
</asp:RadioButtonList>
What if you set the change event on each radio button individually?
Something like:
$("#rdLstPaymentOptions").each(function (index) {
if (index == $("#rdLstPaymentOptions").length - 1) {
// insert code to set change event for last radio button
}
else {
($this).change = function () {
$("#txtPayerName").focus();
}
}
});
Give the radio button and the submit button a unique CSS class, then use:
$('.radioClass').click(function() {
$('.submitClass').focus()
})