ayha1999
asked on
Dropdonwlist inside Datalist
Hi,
How can I disable Dropdownlist control inside a Datalist control on changing selection in the drowpdwnlist using javascript?
Thanks
ayha
How can I disable Dropdownlist control inside a Datalist control on changing selection in the drowpdwnlist using javascript?
Thanks
ayha
ASKER
The id of the datalist control is DataList1, and the dropdownlist's is id ddlMat. how can I use it in the page?
Thanks
Thanks
Did you tried to replace Datalist_ID by DataList1?
ASKER
here I want to disable button1 but not mentioned in the script.
javascript :
replace : this.disabled
by : document("<%= Button1.ClientID %>").disabled
jQuery :
replace : $(this)
by : $("#<%= Button1.ClientID %>")
replace : this.disabled
by : document("<%= Button1.ClientID %>").disabled
jQuery :
replace : $(this)
by : $("#<%= Button1.ClientID %>")
ASKER
Not working. may something wrong what I tried.
<asp:DataList ID="DataList1" runat="server" CellPadding="4" ForeColor="#333333" GridLines="Horizontal">
<asp:DropDownList ID="ddlMat" runat="server" name="ddlMat">
<script>
window.onload = function() {
var selects = document.getElementById("<%= DataList1.ClientID %>").getElementsByTagName("ddlMat");
for(var i=0;i<selects.length;i++) {
selects[i].onchange = function() {
document("<%= Button1.ClientID %>").disabled;
}
}
}
</script>
do a right click on your page in your browser, choose view source to post it here
ASKER
<!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><title>
</title>
<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
.txtQty
{
text-align: right;
}
.ddlDrop
{
text-align: left;
}
.style1
{
width: 98%;
}
.style2
{
font-weight: bold;
width: 122px;
}
.style3
{
font-weight: bold;
text-align: center;
}
.style4
{
font-weight: bold;
text-align: center;
width: 54px;
}
.style5
{
width: 54px;
text-align: center;
}
.style6
{
font-weight: bold;
text-align: center;
width: 63px;
}
.style7
{
width: 63px;
text-align: center;
}
.style8
{
font-weight: bold;
text-align: center;
width: 52px;
}
.style9
{
width: 52px;
text-align: center;
}
.style10
{
}
.style12
{
text-align: center;
}
.style13
{
width: 100%;
}
.style14
{
font-weight: bold;
text-align: center;
width: 246px;
}
.style15
{
width: 246px;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".txtQty").keyup(function () {
$("#btnQuote").attr('disabled', 'disabled');
});
});
</script>
<script>
window.onload = function() {
var selects = document.getElementById("DataList1").getElementsByTagName("ddlMat");
for(var i=0;i<selects.length;i++) {
selects[i].onchange = function() {
document("btnQuote").disabled;
}
}
}
</script>
</head>
<body>
<form method="post" action="quote.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE4NjE2NTQ0MzcPZBYCAgMPZBYCAgMPPCsACQEADxYEHghEYXRhS2V5cxYAHgtfIUl0ZW1Db3VudAICZBYEAgEPZBYOAgEPDxYCHgRUZXh0BQZnZi5zdGxkZAIDDw8WAh8CBQQxMi4xZGQCBQ8PFgIfAgUDMi4yZGQCBw8PFgIfAgUEMy4wNWRkAgkPDxYCHwIFBzAuODExOTFkZAILDxAPFgIeC18hRGF0YUJvdW5kZ2RkZGQCDw8PFgIfAgUCNzNkZAIDD2QWDgIBDw8WAh8CBQdGYW4uc3RsZGQCAw8PFgIfAgUDNi41ZGQCBQ8PFgIfAgUDNi41ZGQCBw8PFgIfAgUBMmRkAgkPDxYCHwIFBTAuODQ1ZGQCCw8QDxYCHwNnZGRkZAIPDw8WAh8CBQI3NGRkZAH6aQE4d2CjQSiIlXXsqpzU6315hPlC9XZWdZGhdxlg" />
</div>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAA3vLCW0SNDpda+3cOueGsxYYAHJ5UR9wmontuUojUVqjLdGUIypDA7bUlmCXzOU0Tdi0JlvMbohFhMJd9abwGXtMIZyliyrPldRUWh9KUPCQylodthDw8NPU+0dds7UoqkP+kzhUcww+IoH1yZtP2iMK878q8inIvJRC0i51P0Pfa/qbww0syzrGVphedTuzTElWRTAKDGEUJSZoMBD9Z6x0/wD7DRYIjUeA092mD6wRBunUC66sgsPgZkHYlVHbiTngUt4Nh83r9z/H8jrnvAq29GWTf0T6b2TQTvjcTvCnzd2aJgeZvSwFTCU9PAXB4w=" />
</div>
<div>
<table class="style13">
<tr>
<td>
</td>
<td>
Total price:
<span id="lblPrice" style="color:Blue;font-size:X-Large;font-weight:bold;"></span>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
</tr>
</table>
<br />
<br />
<table id="DataList1" cellspacing="0" cellpadding="4" rules="rows" border="1" style="color:#333333;width:681px;border-collapse:collapse;">
<tr>
<td style="color:White;background-color:#507CD1;font-weight:bold;">
</td>
</tr><tr>
<td style="background-color:#EFF3FB;border-style:Outset;">
<table class="style1">
<tr>
<td class="style2">
Part Name
</td>
<td class="style14">
</td>
<td class="style8">
X
</td>
<td class="style6">
Y
</td>
<td class="style4">
Z
</td>
<td class="style3">
Voume
</td>
</tr>
<tr>
<td class="style10" colspan="2">
<span id="DataList1_lblOFileName_0" class="LabelStyle">gf.stl</span>
</td>
<td class="style9">
<span id="DataList1_lblX_0" class="LabelStyle">12.1</span>
</td>
<td class="style7">
<span id="DataList1_lblY_0" class="LabelStyle">2.2</span>
</td>
<td class="style5">
<span id="DataList1_lblZ_0" class="LabelStyle">3.05</span>
</td>
<td class="style12">
<span id="DataList1_lblX2_0" class="LabelStyle">0.81191</span>
</td>
</tr>
<tr>
<td class="style10" colspan="6">
</td>
</tr>
<tr>
<td class="style10">
<strong>Material:</strong>
</td>
<td class="style15">
<select name="DataList1$ctl01$ddlMat" id="ddlMat" name="ddlMat">
<option selected="selected" value=".5">Material 1</option>
<option value="1">Material 2</option>
<option value="1.5">Material 3</option>
</select>
</td>
<td class="style9">
<strong>Qty.</strong>
</td>
<td class="style7">
<input name="DataList1$ctl01$txtQty" type="text" id="DataList1_txtQty_0" class="txtQty" style="width:49px;" />
</td>
<td class="style5">
</td>
<td class="style12">
<span id="DataList1_lblId_0" class="LabelStyle">73</span>
</td>
</tr>
<tr>
<td class="style10">
</td>
<td class="style15">
</td>
<td class="style9">
</td>
<td class="style7">
</td>
<td class="style5">
</td>
<td class="style12">
<input type="submit" name="DataList1$ctl01$btnDelete" value="Delete" id="DataList1_btnDelete_0" />
</td>
</tr>
</table>
</td>
</tr><tr>
<td>
<hr />
</td>
</tr><tr>
<td style="background-color:White;border-style:Outset;">
<table class="style1">
<tr>
<td class="style2">
Part Name
</td>
<td class="style14">
</td>
<td class="style8">
X
</td>
<td class="style6">
Y
</td>
<td class="style4">
Z
</td>
<td class="style3">
Voume
</td>
</tr>
<tr>
<td class="style10" colspan="2">
<span id="DataList1_lblOFileName_1" class="LabelStyle">Fan.stl</span>
</td>
<td class="style9">
<span id="DataList1_lblX_1" class="LabelStyle">6.5</span>
</td>
<td class="style7">
<span id="DataList1_lblY_1" class="LabelStyle">6.5</span>
</td>
<td class="style5">
<span id="DataList1_lblZ_1" class="LabelStyle">2</span>
</td>
<td class="style12">
<span id="DataList1_lblX2_1" class="LabelStyle">0.845</span>
</td>
</tr>
<tr>
<td class="style10" colspan="6">
</td>
</tr>
<tr>
<td class="style10">
<strong>Material:</strong>
</td>
<td class="style15">
<select name="DataList1$ctl03$ddlMat" id="ddlMat" name="ddlMat">
<option selected="selected" value=".5">Material 1</option>
<option value="1">Material 2</option>
<option value="1.5">Material 3</option>
</select>
</td>
<td class="style9">
<strong>Qty.</strong>
</td>
<td class="style7">
<input name="DataList1$ctl03$txtQty" type="text" id="DataList1_txtQty_1" class="txtQty" style="width:49px;" />
</td>
<td class="style5">
</td>
<td class="style12">
<span id="DataList1_lblId_1" class="LabelStyle">74</span>
</td>
</tr>
<tr>
<td class="style10">
</td>
<td class="style15">
</td>
<td class="style9">
</td>
<td class="style7">
</td>
<td class="style5">
</td>
<td class="style12">
<input type="submit" name="DataList1$ctl03$btnDelete" value="Delete" id="DataList1_btnDelete_1" />
</td>
</tr>
</table>
</td>
</tr>
</table>
<br />
</div>
<input type="submit" name="btnUpdate" value="Update Price" id="btnUpdate" />
<br />
<br />
<input type="submit" name="btnQuote" value="Quote" id="btnQuote" />
</form>
</body>
</html>
test page : http://jsfiddle.net/tHyTV/
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
It working in the link but the script displayed there is different.
$(document).ready(function () {
$(".txtQty").keyup(function () {
$("#btnQuote").attr('disabled', 'disabled');
});
$("select", "#DataList1").change(function() {
$("#btnQuote").attr("disabled", true);
})
});
Just add this to your current document.ready block :
Did you tried?
ASKER
It is working now.
Thanks.
Thanks.
Javascript :
Open in new window
jQuery :Open in new window