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

Question

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

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

Please suggest me the simplest and easy way which should be done in javascript for my aspx page.

Answer 1

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.

Answer 2

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.

Answer 3

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.
    }
  }

Answer 4

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

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

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

Answer 5

cool dude!!!

Done exactly for what i was looking.

kuldeep Kadyan