Having trouble transferring ASP server control value to a Javascript function

Currently working with ASP.NET 2.0.

My Entry Form contains various ASP.NET Server Controls, such as TextBoxes. I want to pass the value of a TextBox on the onBlur event. Here is an example of a TextBox code:

<asp:TextBox ID="txtTotalTw" Width="80px" runat="server" MaxLength="10" onBlur="isNumber(this.Value);"></asp:TextBox>

In the code-behind, I have included the following line:

txtTotalTw.Attributes.Add("onBlur", "javascript:isNumber(this.Value)");

The JavaScript function looks like this:

<script type="text/javascript" language="javascript">
function isNumber(n) {
  alert(n);
  return !isNaN(parseFloat(n)) && isFinite(n);
}
</script>

To test whether the value is being passed, I added alert(n). However, when triggering the onBlur event, the alert message shows 'undefined'.

Any suggestions on how to resolve this issue?

Answer №1

Eliminate the onBlur attribute from your ASPX template file. Keep only the one that you added from the code-behind, and everything should function properly.

Answer №2

Eliminate onBlur Event:

<asp:TextBox ID="txtTotalTw" Width="80px" runat="server" MaxLength="10" ></asp:TextBox>

No javascript prefix required:

txtTotalTw.Attributes.Add("onBlur", "isNumber(this.value);");

Answer №3

Senad mentioned the need to remove an extra call in the markup and make a simple change:

Replace this.Value with this.value.

Remember, JavaScript is case sensitive, so Value won't work here; it should be value instead.


To reset focus on the control, Update the code snippet as follows:

txtTotalTw.Attributes.Add("onBlur", "javascript:checkNumber(this)")

Modify the function like this:

function checkNumber(ctrl) {
  var input = ctrl.value;
  var num = parseFloat(input);       
  if (isNaN(num) || !isFinite(num)) {
    ctrl.focus();
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The word-break CSS property is ineffective in this situation

I've been experimenting with the word-break css property, but I just can't seem to get it to work even when using a simple example. Here's my code: React: render() { return ( <h5 className="word-break">A very very long line.... ...

Transmit data to the controller using an AJAX request

I need to transfer an object from the view page to the controller. Ajax code:-- var jsdata = '{p:' + data + '}'; $.ajax({ type: "POST", url: rootURL + "Deal/Check", contentType: 'application/json; charset=utf-8', da ...

Using JavaScript to calculate dimensions based on the viewport's width and height

I have been trying to establish a responsive point in my mobile Webview by implementing the following JavaScript code: var w = window.innerWidth-40; var h = window.innerHeight-100; So far, this solution has been working effectively. However, I noticed th ...

Why does the Formik form only validate after the second button click in this React Hooks, TypeScript, Formik, NextJS setup?

Looking for fresh perspectives on my code. The issue lies in the fact that it takes two submission attempts to validate the data inputted into a form successfully. It appears that the post request to Airtable happens before the validation schema, resulting ...

"Select2 dropdown fails to function properly upon returning to the page using the browser's

I've encountered an issue while working on a search page with Select2 dropdowns. Everything functions smoothly upon the initial page load, however, problems arise when a user performs a search, hits the browser back button, and then revisits the page. ...

Customer Notification System Malfunctioning on Front End

I am currently experimenting with MeteorJS technology and attempting to use alerts for success or failure notifications when making a meteor call. However, I've encountered an issue where the alerts are not functioning as expected. T ...

Optimizing CSS for printing by eliminating unnecessary white space with media queries

Appreciate your assistance! I'm currently working on a solution to print a specific div using CSS Media queries. When the user clicks on print, I want to hide all other elements except for the body div they chose. However, I'm facing an issue whe ...

The directional rotation plugins of GSAP are incompatible with the plugins of PIXI

I've been experimenting with using directional rotation plugins in combination with pixi.js plugins. Unfortunately, I'm encountering some issues. If you check out the codepen link: https://codepen.io/asiankingofwhales/pen/RyNKBR?editors=0010, yo ...

Utilizing Mapbox-gl within a Vue.js single file component with Quasar-Framework integration

I'm attempting to incorporate a Mapbox-gl-js Map into a single file Vue component within the Quasar Framework, but I'm struggling to make it work. I've come across examples of Googlemaps with Vue and Mapbox with React, and I'm trying to ...

Void JQuery Data Grid

I have developed a controller with ActionResult Index and set up a list of Student objects like so: public ActionResult Index() { var list = new List<Student>() { new Student{Id=1,RegNo="Bcs153048",Name="Ali",Age=21,}, new St ...

Updating React state via child components

Encountering a strange issue while working on a project, I managed to replicate it in this jsfiddle. The parent component's state seems to be affected when the child component updates its state. Any insights on what might be causing this? Here is the ...

Effortlessly Concealing Numerous Elements with a Single Click in Pure JavaScript

I have successfully created an HTML accordion, but I am facing an issue. I want to implement a functionality where clicking on one accordion button will expand its content while hiding all other accordion contents. For example, if I click on accordion one ...

Having trouble logging out of ADFS 3.0 using Internet Explorer

We have successfully created an MVC/Angular application integrated with ADFS. Due to the Angular framework, a wrapper had to be developed around ADFS in order to capture the token and utilize it as a claim for access within angular. The primary method res ...

Other Options for Delaying Execution in Node.js

Objective Exploring potential alternatives to improve the accuracy of timing functions in node.js, particularly focusing on a replacement for setTimeout. Background While developing a QPS (Queries Per Second) tester application, I encountered issues wit ...

Utilize JavaScript to compute and implement a deeper shade of background color

To dynamically apply darker shades of background using JavaScript, I have devised the following code. .event-list .bg{ background:#eee; padding:5px; } .grid .event-list:first-child .bg{ background: #2aac97 } .grid .event-list:nth-child(2) .bg{ backgrou ...

Having trouble with CORS in your Angular application?

I am attempting to retrieve data from a site with the URL: Using the $http service After extensive research, I have come up with this CoffeeScript code snippet: angular.module('blackmoonApp') .controller 'PricingCtrl', ($scope, $ht ...

Unable to align span vertically using font-style "Luckiest Guy" in CSS

I have encountered an issue with vertically centering a span using the font-style "Luckiest Guy". https://i.sstatic.net/Lz8o3.png I attempted to use display: flex;align-items: center; on the span, but it did not work. App.vue <template> <div ...

The tab element is not receiving a click event in Protractor

This is the complete HTML code for the Tab section. <tab heading="Meta Data" id="heading_meta-data"> <div id="meta-data" class="row"> <div class="col-md-3 col-xs-3"> ...

What is the best way to retrieve user data and format the output using JavaScript into a structured form?

I am trying to achieve the functionality shown in this image: My goal is to extract user input from a form and display it on my webpage using JavaScript. Below is the code snippet that I have been working on. Code: function show(){ var ...

Using JavaScript to load content with AJAX on skip links

Is there a way to prevent the error "loadWithAjax is not defined" from occurring while using the script below? addEventListener('click', function (ev) { if (ev.target.classList.contains('bpb')) { ev.preventDefault(); ...