Trying to fill a modal with data from a text input on a website

The JavaScript I have for a popup in asp.net seems to be returning blank variables from text boxes on the web page. It appears like there might be something missing in my document.getElementById function, either it's not being used correctly or I should be using a different approach.

This is the example of my JavaScript code:

<!DOCTYPE html>


    <title></title>
<script type = "text/javascript">
    function Confirm() {
        var confirm_value = document.createElement("INPUT");
        confirm_value.type = "hidden";
        confirm_value.name = "confirm_value";

        var ppn = document.getElementById("<%= pifPassportNbr %>")
...

This is the example of my asp.net code:


   <tr>
                    <td style="padding-top: 5px;">
                        <asp:UpdatePanel ID="updPassport" runat="server" UpdateMode="Conditional" Visible="false" >
                            ...
                                &nbsp
                                            <asp:CheckBox ID="ckbExpirationDate" runat="server" Checked="false" />
                                        </asp:TableCell>
                                    </asp:TableRow></asp:Table><table width="98%" cellpadding="20px" style="margin-top: 5px;margin-bottom: 3px" >
                               ...
                                <asp:Button ID="btnPassportUpdate" visible = "true" text="Update" CssClass="btnUpdate" runat="server" OnClientClick="Confirm()"/>
javascriptasp.net

Answer №1

It seems like in your JavaScript code, you are selecting the document ID based on the textbox value (textbox_id.Text). Instead, try selecting the client ID property of the text box first, and then retrieve the JavaScript text value. You can modify your code like this: 

var ppn = document.getElementById("<%= pifPassportNbr.ClientID %>").value;
var pid = document.getElementById("<%= pifIssueDate.ClientID %>").value;
var pil = document.getElementById("<%= pifIssueLoc.ClientID %>").value;
var ped = document.getElementById("<%= pifExpirationDate.ClientID %>").value;

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

What methods can be employed to stop tests from being included in rollup bundles?

I am currently in the process of creating a react component package and I would like to know how to prevent my tests folder from being included in the dist file that is generated by rollup. After running rollup -c, my directory structure looks like this: ...

javascriptreactjsnpmwebpackrollupjs

Tips on utilizing innerHTML or innerText to add content to the Evernote editor, a rich text editor

A method authored by Jayant was employed in this particular post how-to-insert-text-into-the-textarea-at-the-current-cursor-position to perform an insertion into the Evernote editor. The Evernote editor being a rich text editor, altering from el.value to ...

javascripthtmlevernote

Configurations for POP3 settings in C# on devMail.Net

As someone who is not a programmer and just starting to learn C, I'm facing an issue with our application that uses DevMail.Net to fetch pop3 mail. My service provider recently changed the pop3 port from "110" to "125", causing it to malfunction. Desp ...

c#asp.netemailpop3

TypeError thrown by Mapbox markers

Looking to incorporate markers into my map using Mapbox. Below is the Angular TypeScript code I am working with: export class MappViewComponent implements OnInit { map: mapboxgl.Map; lat = 41.1293; lng = -8.4464; style = "mapbox://styles/mapb ...

javascriptangulartypescriptmapbox-gl-js

Storing the slider value in a universal variable and displaying it in a div

I am currently working on a jQuery slider feature for my project. My goal is to extract the value from the slider, display it in a div element, and store it as a global JavaScript variable. It needs to perform these actions immediately as the slider is bei ...

javascripthtmlcsscanvas

Customizing CSS to differentiate the color of active card headers in a Bootstrap accordion

I currently have a basic bootstrap accordion set up, as shown below. My goal is to style the .card-header element of only the expanded .card section without impacting the other .card-header elements. Is there a way to specifically target the expanded ite ...

javascripthtmlcssbootstrap-4

Utilizing a server for seamless communication between a mobile device and a website

Exploring a simple setup idea here: Imagine having a mobile app with a page that contains 4 lines of content (utilizing phonegap for development). The plan is to have a web page where data for those 4 lines can be inputted. Once the information is submitt ...

javascriptphphtmlajax

What is the best way to organize and sort mysql data without disrupting operations?

I've been searching for information on this topic but haven't been able to find a tutorial that explains exactly what program to use. I have a MySQL database with expenses data. What I need is for the system to automatically categorize a new ex ...

javascriptphpjquerymysqlajax

Can React Router be integrated with Material UI tabs?

I have made some changes to the code of the Tabs component in material ui, <AppBar position="static"> <Tabs variant="fullWidth" value={value} onChange={handleChange} aria-label="nav tabs example" > < ...

javascriptreactjsreact-routermaterial-uijsx

Attempting to construct a webpage with the ability to create visual content

I've been struggling to kick off this project because I'm uncertain about what exactly I should be looking into. I would really appreciate any guidance on where or how to start. The concept is to enable users to upload an image of a postcard, in ...

javascriptphphtmlimage-processingweb-applications

Error: The function `mongodb.connect` is not recognized

I encountered some errors in my project using Express.js and despite my attempts to fix them, I couldn't locate the source of the issue. Below is a snippet of my code: const mongodb = require("mongodb"); const dotenv = require("dotenv").config(); mo ...

javascriptmongodbexpress

The user32 GetMessage function encountered a System.AccessViolationException while attempting to access protected memory in order to retrieve or peek at a message

I have recently started programming and have been encountering this exception for the past two days without finding a solution. It works fine in VS 2008, but when I run the .exe file, it throws an exception after some time. The exception message is: Syst ...

c#asp.netvisual-studio-2008console

Dealing with an unexpected token error in JSON? Learn how to properly handle removing special characters like quotation marks and line breaks to

After receiving a JSON response from the server during page load, I successfully populate it on the page using Handlebars.js. However, I am facing difficulties in storing this JSON object in a JavaScript object. Here is what I tried: var jsObject = "{{o ...

javascriptjqueryjsonpageloadhandlebars.java

Adjust the appearance of a .obj file in three.js dynamically

Currently, I am attempting to dynamically swap the image texture on a loaded .obj file in three.js. Below is the modified code extracted from the three.js examples: var container, stats; var camera, scene, renderer; var mouseX = 0 ...

javascript3dthree.jswebgl

What is the ideal configuration for Typescript within ASP.NET 4 MVC 5 on Visual Studio 2015?

Currently, I am in the process of integrating a TypeScript project into a VS2015 MVC 5 project (which is based on ASP.NET 4, specifically not asp.net 5 or asp.net 6 - only the MVC portion is version 5). All aspects of my query pertain solely to this target ...

asp.nettypescripttypesnpm

Uploading files with Ajax in PHP

Illustration of my Ajax script: Script <script type="text/javascript> $(document).ready(function(){ $('.costExcel').on("submit",function(event){ event.preventDefault() var url = "ajax.php"; ...

javascriptphpjqueryajaxtwitter-bootstrap

Preventing reference problems with AngularJS by employing the "copy()" method

I have a situation where I need to display a list of items with an "edit" button next to each one. When the user clicks on the edit button, an Angular UI modal window opens allowing them to make changes to the item. The problem I encountered was that any c ...

javascriptangularjsangularjs-scope

Create an interactive webpage that automatically generates new HTML elements after retrieving JSON data from a Web API during page load

I am currently in the process of developing a hybrid Android App using Phonegap/Apache Cordova. The main function of my app is to retrieve data from my web API, which is being served through JSON. I have implemented the following code snippet for this task ...

javascripthtmljsoncordova

Mobile Styling Needs Improvement: iOS 6 "Choose File" Button Size Concern

I am currently in the process of styling a couple of basic form pages that were originally created in ASP.NET for mobile devices. In order to enhance the display for mobile users, I am utilizing CSS3 media detection to identify when the device is mobile an ...

asp.nethtmlcssios6safari

How can I safeguard my app from crashing when the initial state is set by undefined props?

What is the best way to prevent the state from crashing if props native_languages[0] does not exist? This is my attempt at protecting the app, but it still crashes when native_languages[0] does not exist: this.state = { language: props.currentDocu ...

javascriptreactjs