The correlation between the input field and the graphic

Question

The correlation between the input field and the graphic

Hello, I have a question for all you ASP.NET professionals out there: I am working on a project where I have multiple dynamically generated textboxes in a row. Within the same row, there is also an image that has an onclick event handler. My goal is to establish a relationship between the textbox and the image so that when I click on the image and choose a value, the corresponding textbox will be filled. The IDs of my current controls are as follows: Image:

ct100_cph_Detail_rpFields_ct109_rpCell_ct100_cbf_bed1_item_sym

Textbox

ct100_cph_Detail_rpFields_ct109_rpCell_ct100_tb_bed1

I am looking for a solution using JavaScript since I am not very familiar with ASP.NET. Any help would be greatly appreciated! :-)

javascript asp.net

Answer 1

Answer №1

If the pattern for generating IDs remains consistent, you can easily access the textbox by manipulating the ID of the button or image. Simply replace the unique portion of the button/image ID with the corresponding section from the textbox ID.

For example:

<input type="button"  value="click" 
   id="ct100_cph_Detail_rpFields_ct109_rpCell_ct100_cbf_bed1_item_sym" 
   onclick="document.getElementById(this.id.replace(/_cbf_bed1_item_sym$/,'_tb_bed1')).value='gotcha'"/>

<input type="text" 
   id="ct100_cph_Detail_rpFields_ct109_rpCell_ct100_tb_bed1"/>

There may be alternative methods, but in order to discuss them effectively, it is necessary to examine the markup structure of a specific row to understand the relationship between these elements within the document tree.

Answer 2

If the pattern for generating IDs remains consistent, you can easily access the textbox by manipulating the ID of the button or image. Simply replace the unique portion of the button/image ID with the corresponding section from the textbox ID.

For example:

<input type="button"  value="click" 
   id="ct100_cph_Detail_rpFields_ct109_rpCell_ct100_cbf_bed1_item_sym" 
   onclick="document.getElementById(this.id.replace(/_cbf_bed1_item_sym$/,'_tb_bed1')).value='gotcha'"/>

<input type="text" 
   id="ct100_cph_Detail_rpFields_ct109_rpCell_ct100_tb_bed1"/>

There may be alternative methods, but in order to discuss them effectively, it is necessary to examine the markup structure of a specific row to understand the relationship between these elements within the document tree.

Answer 3

Answer №2

The connection between them lies in their shared presence on the same row.

On the server side:

TableRow.Attributes.Add("onclick", "rowClick(event);")

On the client side:

function rowClick(e) {
    e = e || event;
    var target, image, inputBox, selectedRow;
    target = e.target || e.srcElement;
    if (target.tagName == 'IMG') {
        image = target;
        while(target.tagName != 'TR') {
            target = target.parentNode;
        }
        selectedRow = target;
        inputBox = selectedRow.getElementsByTagName('input')[0];
        inputBox.value = image.src;
    }
}

Answer 4

The connection between them lies in their shared presence on the same row.

On the server side:

TableRow.Attributes.Add("onclick", "rowClick(event);")

On the client side:

function rowClick(e) {
    e = e || event;
    var target, image, inputBox, selectedRow;
    target = e.target || e.srcElement;
    if (target.tagName == 'IMG') {
        image = target;
        while(target.tagName != 'TR') {
            target = target.parentNode;
        }
        selectedRow = target;
        inputBox = selectedRow.getElementsByTagName('input')[0];
        inputBox.value = image.src;
    }
}

The correlation between the input field and the graphic

Answer №1

Answer №2

Similar questions

Delay loading background image until a specific time has passed, preventing website from fully loading

Arrange objects on a grid

JavaScript communication between clients and servers

Enhancing ASP.net: Expanding functionality of or Including components to Current BoundField

My Angular7 app.component.html file is not displaying the routing. What could be the issue?

The format for a DateTime field in a JSON string array is as follows: yyyy-MM-dd hh:mm:ss

Issues with Angular Reactive Forms Validation behaving strangely

Combining server-side and client-side routing in AngularJS: A comprehensive guide

stop the menu component from triggering a re-render

Strapi: Enhancing User Experience with Unique Passwordless Customization Services

Orbiting ThreeJS object positioned at the coordinates (0,0,0)

Upon redirection, my JavaScript codes cease to function properly and require a page refresh to resolve

Tips for utilizing a resource Dll for various cultural settings

Mixing cookie and token authentication in ASP.NET Core

Does the code I've written successfully interact with the AJAX request I'm attempting to make to the Servlet?

Guide to displaying a component within the Vue instance

The addition operator cannot be used with the Number type and the value of 1

Leveraging electron-usb alongside electron

Is there a way to extract values from a particular object?

How can I retrieve neighboring cells from a 2D array using Javascript?