I have simple code that is a dropdown list and Two buttons (named enable and disable)i want to enable and disable the dropdown list by javascript function and after button click
asp.net HTML code:
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<br />
<asp:DropDownList ID="DropDownList2" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" OnClientClick="return enable();" Text="enable" />
<asp:Button ID="Button2" runat="server" OnClientClick="return disable2();" Text="disable" />
javascript function :
function enable() {
document.getElementById("DropDownList1").disabled = false;
document.getElementById("DropDownList2").disabled = false;
return;
}
function disable() {
document.getElementById("DropDownList1").disabled = true;
document.getElementById("DropDownList2").disabled = true;
}
and pageloadlogic:public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
but i tried this many times and not getting the expected output please let me known the solution
<!DOCTYPE html>
<html>
<head>
<script>
function disable() {
document.getElementById("mySelect").disabled=true;
}
function enable() {
document.getElementById("mySelect").disabled=false;
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Apple</option>
<option>Pear</option>
<option>Banana</option>
<option>Orange</option>
</select>
<br><br>
<input type="button" onclick="disable()" value="Disable list">
<input type="button" onclick="enable()" value="Enable list">
</form>
</body>
</html>
you use this code.
Try the below, add return keyword before function call and return false in function to prevent the server postback Which made the dropdown enabled
<head runat="server">
<title></title>
<script type="text/javascript">
function enable() {
document.getElementById("DropDownList1").disabled = false;
document.getElementById("DropDownList2").disabled = false;
return false;
}
function disable() {
document.getElementById("DropDownList1").disabled = true;
document.getElementById("DropDownList2").disabled = true;
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="DropDownList1" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<br />
<asp:DropDownList ID="DropDownList2" runat="server">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" OnClientClick="return enable();" Text="enable" />
<asp:Button ID="Button2" runat="server" OnClientClick="return disable();" Text="disable" />
</div>
</form>
</body>
</html>
The obvious solution is ClientIDMode="Static" and return false; in javascript
<div>
<asp:DropDownList ID="DropDownList1" runat="server" ClientIDMode="Static">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<br />
<asp:DropDownList ID="DropDownList2" runat="server" ClientIDMode="Static">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
</asp:DropDownList>
<asp:Button ID="Button1" runat="server" OnClientClick="return enable();" Text="enable" />
<asp:Button ID="Button2" runat="server" OnClientClick="return disable();" Text="disable" />
</div>
<script>
function enable() {
document.getElementById("DropDownList1").disabled = false;
document.getElementById("DropDownList2").disabled = false;
return false;
}
function disable() {
document.getElementById("DropDownList1").disabled = true;
document.getElementById("DropDownList2").disabled = true;
return false;
}
</script>
Related
i want to show the panel 'keuze' if i click one of the radio buttons.
This is the code i have sofar, i am already trying over a hour to get it working. But i really cant find the solution so if someone could help i would really appreciate that.
<div id="object" style="position:absolute; top:300px;">
<label>Kies een object:</label>
<br />
<asp:RadioButtonList ID="rblObject" runat="server" Height="52px" OnSelectedIndexChanged="rblObject_SelectedIndexChanged">
<asp:ListItem Value="rblVloer">Vloer</asp:ListItem>
<asp:ListItem Value="rblKamer">Kamer</asp:ListItem>
</asp:RadioButtonList>
</div>
<asp:Panel ID="keuze" runat="server" style="position:absolute; top:400px;">
<asp:Label ID="Label2" runat="server" Text="Maak je keuze:"></asp:Label>
<asp:RadioButtonList ID="RadioButtonList2" runat="server">
<asp:ListItem Value="rblVierkant">Vierkant</asp:ListItem>
<asp:ListItem Value="rblKubus">Kubus</asp:ListItem>
</asp:RadioButtonList>
</asp:Panel>
Ander here is the code of the radiobuttons
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
keuze.Visible = false;
}
protected void rblObject_SelectedIndexChanged(object sender, EventArgs e)
{
if(rblObject.SelectedItem.Value == "rblVloer")
{
keuze.Visible = true;
}
}
}
Thanks for your time!
I think you need some thing like this .I have done it by jQuery
<script src="../js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#rblObject input').click(function () {
var selectedValue = $("#rblObject input:radio:checked").val();
alert('Selected Value: ' + selectedValue);
if (selectedValue == "rblVloer") {
$("#keuze").css({ display: "none" });
} else {
$("#keuze").css({ display: "" });
}
});
});
</script>
and
<div id="object" style="position:absolute; top:300px;">
<label>Kies een object:</label>
<br />
OnSelectedIndexChanged="rblObject_SelectedIndexChanged"
<asp:RadioButtonList ID="rblObject" runat="server" Height="52px" ClientIDMode="Static">
<asp:ListItem Value="rblVloer">Vloer</asp:ListItem>
<asp:ListItem Value="rblKamer">Kamer</asp:ListItem>
</asp:RadioButtonList>
</div>
<asp:Panel ID="keuze" runat="server" style="position:absolute; top:400px;" ClientIDMode="Static">
<asp:Label ID="Label2" runat="server" Text="Maak je keuze:"></asp:Label>
<asp:RadioButtonList ID="RadioButtonList2" runat="server">
<asp:ListItem Value="rblVierkant">Vierkant</asp:ListItem>
<asp:ListItem Value="rblKubus">Kubus</asp:ListItem>
</asp:RadioButtonList>
</asp:Panel>
Note: no need to postback
ClientIDMode="Static"
is necessary to get exact id of Control.
And make sure jQuery is loaded to perform this.
I have a aspx is like shown below
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<asp:UpdatePanel runat="server" ID="panel">
<ContentTemplate>
<asp:Button runat="server" id="bt" text="partial postback" OnClick="E" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" text="full postback" OnClick="J" />
<asp:UpdateProgress runat="server" ID="progress" DynamicLayout="true" AssociatedUpdatePanelID="panel">
<ProgressTemplate>
<div class="divWaiting">
<asp:Label ID="lbl" runat="server" Text="OK" />
<asp:Image ID="imgWait" runat="server" ImageAlign="Middle" ImageUrl="images/indicator.gif" />
</div>
</ProgressTemplate>
</asp:UpdateProgress>
On Code Behind I have a function to update my label after making the thread sleep for 3 seconds
public void E(Object sender, EventArgs e)
{
System.Threading.Thread.Sleep(3000);
Label lbl = (Label)progress.FindControl("lbl");
if (lbl.ToString()!= null)
{
lbl.Text = "SomeThing";
}
update = true;
}
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript" language="javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
var elem = args.get_postBackElement();
ActivateAlertDiv('visible', 'AlertDiv', elem.value + ' processing...');
}
function EndRequestHandler(sender, args) {
ActivateAlertDiv('hidden', 'AlertDiv', '');
}
function ActivateAlertDiv(visstring, elem, msg) {
var adiv = $get(elem);
adiv.style.visibility = visstring;
adiv.innerHTML = msg;
}
</script>
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="Server">
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" GroupingText="Update Panel">
Last update:
<%= DateTime.Now.ToString()%>.
<br />
<asp:CheckBox runat="server" Text="Checkbox1" />
<asp:Button runat="server" ID="Button1" Text="Process 1" OnClick="ProcessClick_Handler" />
<asp:Button runat="server" ID="Button2" Text="Process 2" OnClick="ProcessClick_Handler" />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<div id="AlertDiv" class="AlertStyle">
</div>
</div>
</form>
Button1 and Button2 fired the beginRequest event but Checkbox1 didn't.
You need to set the AutoPostback to true in the checkbox:
<asp:CheckBox ID="CheckBox1" runat="server" Text="Checkbox1" AutoPostBack="true"/>
You must to to set AutoPostBack property of CheckBox to True
Add AutoPostBack="true" and add event oncheckedchanged="Checkbox1_CheckedChanged1"
<asp:CheckBox runat="server" Text="Checkbox1" AutoPostBack="true"
oncheckedchanged="Checkbox1_CheckedChanged1"/>
I use a timer and updatepanel to show clock in my page (Just an example).
Using this codes in my aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<script type="text/javascript">
</script>
<script runat="server">
protected void btnClick(object sender, EventArgs e)
{
for (int i = 0; i < 100000000; i++)
{
txt.Text = "Denis Storti";
}
}
protected void TimerTick(object sender, EventArgs e)
{
DropDownList1.Focus();
ScriptManager1.SetFocus(DropDownList1);
for (int i = 0; i < 100000000; i++)
{
txt.Text = "Timer Tick";
//upnBusca.Update();
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<script type="text/javascript">
function Cancel() {
Sys.WebForms.PageRequestManager.getInstance().abortPostBack();
}
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'Timer1') {
$get('UpdateProgress1').style.display = "block";
}
}
function EndRequest(sender, args) {
if (postBackElement.id == 'Timer1') {
$get('UpdateProgress1').style.display = "none";
}
}
</script>
<div style="padding-left: 20%; padding-top: 10%">
<p>
<asp:Timer ID="Timer1" runat="server" Interval="1000" OnTick="TimerTick">
</asp:Timer>
<asp:UpdatePanel ID="upnBusca" UpdateMode="Conditional" ChildrenAsTriggers="false"
runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnBusca" EventName="Click" />
</Triggers>
<ContentTemplate>
<asp:TextBox ID="txt" runat="server">
</asp:TextBox>
<asp:Button ID="btnBusca" runat="server" OnClick="btnClick" Text="Busca Nome" />
<%=DateTime.Now.ToString() %>
<asp:UpdatePanel ID="upnDate" UpdateMode="Conditional" ChildrenAsTriggers="false"
runat="server">
<ContentTemplate>
<%=DateTime.Now.ToString() %>
<br />
<asp:DropDownList ID="DropDownList1" runat="server"
Width="110px">
<asp:ListItem>1</asp:ListItem>
<asp:ListItem>2</asp:ListItem>
<asp:ListItem>3</asp:ListItem>
<asp:ListItem>4</asp:ListItem>
<asp:ListItem>5</asp:ListItem>
<asp:ListItem>6</asp:ListItem>
<asp:ListItem></asp:ListItem>
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
<asp:AsyncPostBackTrigger ControlID="DropDownList1" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress DisplayAfter="0" ID="UpdateProgress1" runat="server" DynamicLayout="False">
<ProgressTemplate>
<span style="font-size: large">Processing...</span>
<asp:LinkButton ID="LinkButton1" runat="server" OnClientClick="Cancel(); return false;"
Text="Cancel" />
</ProgressTemplate>
</asp:UpdateProgress>
</p>
</div>
</form>
</body>
</html>
I choose a dropdownlist this ajax code cause the dropdownlist unfocused and close.
how can I maintain focus on this dropdownlist.
any help would be appreciated. Thanks
How to use this code working if i use web user control of asp.net ?
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:CheckBox ID="CheckBox1" runat="server" /><br />
<asp:CheckBox ID="CheckBox2" runat="server" /><br />
<asp:CheckBox ID="CheckBox3" runat="server" /><br />
<asp:CheckBox ID="CheckBox4" runat="server" /><br />
<asp:CheckBox ID="CheckBox5" runat="server" /><br />
<asp:CheckBox ID="CheckBox6" runat="server" /><br />
<asp:CheckBox ID="CheckBox7" runat="server" /><br />
<asp:CheckBox ID="CheckBox8" runat="server" /><br />
<asp:CheckBox ID="CheckBox9" runat="server" /><br />
<asp:CheckBox ID="CheckBox10" runat="server" /><br />
<asp:Button ID="Button1" runat="server" Text="Button" />
</div>
</form>
<script src ="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
<title>Untitled Page</title>
<script type="text/javascript">
$("#sumit").click(function(){
var vCheckedCBCount = $("input:checkbox").filter(function(index){
return $(this)[0].checked == true;
}).length;
if(vCheckedCBCount > 5)
{
alert('You cannot check more than 5 check box.');
return false;
}
});
</script >
</body>
</html>
Couple of things:
First
$("#sumit").click(function(){...}
Is looking for an HTML element with an id of 'sumit' (the # means ID in JQuery).
If you view the source of your page you'll see that Button1 when converted by ASP.Net into an HTML-side button won't have that ID as ASP.Net will generate a fairly unreadable unique clientside Id - something full of $ signs and underscores probably.
Jquery can find your button by its class using $('.myClass') - the '.' means 'class' just as '#' means 'ID' so just add the class submit to your ASP.Net Button1:
<asp:Button ID="Button1" runat="server" Text="Button" CssClass='submit' />
Then modify your JavaScript call:
Firstly, ensure the eventhandlers are getting wired up when the document is ready by wrapping up your javascript inside the standard JQuery syntax to do this:
$(document).ready(function () {
//Your Javascript goes in here.
});
So when re-worked it looks like this (I've moved a few things around and taken out your <title> element.)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function () {
$(".submit").click(function () {
/* this code is here for demo purposes only - 5arx*/
var numchecked = 0;
$('input:checkbox').each(function () {
if ($(this).attr('checked')) {
//alert('checked');
numchecked++;
}
});
if (numchecked > 5) {
alert('You cannot check more than 5 check box.');
}
return false; //This will stop your ASP.Net button submitting the form via a Postback.
/* Your orginal code.
var vCheckedCBCount = $("input:checkbox").filter(function (index) {
return $(this)[0].checked == true;
}).length;
if (vCheckedCBCount > 5) {
alert('You cannot check more than 5 check box.');
}
*/
});
});
</script>
<div>
<asp:CheckBox ID="CheckBox1" runat="server" /><br />
<asp:CheckBox ID="CheckBox2" runat="server" /><br />
<asp:CheckBox ID="CheckBox3" runat="server" /><br />
<asp:CheckBox ID="CheckBox4" runat="server" /><br />
<asp:CheckBox ID="CheckBox5" runat="server" /><br />
<asp:CheckBox ID="CheckBox6" runat="server" /><br />
<asp:CheckBox ID="CheckBox7" runat="server" /><br />
<asp:CheckBox ID="CheckBox8" runat="server" /><br />
<asp:CheckBox ID="CheckBox9" runat="server" /><br />
<asp:CheckBox ID="CheckBox10" runat="server" /><br />
<asp:Button ID="Button1" runat="server" Text="Button" CssClass="submit" />
</div>
Hope this helps. For more useful JQuery stuff, have a look at www.visualjquery.com - its an interactive JQuery testing/learning tool.
Hth. Good luck :-)
$("#sumit") is looking for an element with ID="sumit", which neither of your elements have. Assuming you want to hook your button's click event, try $("#Button1").