Validating AJAX combobox using JavaScript in ASP.NET

Background:

Click to download ComboBoxValidation

At work, you may have to use AJAX ComboBox (combo box) to replace ASP.NET's drop-down list control. Using the combo box, everything works fine until we start to verify it, and then we try to debug it with the developer tools provided by chrome to understand how the combo box is formed. It is basically composed of the following three controls:

TextBox (text box)

Button (button)

ListBox (list box)

At first, the list box controls are hidden. When we click the button to provide a drop-down menu It is only displayed when the effect is enabled.

Then we tried using JavaScript and passed the combo box client ID to JavaScript and checked its value, still couldn't validate the combo box because I got an invalid value exception.

After using some trial methods, we got a solution using

function validateCombobox() {
var comboboxId = document.getElementById('_TextBox');
if (comboboxId .value != null && comboboxId.value != "") {
alert(comboboxId.value);
}
else {
alert("null value");
}
}

You can judge from the above code We are trying to get the text box control of the combo box (which is responsible for displaying the selected value and creating the same available value for further user code.

But when we use it in a page that inherits masterpage, then the HTML is different, this method It's not reliable enough. You can check it by looking at your source code. So our function needs to be changed as follows:

function validateCombobox() {
var comboboxId = document.getElementById(' _ComboBox1_TextBox');
if (comboboxId.value != null && comboboxId.value != "") {
alert(comboboxId.value);
}
else {
alert("null value ");
}
}

This is the real problem. If you don’t want to write two different functios to perform the same task, you can use the following code:

function validateCombobox() {
var id = document.getElementById('');
var inputs = id.getElementsByTagName('input');
var i;
for (i = 0; i if (inputs[i ].type == 'text') {
alert( "null value");
break; Then you will find that all TagName input controls will appear in that custom control. Now we run a loop to find the textbox and compare its value (whether it is invalid or not).

Similarly, you can check other values or tasks of the combo box that you want to handle using JavaScript on the client side.

After solving this, we will see a new problem - when using it in a div position attribute, we see that the list box is not under the text box control of the combo box. After searching we learned that the problem was that the div contained a combobox with a position attribute. So when we remove the position attribute, everything works fine.

The list box of the combo box has an inline style sheet that contains the position:absolute attribute.

But in order to set the page layout, it is necessary to use the position attribute.

Later we found that if we can override the position attribute from absolute to fixed, the task can be completed. We can use position:static for the same purpose.

After searching, you will find that the combo box has the following built-in for us to cover:

.ajax__combobox_inputcontainer

.ajax__combobox_textboxcontainer

.ajax__combobox_buttoncontainer

.ajax__combobox_itemlist

For this we use the following code:

.combo{
//your Style
} om .combo .ajax__combobox_itemlist {
posity: static! Important;
}

We have created a class name combination in the above code to cover the location attribute of the project list category.

We all know that inline stylesheets have higher priority and omit all contradictory attributes, they are finally applied and the last style attribute overrides all matching attributes.

So we use the !important rule to help override the inline style properties of the stylesheet by giving it a higher priority.