CODEWITHSUNDEEP
asp.netjavascript
balaweblog
balaweblog

Reputation: 15460

How to get all the controls in page using javascript in ASP.net 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.

Upvotes: 1

Views: 24356

Answers (5)

John Wu
John Wu

Reputation: 52230

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 becomes 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;

Upvotes: 0

Aaron Powell
Aaron Powell

Reputation: 25099

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

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

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

Upvotes: 0

Kon
Kon

Reputation: 27431

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

Upvotes: 4

Tom
Tom

Reputation: 15940

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.

Upvotes: 0

Chris Kimpton
Chris Kimpton

Reputation: 5541

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.

Upvotes: 0

Related Questions