Link to home
Start Free TrialLog in
Avatar of ayha1999
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
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Datalist_ID is the value of the ID attribute of your datalist

Javascript :
window.onload = function() {
      var selects = document.getElementById("<%= Datalist_ID.ClientID %>").getElementsByTagName("select");
     for(var i=0;i<selects.length;i++) {
            selects[i].onchange = function() {
                  this.disabled = true;
            }
     }
}

Open in new window

jQuery :
$(document).ready(function() {
      $("select", "#<%= Datalist_ID.ClientID %>").change(function() {
            $(this).attr("disabled", true);
       })
})

Open in new window

Avatar of ayha1999
ayha1999

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
Did you tried to replace Datalist_ID by DataList1?
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 %>")
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>

Open in new window

do a right click on your page in your browser, choose view source to post it here
<!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>
                    &nbsp;
                </td>
                <td>
                    Total price:
                    <span id="lblPrice" style="color:Blue;font-size:X-Large;font-weight:bold;"></span>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    &nbsp;
                </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">
                            &nbsp;
                        </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>
                            &nbsp;
                        </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">
                            &nbsp;
                        </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">
                            &nbsp;
                        </td>
                        <td class="style12">
                            <span id="DataList1_lblId_0" class="LabelStyle">73</span>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="style10">
                            &nbsp;
                        </td>
                        <td class="style15">
                            &nbsp;
                        </td>
                        <td class="style9">
                            &nbsp;
                        </td>
                        <td class="style7">
                            &nbsp;
                        </td>
                        <td class="style5">
                            &nbsp;
                        </td>
                        <td class="style12">
                            &nbsp;
                            <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">
                            &nbsp;
                        </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>
                            &nbsp;
                        </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">
                            &nbsp;
                        </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">
                            &nbsp;
                        </td>
                        <td class="style12">
                            <span id="DataList1_lblId_1" class="LabelStyle">74</span>
                            &nbsp;
                        </td>
                    </tr>
                    <tr>
                        <td class="style10">
                            &nbsp;
                        </td>
                        <td class="style15">
                            &nbsp;
                        </td>
                        <td class="style9">
                            &nbsp;
                        </td>
                        <td class="style7">
                            &nbsp;
                        </td>
                        <td class="style5">
                            &nbsp;
                        </td>
                        <td class="style12">
                            &nbsp;
                            <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>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of leakim971
leakim971
Flag of Guadeloupe image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
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);
       })

        });

Open in new window

Just add this to your current document.ready block :

Did you tried?
It is working now.

Thanks.