How to get all the controls in page using javascript in ASP.net page - Stack Overflow

admin管理员组

文章数量:1291263

I have a page with a tab control and each control has almost 15 controls. In total there are 10 tabs and about 150 controls in a page (controls like drop down list, textbox, radiobutton, listbox only).

My requirement is that there is a button (submit) at the bottom of the page. I need to check using JavaScript that at least 3 options are selected out of 150 controls in that page irrespective of the tabs which they choose.

Please suggest the simplest and easiest way which this could be done in JavaScript on my aspx page.

I have a page with a tab control and each control has almost 15 controls. In total there are 10 tabs and about 150 controls in a page (controls like drop down list, textbox, radiobutton, listbox only).

My requirement is that there is a button (submit) at the bottom of the page. I need to check using JavaScript that at least 3 options are selected out of 150 controls in that page irrespective of the tabs which they choose.

Please suggest the simplest and easiest way which this could be done in JavaScript on my aspx page.

• asp
• javascript

Share Improve this question Follow edited Apr 17, 2012 at 11:44 Widor 13.3k77 gold badges4646 silver badges6767 bronze badges asked Oct 9, 2008 at 12:36 balaweblogbalaweblog 15.5k2828 gold badges7676 silver badges9595 bronze badges 0

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 4

Assuming there's only one form on the page (if more then loop through forms and nest the below loop within).

  var selectedCount = 0;
  var element;

  for (var i = 0; i < document.forms[0].elements.length; i++)
  {
    element = document.forms[0].elements[i];

    switch (element.type)
    {
      case 'text':
        if (element.value.length > 0)
        {
          selectedCount++;
        }
        break;
      case 'select-one':
        if (element.selectedIndex > 0)
        {
          selectedCount++;
        }
        break;
      //etc - add cases for checkbox, radio, etc.
    }
  }

I would look at something based on the prototype serialize method - it can give you a hash of all form controls - it might give you a headstart on what you want.

Something like firebug will help you see what you get and assess if it meets your needs.

You say that you need to validate that at least three of the options should be selected, but is there a chance that you'd need to validate more than those three? Do the controls have a unique ID or class name? Are you using a specific framework (jQuery, Prototype, etc)?

Without knowing more about your project, it's hard to make any solid suggestions, but using pure JavaScript (without a framework), and assuming that you have, say, unique class names I'd say...

• After the DOM has loaded, load all of the controls you need to validate into an array (get them via their ID or class name)
• Attach an event listener to submit to catch whenever it has been clicked
• Before the submit actually occurs, iterate through your list of controls and validate each one as necessary. If the validation is good, continue with the submit's default action; otherwise, return some form of error message to the user.

This may sound like a very general solution, but it's hard to give any concrete code without knowing more about your setup.

jQuery would be a lot simpler to get the controls on the page:

var inputs = $('input');
var selects = $('select');

var textBoxes = $("input[type='text']");

You really should look into using jquery to solve this problem. It's free and all the cool Javascript programmers are using it these days!

If you use jquery, your problem bees quite trivial. The following line of code would search the entire page and return the number of list items anywhere that are selected.

var count = $("option:selected").length;

本文标签： How to get all the controls in page using javascript in ASPnet pageStack Overflow