• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 460
  • Last Modified:

Javascript For Loop Question

I have several input buttons on a web page.  (I'm mimicing a list).

In Javascript:
I would like to be able to traverse every button on the page and if its name has the word sub in it, I don't want to display it.

for each button
   if instr(btn.name, "sub")
      btn.visible = false
   else
      btn.visible = true

Does anyone know how to do something like this in javascript?
0
Fraser_Admin
Asked:
Fraser_Admin
  • 2
1 Solution
 
LindzKCommented:
Here is some javascript, and some example html code to illustrate how to use it

<html>
<head>
  <title></title>
</head>
<script language="javascript">
  var btncnt = 4;
 
  function HideButtons()
  {
    // get an array of all buttons
    var btns = document.getElementsByTagName("input")
      if (btns.length > 0)
      {
        var btn;
        // loop through each button in the array
        for (var cnt = 0; cnt < btns.length; cnt++)
        {
          btn = btns(cnt);
            var btnName = btn.name;
            try
            {
              // if the button name has the word 'sub' in it, then
              // hide the button
              if (btnName.match("sub").length > 0)
              {
                btn.style.visibility = "hidden";
              }
            }
            catch(exception)
            {
            }
        }
      }
  }
</script>
<body onload="HideButtons()">

<input type="button" value="a" name="btn1">
<input type="button" value="b" name="sub2">
<input type="button" value="c" name="btn3">
<input type="button" value="d" name="btn4">


</body>
</html>
0
 
mlpk_tyrCommented:
hi,
i read your question. the above can be achieved using javascript with <div> tags of html. you can call a method in your window.onLoad which contains all this code

function showbuttons()
{
var allCtrl=document.forms[0].elements
for(i=0;i<=document.forms[0].elements;i++)
{
if (allCtrl[i].name.indexOf('sub')<> -1)  // we get the name of the control and check for the word 'sub' , if not present then -1 is returned
                                                                     // if its there
{

}
}
0
 
ColosseoCommented:
Hi

the code below loops through each element on the form. If it is either a button or a submit and its name contrains the word "sub" it is hidden otherwise it is displayed


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript">

onload=function() {

  for (var i=0;i<document.forms[0].elements.length;i++) {
   if (((document.forms[0].elements[i].type=="button") || (document.forms[0].elements[i].type=="submit")) && (document.forms[0].elements[i].name.indexOf("sub")!=-1)){
    document.forms[0].elements[i].style.visibility="hidden";
   } else {
     document.forms[0].elements[i].style.visibility="visible";
   }
  }

}
</script>

<body bgcolor="#FFFFFF" text="#000000">
<form name="form1" method="post" action="">

<input type="button" name="submit" value="Submit">
<input type="submit" name="submit2" value="Submit">
</form>
</body>
</html>

Regards

Scott
0
 
mlpk_tyrCommented:
sorry i lost the control and i continue ,

i read your question. the above can be achieved using javascript with <div> tags of html. or simply like the below.  you can call a method in your window.onLoad which contains all this code

function showbuttons()
{
var allCtrl=document.forms[0].elements
   for(i=0;i<=document.forms[0].elements;i++)
   {
         if (!(allCtrl[i].type='button) &&( allCtrl[i].name.indexOf('sub') > -1)  // we get the name of the control and the control is a button and check for the word 'sub' , if not present then -1 is returned
                                                                     // if its not there
           {
                document.forms[0].elements[allCtrl[i].name].style.visibility='hidden'; // hiding if it's
           }
     }
}


sorry for the inconvinience ,
mlpk_tyr
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now