How to assign a value to a textbox using function on a js file

Question

User426001450 posted

I’m trying to assign a value to a textbox using js. I’m using master pages and I have a js file. My js file is a complete blank page with just two functions. No headings or anything else, just the functions. Please let me know if I need something else. These are functions:

// alert
function msg() {
  alert("Hello from the .js file");
}

// Populate textbox
function Populate() {
    var txtCont = document.getElementById('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("newTextBox").ClientID %>');
    txtCont.value = 15;   
  }

At the top of the master page I reference my js file like this:

<script src='<%=ResolveClientUrl("~/JS_Functions/JavaScript.js") %>' type="text/javascript"></script>

And on my practice aspx.net page I do have the following code:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
            
    <asp:TextBox ID="newTextBox" runat="server" Width="71px"></asp:TextBox><br /><br />
       
    <asp:Button ID="btnMaster" runat="server" Text="Button" OnClientClick="return Populate();" Width="71px"/><br /><br />
    
    <asp:Button ID="Button1" runat="server" Text="Alert notification" OnClientClick="return msg();" Width="137px"/><br />
    
</asp:Content>

When I call the msg() function with the ‘alert’ it pops up and everything is working fine. However, when I call the Populate() function, nothing happens at all. Why is not working? What is wrong? I have been working on this for hours, please help. Thanks !!

Answer 1

User1535942433 posted

Hi vstorpedo,

Accroding to your description and codes,I suggest you could write Populate function in the master.page instead of js.file.

You must write clientid in the function,however, the javascript file is not served by the ASP.Net parser. Thus, the <% %> is ignored and output.So the function need to be write out

of the javascript file.

More details,you could refer to below codes:

javascript.file:

function msg() {
  alert("Hello from the .js file");
}

Master.page:

 <script>
        function Populate() {
            var txtCont = document.getElementById('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("newTextBox").ClientID %>');
            txtCont.value = 15;
        }
    </script>
    <script src="Scripts/JavaScript.js"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

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

Content.page:

<%@ Page Title="" Language="C#" MasterPageFile="~/Site5.Master" AutoEventWireup="true" CodeBehind="WebForm55.aspx.cs" Inherits="Demo.WebForm55" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     <asp:TextBox ID="newTextBox" runat="server" Width="71px"></asp:TextBox><br /><br />       
    <asp:Button ID="btnMaster" runat="server" Text="Button" OnClientClick="return Populate();" Width="71px"/><br /><br />
    <asp:Button ID="Button1" runat="server" Text="Alert notification" OnClientClick="return msg();" Width="137px"/><br />
</asp:Content>

Result:

More details,you could refer to below articles:

https://forums.asp.net/t/1403747.aspx?Not+able+to+use+ClientID+in+javascript+

https://www.dotnetcurry.com/ShowArticle.aspx?ID=274

Best regards,

Yijing Sun

Answer 2

User426001450 posted

Hello yij sun

Thanks for your response, I do appreciate your help. 

Listen, when you said: 

yij sun

Accroding to your description and codes,I suggest you could write Populate function in the master.page instead of js.file. You must write clientid in the function,however, the javascript file is not served by the ASP.Net parser. Thus, the <% %> is ignored and output.So the function need to be write out of the javascript file.

 <script>
        function Populate() {
            var txtCont = document.getElementById('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("newTextBox").ClientID %>');
            txtCont.value = 15;
        }
    </script>
    <script src="Scripts/JavaScript.js"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>

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

I understand that, I had it like that before. But the problem is that I have a form and some additional textbox, so, it works for one page only. All other pages that use the same master page are giving me errors because the master page is looking for the particular textbox on each page and errors pops up since it couldn't find it.

What I'm trying to implement is a countdown timer that I found at this link: https://www.java-scripts.net/javascripts/Countdown-Timer.phtml

According to this link I should have that between my <body> tags on my master page. I did that, it works, but once again only one page, all the others are giving me errors.

This is how my master page looks with this js code.

<body>


<form name="counter"><input type="text" size="8" name="d2"></form> 

<script> 

    // Countdown timer 
    var milisec = 0
    var seconds = 30
    document.counter.d2.value = '30'

    function display() {
        if (milisec <= 0) {
            milisec = 9
            seconds -= 1
        }
        if (seconds <= -1) {
            milisec = 0
            seconds += 1
        }
        else
            milisec -= 1
        document.counter.d2.value = seconds + "." + milisec
        setTimeout("display()", 100)

        var txtCont = document.getElementById('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("txtContent300").ClientID %>');
        txtCont.value = seconds + "." + milisec
    }
    display()
   
</script> 

======= More code go down here

And this is the only aspx,net page that is working:

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
                   
    <asp:TextBox ID="txtContent300" runat="server" Text="none" Width="71px"></asp:TextBox><br /><br />
       
    <asp:Button ID="btnMaster" runat="server" Text="Button" OnClientClick="return display();" Width="71px"/><br /><br />
       
</asp:Content>

All other pages that use this master page are giving me the following error:

Server Error in '/' Application.

---

Object reference not set to an instance of an object.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.NullReferenceException: Object reference not set to an instance of an object.

Source Error:

Line 331: setTimeout("display()", 100) Line 332: Line 333: var txtCont = document.getElementById('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("txtContent300").ClientID %>'); Line 334: txtCont.value = seconds + "." + milisec Line 335: }

I tried the following code but it didn't work either:

var element = document.getElementById('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("txtContent300").ClientID %>');
        
        if (typeof (element) != 'undefined' && element != null) {
            var txtCont = document.getElementById('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("txtContent300").ClientID %>');
            txtCont.value = seconds + "." + milisec;
        }

What should I do here?

Thanks a lot again for your help.

Answer 3

User-775646050 posted

Set aside the Asp.net form stuff for a second and think about how what you are trying to do involves only Javascript nothing else. I got your example to run by simply setting  ClientIDMode="Static". Now you don't need to deal with this nonsense: 

var txtCont = document.getElementById('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("newTextBox").ClientID %>');

You will be able to access a standard html Id and won't get asp.net errors. I'm confused about whether you want this timer on every page or on one page. If every page, then keep your javascript in the master page otherwise just put it in your .aspx page.

Answer 4

User426001450 posted

Hello

Thanks for your help. You said:

Set aside the Asp.net form stuff for a second and think about how what you are trying to do involves only Javascript nothing else. I got your example to run by simply setting  ClientIDMode="Static". Now you don't need to deal with this nonsense: 

var txtCont = document.getElementById('<%= Page.Master.FindControl("ContentPlaceHolder1").FindControl("newTextBox").ClientID %>');

I'm assuming that you are talking about setting newTextBox to ClientIDMode="Static", if that is what you mean, I did it and the error is still popping up. The problem with what you call the nonsense is that I need to locate that control in order to assign a value to it. So, I don't know what so you mean by 'deal with this nonsense'. Do you mean that I don't need that code sentence anymore or that the sentence would not give me any error after I add  ClientIDMode="Static". Please explain, because I added it already and the error is there anyway.

After that you said:

I'm confused about whether you want this timer on every page or on one page. If every page, then keep your javascript in the master page otherwise just put it in your .aspx page.

I want it only on one page, however it is not working when I add the code to the page content place holder .

Once again, thanks for your help

Answer 5

User1535942433 posted

Hi vstorpedo,

Accroding to your description,I suggest you could add the javascript on the one page.The master page provide an object model and it  id centralized with common functionality of

all pages.So it's not necessary that add the countdown-timer function in the master page.

More details,you could refer to below codes:

ContentPage1:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <script>
    // Countdown timer 
    var sec = 30;
    var min = 0
    var hour = 0;
    var t;

    function display() {
        sec -= 1
        if ((sec == 0) && (min == 0) && (hour == 0)) {
            setTimeout("self.close()", 1000);
            return;
         }
        if (sec < 0) {
            sec = 59;
            min -= 1;
        }
        if (min < 0) {
            min = 59;
            hour -= 1;
        }
       else
        document.getElementById("<%=txtContent300.ClientID%>").value = hour + ":" + min + ":" + sec;
        t = setTimeout("display()", 1000);
    }
    window.onload = display; 
</script> 
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
    <asp:TextBox ID="txtContent300" runat="server" Text="none" Width="71px"></asp:TextBox><br /><br />
    <asp:Button ID="btnMaster" runat="server" Text="Button" OnClientClick="return display();" Width="71px"/><br /><br />
</asp:Content>

ContentPage2:

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
     <asp:TextBox ID="newTextBox" runat="server" Width="71px"></asp:TextBox><br /><br/>       
    <asp:Button ID="btnMaster" runat="server" Text="Button" OnClientClick="return Populate();" Width="71px"/><br /><br />
    <asp:Button ID="Button1" runat="server" Text="Alert notification" OnClientClick="return msg();" Width="137px"/><br />
</asp:Content>

Master.page:

<head runat="server">
    <title></title>
    <script src="Scripts/JavaScript.js"></script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
             <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
            </asp:ContentPlaceHolder>
        </div>
    </form>
</body>
</html>

Result:

More details,you could refer to below article:

https://www.quanzhanketang.com/aspnet/aspnet_masterpages.html

Best regards,

Yijing Sun

Answer 6

User426001450 posted

Thanks for your help. It is working now,