How to loop through all the textbox on page using Javascript

Question

1.44/5 (2 votes)

See more:

I need help with JavaScript code.i want to do basically is to loop through all Texbox in the page. I want to user could not enter any Char or Special Char. I want to allow on numbers in them.
I have 100 text-boxes so i want to loop them and stop enter char or spl char.

Posted 23-Apr-14 9:27am

_Dhull

Updated 10-Sep-20 15:22pm

Add a Solution

3 solutions

Solution 2

Loop :

JavaScript

var aInputs = document.getElementsByTagName("input");

for (var i = 0; i < aInputs.length; i += 1)
{
   // check for textbox attribute
   if (/* oType == "text" */)
   {
      aInputs[i][/*onchange*/]  = ValidateChangeFunction;
      aInputs[i][/*onkeydown*/] = ValidateKeyPressFunction;
      aInputs[i][/*Event to validate...*/] = ValidateFunction;
   }
}

Validation (Not sure what all you need, so i threw in the whole object from an old js file of mine) :

JavaScript

var KeyCodes = 
   {
      /// <summary> Object designed to handle various key code identifications. </summary>

      IsSpecial   : function(oEvent) { return oEvent.ctrlKey || oEvent.altKey; },
      IsActionKey : function(oEvent) { return KeyCodes.IsEditKey(oEvent) || KeyCodes.IsCtrlCommand(oEvent); },
      IsNumber    : function(oEvent) { return KeyCodes.IsActionKey(oEvent)  || (((oEvent.which >= 48 && oEvent.which <= 57) || (oEvent.which >= 96 && oEvent.which <= 105)) && oEvent.shiftKey == false); },      
      IsDecimal   : function(oEvent) { return KeyCodes.IsNumber(oEvent)  || ((oEvent.which == KeyCodes.PERIOD || oEvent.which == KeyCodes.NUMPAD_DECIMAL) && oEvent.srcElement.value.indexOf(".") == -1); },

      IsEditKey : function(oEvent) 
      { 
         var bIsEdit = false;
         
         if (this.IsSpecial(oEvent))
            return true;

         switch (oEvent.which)
         {
            case this.ENTER :
            case this.NUMPAD_ENTER :
            case this.BACKSPACE :
            case this.TAB :
            case this.PAGE_UP :
            case this.PAGE_DOWN :
            case this.END :
            case this.HOME :
            case this.DELETE :
            case this.INSERT :
            case this.LEFT :
            case this.RIGHT :
            case this.UP :
            case this.DOWN :
               bIsEdit = true; break;
            default :
               bIsEdit = false;
         }

         return bIsEdit;
      },

      IsCtrlCommand : function(oEvent) 
      { 
         var bIsCtrlCommand = false;

         if (oEvent.which == 17) // CTRL
            return true;
         else if (oEvent.ctrlKey)
            switch (oEvent.which)
            {
               case 65: // a
               case 67: // c
               case 70: // f
               case 83: // s
               case 86: // v
               case 88: // x
               case 90: // z
                  bIsCtrlCommand = true; break;
               default : 
                  bIsCtrlCommand = false; 
            }
         
         return bIsCtrlCommand;
      },

      Display           : function(oKeyCode) { return oKeyCode ? String.fromCharCode(oKeyCode) : ""; },
      ESCAPE            : 27,
      ENTER             : 13,
      NUMPAD_ENTER      : 108,
      BACKSPACE         : 8,
      DELETE            : (IsKHTML() ? 127 : 46),
      INSERT            : 45,
      END               : 35,
      HOME              : 36,
      PAGE_DOWN         : 34,
      PAGE_UP           : 33,
      SPACE             : 32,
      TAB               : 9,
      NUMPAD_DECIMAL    : 110,
      PERIOD            : 190,
      COMMA             : 188,
      UP                : 38,
      DOWN              : 40,
      LEFT              : 37,
      RIGHT             : 39,
      NUMPAD_ADD        : 107,
      NUMPAD_DIVIDE     : 111,
      NUMPAD_MULTIPLY   : 106,
      NUMPAD_SUBTRACT   : 109
   }

Posted 24-Apr-14 9:47am

FluffySaysNo

Comments

_Dhull 28-Apr-14 1:04am

Thanks FluffySaysNo :)

Solution 3

Sir i want to made a form where the user inputs their nam,father name,course title,course credit hours,and their marks
I want when user click on submit button the data is pass to another page and make a DMC with calculated GPA

Posted 10-Sep-20 15:23pm

Member 14935410

Comments

Dave Kreskowiak 10-Sep-20 23:15pm

You posted this as an answer to a 6 year old question. Don't do that.

Go to the "quick answers" menu above and click "Ask a question". Describe your problem. Don't post "I want to do such and such" and leave it at that.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2014-04-23T17:01:00

Solution 1

The following code would loop through all the TextBoxes on the Page.

JavaScript

var oInputs = new Array();
oInputs = document.getElementsByTagName( 'input' ) // store collection of all <input/> elements

for ( i = 0; i < oInputs.length; i++ )
{ 
    // loop through and find <input type="text"/>
    if ( oInputs[i].type == 'text' )
    {
        // Now here, oInputs[i] is a TextBox. Do whatever you want to do.
    }
}

Update

Including Demo.

[Demo] Attach KeyPress Event for all TextBoxes in the Page allowing numbers only[^].

Posted 23-Apr-14 17:01pm

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

Updated 23-Apr-14 23:59pm

v2

Comments

_Dhull 24-Apr-14 3:25am

Thanks Tadit!

i wanted to know what to write in

if ( oInputs[i].type == 'text' )
{
// what to write here. Please give me Regular expression and full code
}

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Apr-14 3:30am

So, you want only numbers should be allowed and nothing else, right?

_Dhull 24-Apr-14 3:43am

Yes Only Numbers

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Apr-14 4:00am

And other characters should be deleted?

I mean if one TextBox contains data "abcd1234", after this code, it should contain "1234", right?

_Dhull 24-Apr-14 5:15am

Yes Right. Actually i want it does't allow user to enter any other char. Interger only should be allowed.
I have 100 Textboxes on page.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Apr-14 5:53am

Yeah, I have done the demo. Wait. I am giving the link. Stay tuned. :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 24-Apr-14 6:00am

Now, see my updated answer, where I have included the Demo. :)

_Dhull 28-Apr-14 1:04am

Thanks a lot Tadit :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 28-Apr-14 1:35am

Welcome bro...<br>
<br>
I wrote a Blog on this - ATTACH EVENT TO ALL THE TEXTBOXES IN A WEBPAGE

Please have a look. :)