1

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.

Improve this question
0

5 Answers 5

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.
    }
  }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

Comments

0

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.

Improve this answer

Comments

0

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

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

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

Comments

0

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;
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.