Performing various DOM manipulations by accessing ASP.NET controls via their ClientID properties in JavaScript is a common approach in ASP.NET Web Forms for interacting with controls dynamically. Here is a list of possible DOM manipulations you can perform using the ClientID of ASP.NET controls.

1. Disable a Control (e.g., Button, TextBox, DropDownList)

You can disable a control (e.g., a Button, TextBox, DropDownList) by setting its disabled property to true.

document.getElementById('<%= cutoff3.ClientID %>').disabled = true;

2. Enable a Control (e.g., Button, TextBox, DropDownList)

You can enable a control by setting its disabled property to false.

document.getElementById('<%= cutoff3.ClientID %>').disabled = false;

3. Check or Uncheck a Checkbox

To check or uncheck a checkbox, you can manipulate the checked property of a CheckBox control.

document.getElementById('<%= cutoff1.ClientID %>').checked = false; // Uncheck
document.getElementById('<%= cutoff1.ClientID %>').checked = true;  // Check

4. Set or Get the Value of a TextBox, DropDownList, or RadioButton

You can retrieve or set the value of input controls like TextBox, DropDownList, or RadioButton using the value property.

var textBoxValue = document.getElementById('<%= txtupiid.ClientID %>').value; // Get value
document.getElementById('<%= txtupiid.ClientID %>').value = "New Value";   // Set value

5. Make a Control Read-Only (e.g., TextBox)

You can make a text field read-only by setting the readOnly property to true or false.

document.getElementById('<%= price1.ClientID %>').readOnly = true;  // Set read-only
document.getElementById('<%= price1.ClientID %>').readOnly = false; // Enable editing

6. Show or Hide an Element (CSS Display Property)

You can dynamically show or hide an element by changing its style.display property.

document.getElementById('<%= lbldiscount1.ClientID %>').style.display = 'block';  // Show
document.getElementById('<%= lbldiscount1.ClientID %>').style.display = 'none';   // Hide

7. Change the Inner Text of an Element (e.g., Label, Div)

You can change the displayed text of an element (like a Label or Div) by modifying its innerText or innerHTML property.

document.getElementById('<%= clupi.ClientID %>').innerText = "New Text"; // Set text

8. Change the Inner HTML of an Element

For more complex HTML content inside an element, you can use innerHTML.

document.getElementById('<%= total.ClientID %>').innerHTML = "<b>Updated Content</b>"; // Set HTML

9. Manipulate a Control's CSS Style (e.g., Font Size, Color, Background)

You can dynamically change the CSS styles of any control using style properties.

document.getElementById('<%= lblMessage.ClientID %>').style.fontSize = '20px';    // Change font size
document.getElementById('<%= lblMessage.ClientID %>').style.color = 'red';         // Change text color
document.getElementById('<%= lblMessage.ClientID %>').style.backgroundColor = 'yellow'; // Change background color

10. Manipulate the Class (CSS Class) of a Control

You can change the CSS class of a control to apply different styles.

document.getElementById('<%= txtName.ClientID %>').className = 'newClass'; // Change class

11. Change the Placeholder Text of a TextBox

You can dynamically change the placeholder text of a TextBox.

document.getElementById('<%= txtupiid.ClientID %>').placeholder = "Enter new value"; // Set placeholder

12. Set or Get the Selected Index of a DropDownList

You can retrieve or set the selected index of a DropDownList control.

var selectedIndex = document.getElementById('<%= ddlCategory.ClientID %>').selectedIndex; // Get selected index
document.getElementById('<%= ddlCategory.ClientID %>').selectedIndex = 2; // Set selected index

13. Set or Get the Checked Value of RadioButton

Similar to CheckBox, you can manipulate the checked property of a RadioButton.

document.getElementById('<%= rbOption.ClientID %>').checked = true; // Check RadioButton

14. Trigger an Event (e.g., Click Event)

You can trigger an event programmatically, like clicking a button or changing an input.

document.getElementById('<%= btnSubmit.ClientID %>').click(); // Trigger click event

15. Set or Get the Value of Hidden Fields

Hidden fields are often used to store data that doesn’t need to be visible to the user. You can set or retrieve the value of hidden fields.

document.getElementById('<%= hiddenField.ClientID %>').value = "HiddenValue"; // Set value
var hiddenValue = document.getElementById('<%= hiddenField.ClientID %>').value; // Get value

16. Set the Value of a Hidden Input Field using jQuery

$("#categoryhdn").val(document.getElementById("<%= category_drp.ClientID %>").value);

17. Change the Focus on a Control (e.g., TextBox)

You can set focus to a specific control programmatically.

document.getElementById('<%= txtupiid.ClientID %>').focus(); // Set focus to TextBox

18. Change the Value of a Button (e.g., Text)

You can change the label or text of a button dynamically.

document.getElementById('<%= btnSubmit.ClientID %>').value = "New Button Text";

19. Trigger Validation (e.g., Validator Control)

If you have validation controls on your page, you can trigger them via JavaScript.

Page_ClientValidate();  // Trigger client-side validation

Summary of Key DOM Manipulations Using ClientID

  1. Enabling/Disabling controls: disabled = true/false

  2. Checking/Unchecking checkboxes: checked = true/false

  3. Modifying Text or HTML content: innerText = 'new text', innerHTML = 'new html'

  4. Changing CSS styles: style.property = 'value'

  5. Manipulating values: .value, .selectedIndex, .checked

  6. Triggering events: .click(), .focus()

  7. Showing or hiding elements: style.display = 'block' or 'none'