I would like to learn how to retrieve the value of a dynamically created control in the code behind that was initially generated by JavaScript

How do I retrieve the value of a dynamically created control in CodeBehind using JavaScript?

I have generated the controls dynamically with the code snippet below:

let counter = 0;
let words;
let foo;//span tag 

function add(i) {
    let counter = 0;
    let words;
    let foo;//span tag asp in page where the controls to be added

    if (i == 'ad') {
        counter++;
        //Creating an input type dynamically.
        foo = document.getElementById("dynamic")
        tbnam = document.createElement("input")  
        tbdes = document.createElement("input")  
        lbnam = document.createElement("Label")
        lbdes = document.createElement("Label")
        before = document.createElement('br')
        after = document.createElement('br')

        //Assigning different attributes to the elements.
        wordsnam = document.createTextNode("Item")
        wordsdes = document.createTextNode("Descrip")
        tbnam.setAttribute("type", "TextBox");
        tbdes.setAttribute("type", "TextBox");
        tbnam.setAttribute("Id", "tbdynamicnam" + counter);
        tbdes.setAttribute("Id", "tbdynamicdes" + counter);
        lbnam.setAttribute("Id", "lbdynamicnam" + counter);
        lbdes.setAttribute("Id", "lbdynamicdes" + counter);
        before.setAttribute("Id", "bf" + counter);
        after.setAttribute("Id", "af" + counter);

        lbnam.appendChild(wordsnam)
        lbdes.appendChild(wordsdes)

        //Appending the element in page (in span).

        foo.appendChild(before);
        foo.appendChild(lbnam);
        foo.appendChild(tbnam);
        foo.appendChild(lbdes);
        foo.appendChild(tbdes);
        foo.appendChild(after);            
    }
}

Answer №1

Once the form is submitted, the data will be accessible in the Request.Form collection. The easiest way to access it is through the Request object which checks all collections (QueryString, Form, Cookies, and ServerVariables).

JavaScript:

tbnam = document.createElement("input")  //creating a textbox       
tbnam.setAttribute("type", "TextBox");       
tbnam.setAttribute("Id", "tbdynamicnam" + counter);
tbnam.setAttribute("name", "tbdynamicnam" + counter);

Code-behind:

string newval = Request["newelementname"];

As noted by James Montagne below, make sure you have a valid form element name.

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

Creating a form that displays only three questions simultaneously

My survey form consists of 13 questions, all displayed on one page. However, I would like to only show 3 questions at a time and then have the next set of 3 questions appear on the following page. I am not sure how to accomplish this. Any assistance would ...

Error: ...[i] has not been defined

What seems to be the issue with this part of the script: function refreshLabels() { // loop through all document elements var allnodes = document.body.getElementsByTagName("*"); for (var i=0, max=allnodes.leng ...

Comparison of instancing, bufferGeometry, and interleavedBuffer in rendering techniques

I have a requirement to create numerous points and lines with position, size, and color attributes, and their positions are dynamic as they can be interactively dragged. Up until now, I have been using buffer Geometry, but recently I came across two other ...

JQuery error: Unsupported property or method for converting to lowercase

I've been grappling with this issue for the past week. Here's the scenario: I've been tasked with transitioning a SharePoint application out of SharePoint and into its own website. With our current SharePoint version being 2007, an upgrade ...

Error encountered while attempting to install ungit on Windows XP: Unable to locate file directory in C:/Documents

Ungit seems like the ideal tool to gain a better understanding of git, thanks to its graphical interface that simplifies the process. I came across this video explanation which is very helpful in grasping how git functions, even if you don't intend to ...

Creating a dynamic number of properties with different names in Typescript can be achieved by using a loop

I have a requirement for enabling type checking on a specific class Here is the relevant code snippet: class FlightFilter implements Filter { get filters() { return { departTime: { name: 'Departure Time', type: FilterTypes.Range }, ...

The function cannot be invoked. The 'Boolean' type does not have any call signatures. An error has occurred in the computed property of Vue3

Currently, I am working on creating a computed property that checks if an item is in the array. The function I have created returns a boolean value and takes one parameter, which is the item to be checked. isSelected: function (item: MediaGalleryItemTypes) ...

Running npm commands, such as create-react-app, without an internet connection can be a

Currently, I am working in an offline environment without access to the internet. My system has node JS installed. However, whenever I attempt to execute the npm create-react-app command, I encounter an error. Is there a workaround that would allow me to ...

Adjust the look of text by changing the font style and size for various languages without relying on the html lang tag

I have posts that contain both English and Korean text within the same lines, for example: This is an example (예시). I frequently switch between the two languages. Now, I want to use different fonts and font sizes for each language. My usual way o ...

Customizing the appearance of columns in an antd table

Below is the table column configuration I am working with, where notes are rendered using a custom function: fieldDefs: (results, isJsonData) => [ { title: 'Notes', name: 'notesHTML', table: { render: SectionNotes, sear ...

Issues with the functionality of the jQuery notify plugin are being encountered when used in a

I am currently utilizing the jQuery notify plugin and have included all the necessary JS files in the header. However, whenever I attempt to call the $.notify function in another JS file that also involves AJAX, I encounter difficulty accessing the $.notif ...

The initial setting of [opened]="true" causes an issue with the Angular Material date range picker

Recently, we completed the upgrade of our app from Angular 14 to 15.2.9, which includes Angular Material. The migration process went smoothly, and now our app is compiling and running without any errors. However, we encountered an issue with the mat-date-r ...

Leverage variables from different Vue components and link them together

I'm currently working on two different sections of the website First: Is it acceptable to use one instance within another, particularly with v-model? Are there any drawbacks to this approach? Second: Is there a way to reference each other, such as p ...

Utilizing jQuery to load a nested gridview efficiently for handling extensive datasets

I am trying to implement a nested gridview loading functionality using jQuery. I want to avoid reloading the data if it has already been loaded by the user, as retrieving detailed data is resource-intensive and time-consuming. Scenario: Let's conside ...

Create movement in line art using the position of the cursor

I have created a skull lineart in illustrator and I am trying to make the lines fill in or erase based on mouse position. There are two possible ways to achieve this: Using lazy line painter to draw the lines and then finding a way to animate based on ...

Sort a JSON object in ascending order with JavaScript

I have a JSON object that needs to be sorted in ascending order. [{ d: "delete the text" }, { c: "copy the text" }] The keys d and c are dynamically generated and may change. How can I sort this into? [{ c: "copy the text" }, { d: "delete the text" }] ...

creating a new date instance with a specific time zone

Creating a Date object with a dynamically selected timezone is my current goal while I am located in the IST time zone. To avoid the unpredictable behavior of Date.parse(), I am looking for an alternative method. Let's say we set the tzOffset to +05:3 ...

Passing JSON data from an ASP.NET controller to a view

My issue arises when a web page is loaded and triggers a controller action to retrieve data based on user selection. I am trying to return this data as a JSON object, but it appears as a single string within the HTML page. The basic structure of the contro ...

Set a dynamic Active Class on various divisions by utilizing their respective indexes

I have two divs with the same class. When I click on an anchor tag within one of the elements, I want to add a class to the corresponding position in the second div as well. Mirror: JSFiddle Here is the jQuery code snippet: $(document).on('click ...

How can json be transformed into an array?

I am having trouble displaying data in a table. The data I receive from my page is coming back as an array of single characters instead of the values I expected. I'm not sure where I'm going wrong and would appreciate any help in identifying the ...