简体   繁体   中英

Javascript or jquery is not working in asp.net page

I am using a master page on a child page in my child page my client scripts are not working. Please help me on this issue.

<%@ Page Title="" Language="C#" MasterPageFile="~/Store.Master" AutoEventWireup="true" CodeBehind="NewStockEntry.aspx.cs" Inherits="StoreManagement.Admin.NewStockEntry" %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<script type="text/javascript">
    function resetDataEntryForm()
    {
        document.getElementById('txtProductName').value = "";
        document.getElementById('txtModelNumber').value = "";
        document.getElementById('txtBrandName').value = "";
        document.getElementById('txtPrice').value = "";
    }
</script>
<div>
    <center>
        <table width="100%">
            <tr>
                <td width="100px" valign="top">Enter Bill No: </td>

                <td align="left" width="200px">
                    <asp:TextBox ID="txtBillNumber" runat="server" CssClass="textbox" Width="100px" required="true"/><br />
                    <asp:RequiredFieldValidator Font-Bold="true"  ID="rfvBillNumber" runat="server" ErrorMessage="*Required" ControlToValidate="txtBillNumber" ValidationGroup="val" ForeColor="Red"></asp:RequiredFieldValidator>
                    <br />
                    <asp:RegularExpressionValidator ID="revBillNumber" runat="server"
                     ControlToValidate="txtBillNumber"
                     ErrorMessage="Only numeric allowed." ForeColor="Red"
                     ValidationExpression="^[0-9]*$" ValidationGroup="val">
                     </asp:RegularExpressionValidator>
                </td>

                <td width="90px" valign="top">Merchant </td>
                <td align="left" valign="top" width="150px">
                    <asp:TextBox ID="txtMerchantName" runat="server" CssClass="textbox" Width="150px" required="true"/><br />
                    <asp:RequiredFieldValidator  ID="rfvMerchantName" runat="server" ErrorMessage="*Required" ValidationGroup="val" ControlToValidate="txtMerchantName" ForeColor="Red"></asp:RequiredFieldValidator>&nbsp
                    <br />
                </td>
                <td align="left" valign="top" width="300px">
                    Date Of Purchase
                    <asp:TextBox ID="txtPurchaseDate" runat="server" CssClass="textbox" type="date" Width="150px" required="true"/>
                </td>
                <td align="right" width="100px">

                    <asp:Button ID="btnSaveDataToDataBase" runat="server" Text="Save" CssClass="button" OnClick="btnSave_Click" CausesValidation="true" ValidationGroup="val" /></td>

            </tr>

        </table>
        <table Class="CSS_Table_Example">
            <tr>
                <td>Type</td>
                <td>Value</td>
                <td width="180px">&nbsp;</td>
            </tr>
            <tr height="20px">
                <td >Product Name</td>
                <td>
                    <asp:DropDownList ID="ddlProductName" runat="server" CssClass="textbox" AutoPostBack="True" OnSelectedIndexChanged="ddlProductName_SelectedIndexChanged"/>
                    <asp:TextBox ID="txtProductName" runat="server" CssClass="textbox" Visible="false" required="true"/>
                </td>
                <td>
                    <asp:RequiredFieldValidator  ID="rfvProductName" runat="server" ErrorMessage="Enter Product Name" ControlToValidate="txtProductName" ValidationGroup="val" ForeColor="Red"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr hight="20px">
                <td>Model Number</td>
                <td><asp:TextBox ID="txtModelNumber" runat="server" CssClass="textbox" required="true"/></td>
                <td>
                    <asp:RequiredFieldValidator ID="rfvModelNumber" runat="server" ErrorMessage="Enter Model Number" ControlToValidate="txtModelNumber" ValidationGroup="val" ForeColor="Red"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="revModelNumber" runat="server"
                     ControlToValidate="txtModelNumber"
                     ErrorMessage="Neumeric Only" ForeColor="Red"
                     ValidationExpression="^[0-9]*$" ValidationGroup="val" />
                </td>
            </tr>
            <tr>
                <td>Brand/Company Name</td>
                <td><asp:TextBox ID="txtBrandName" runat="server" CssClass="textbox" required="true"/></td>
                <td >
                    <asp:RequiredFieldValidator ID="rfvBrandName" runat="server" ErrorMessage="Enter Brand Name" ControlToValidate="txtBrandName" ValidationGroup="val" ForeColor="Red"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>Prcie</td>
                <td><asp:TextBox ID="txtPrice" runat="server" CssClass="textbox" required="true"/></td>
                <td>
                    <asp:RequiredFieldValidator ID="rfvPrice" runat="server" ErrorMessage="Enter Price" ControlToValidate="txtPrice" ValidationGroup="val" ForeColor="Red"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="revPrice" runat="server"
                     ControlToValidate="txtPrice"
                     ErrorMessage="Neumeric Only" ForeColor="Red"
                     ValidationExpression="^[0-9]*$" ValidationGroup="val"/>
                </td>
            </tr>
            <tr>
                <td>New Quantity</td>
                <td><asp:TextBox ID="txtQuantity" runat="server" CssClass="textbox" required="true"/>
                </td>
                <td>
                    <asp:RequiredFieldValidator ID="rfvQuantity" runat="server" ErrorMessage="Enter Quantity" ControlToValidate="txtQuantity" ValidationGroup="val" ForeColor="Red"></asp:RequiredFieldValidator>
                    <asp:RegularExpressionValidator ID="revQuantity" runat="server"
                     ControlToValidate="txtQuantity"
                     ErrorMessage="Neumeric Only" ForeColor="Red"
                     ValidationExpression="^[0-9]*$" ValidationGroup="val"/>
                </td>
            </tr>
            <tr>
                <td>Tax</td>
                <td>
                    <asp:DropDownList ID="ddlTax" runat="server" CssClass="textbox" AutoPostBack="True" OnSelectedIndexChanged="ddlTax_SelectedIndexChanged"/>
                    <asp:TextBox ID="txtTax" runat="server" CssClass="textbox" Visible="false" required="true"/>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <asp:Button ID="btnClear" runat="server" Text="Clear" CssClass="button" OnClick="btnClear_Click" OnClientClick="resetDataEntryForm()" />
                    &nbsp&nbsp  
                    <asp:Button ID="btnAdd" runat="server" Text="Add" CssClass="button" OnClick="btnAdd_Click" Enabled="False" CausesValidation="true" ValidationGroup="val" />
                </td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
        <br />
        <div class="divContent" style="background-color:#59a5dd">
            <asp:Label ID="lblPoster" runat="server" Text="New Stock Items" Font-Size="20px" ForeColor="Black" Font-Bold="true"/>
        </div>

Surely, It won't work because the element id you are trying to find out is not present in DOM. In your question you have mentioned that you are using a master page by default asp.net creates a content placeholder tag like this when a master page gets created.

<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>

now when a page is created with master page then whatever server control gets created

<asp:TextBox ID="txtProductName" runat="server" CssClass="textbox" Visible="false" required="true"/>

when it gets render into HTML all its id would eventually gets changed. Like txtProductName would become ContentPlaceHolder1_txtProductName and it's name attribute would become ctl00$ContentPlaceHolder1$txtProductName . Thus the way you have done it won't get you the output as there no id named txtProductName in DOM. Therefore you need to add ClientID in order to make it work properly inside an embedded code block.

function resetDataEntryForm() { 
    document.getElementById('<%= txtProductName.ClientID%>').value = ""; 
    document.getElementById('<%= txtModelNumber.ClientID%>').value = ""; 
    document.getElementById('<%= txtBrandName.ClientID%>').value = ""; 
    document.getElementById('<%= txtPrice.ClientID%>').value = ""; 
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM