Skip to main content
T
The_FedEx_Guy
Inspiring
February 16, 2010
Answered

textboxes dependant on quantity dropdown

  • February 16, 2010
  • 1 reply
  • 429 views

I want to be able to choose how many textboxes come up when I select a quantity from a dropdown select.

currently I have a div which is hidden but holds all the textboxes.

<script language="JavaScript">

function hideSomeControls(value){
var os0 = document.getElementById("inp");
  if(value == "Single Ticket") os0.style.visibility = "hidden";
  else os0.style.visibility = "visible";
  return false;
}

</script>
<link href="../SpryAssets/SpryValidationSelect.css" rel="stylesheet" type="text/css">
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css">
</head>

<td class="style6">Ticket Type:</td>
                      <td class="style6"><span id="spryselect1">
                        <select name="os0"  id="os0" onChange="hideSomeControls(this.value)">
                          <option value="Single Ticket">Single Ticket - &pound;<?php echo $row_event_selector['single_price']; ?></option>
                          <option value="Table">Table - &pound;<?php echo $row_event_selector['table_price']; ?></option>
                        </select>
                        <span class="selectRequiredMsg">Please select a Ticket Type.</span></span></td>

I want to be able to give the user the ability to select how many guests he/she will be bringing then show the correct amount of textboxes.

Each guest will have two textboxes "name" and "occupation"

This topic has been closed for replies.
Correct answer David_Powers

Two things:

  • IE uses currentStyle for styles that aren't defined inline
  • instead of visibility, you should use display: block, and display: none

To get around the problems with IE/FF differences, I would suggest using jQuery, which makes it a lot easier. jQuery has show(), hide(), and toggle().

1 reply

T
The_FedEx_GuyAuthor
Inspiring
February 16, 2010

IE and opera do not seem to work with this javascript

<script language="JavaScript">

function hideSomeControls(value){
var os0 = document.getElementById("inp");
  if(value == "Single Ticket") { os0.style.visibility = "hidden";
  quantity.style.visibility = "visible";}
  else { os0.style.visibility = "visible";
  quantity.style.visibility = "hidden";}
  return false;
}

</script>
<script language="JavaScript">

function hideSomeControls1(value){
var quantity = document.getElementById("inp");
  if(value == "0"){ quantity.style.visibility = "hidden";
  g1.style.visibility = "hidden";
  g2.style.visibility = "hidden";
  g3.style.visibility = "hidden";
  g4.style.visibility = "hidden";
  g5.style.visibility = "hidden";
  g6.style.visibility = "hidden";
  g7.style.visibility = "hidden";
  g8.style.visibility = "hidden";
  g9.style.visibility = "hidden"; 
  g1o.style.visibility = "hidden";
  g2o.style.visibility = "hidden";
  g3o.style.visibility = "hidden";
  g4o.style.visibility = "hidden";
  g5o.style.visibility = "hidden";
  g6o.style.visibility = "hidden";
  g7o.style.visibility = "hidden";
  g8o.style.visibility = "hidden";
  g9o.style.visibility = "hidden";
  g1l.style.visibility = "hidden";
  g2l.style.visibility = "hidden";
  g3l.style.visibility = "hidden";
  g4l.style.visibility = "hidden";
  g5l.style.visibility = "hidden";
  g6l.style.visibility = "hidden"; 
  g7l.style.visibility = "hidden";
  g8l.style.visibility = "hidden";
  g9l.style.visibility = "hidden";
  g1ol.style.visibility = "hidden";
  g2ol.style.visibility = "hidden";
  g3ol.style.visibility = "hidden";
  g4ol.style.visibility = "hidden";
  g5ol.style.visibility = "hidden";
  g6ol.style.visibility = "hidden"; 
  g7ol.style.visibility = "hidden";
  g8ol.style.visibility = "hidden";
  g9ol.style.visibility = "hidden";    }
  if(value == "1"){ quantity.style.visibility = "visible";
  g1.style.visibility = "visible";
  g2.style.visibility = "hidden";
  g3.style.visibility = "hidden";
  g4.style.visibility = "hidden";
  g5.style.visibility = "hidden";
  g6.style.visibility = "hidden";
  g7.style.visibility = "hidden";
  g8.style.visibility = "hidden";
  g9.style.visibility = "hidden"; 
  g1o.style.visibility = "visible";
  g2o.style.visibility = "hidden";
  g3o.style.visibility = "hidden";
  g4o.style.visibility = "hidden";
  g5o.style.visibility = "hidden";
  g6o.style.visibility = "hidden";
  g7o.style.visibility = "hidden";
  g8o.style.visibility = "hidden";
  g9o.style.visibility = "hidden";
  g1l.style.visibility = "visible";
  g2l.style.visibility = "hidden";
  g3l.style.visibility = "hidden";
  g4l.style.visibility = "hidden";
  g5l.style.visibility = "hidden";
  g6l.style.visibility = "hidden"; 
  g7l.style.visibility = "hidden";
  g8l.style.visibility = "hidden";
  g9l.style.visibility = "hidden";
  g1ol.style.visibility = "visible";
  g2ol.style.visibility = "hidden";
  g3ol.style.visibility = "hidden";
  g4ol.style.visibility = "hidden";
  g5ol.style.visibility = "hidden";
  g6ol.style.visibility = "hidden"; 
  g7ol.style.visibility = "hidden";
  g8ol.style.visibility = "hidden";
  g9ol.style.visibility = "hidden";   }
  if(value == "2") {quantity.style.visibility = "visible";
  g1.style.visibility = "visible";
  g2.style.visibility = "visible";
  g3.style.visibility = "hidden";
  g4.style.visibility = "hidden";
  g5.style.visibility = "hidden";
  g6.style.visibility = "hidden";
  g7.style.visibility = "hidden";
  g8.style.visibility = "hidden";
  g9.style.visibility = "hidden"; 
  g1o.style.visibility = "visible";
  g2o.style.visibility = "visible";
  g3o.style.visibility = "hidden";
  g4o.style.visibility = "hidden";
  g5o.style.visibility = "hidden";
  g6o.style.visibility = "hidden";
  g7o.style.visibility = "hidden";
  g8o.style.visibility = "hidden";
  g9o.style.visibility = "hidden";
  g1l.style.visibility = "visible";
  g2l.style.visibility = "visible";
  g3l.style.visibility = "hidden";
  g4l.style.visibility = "hidden";
  g5l.style.visibility = "hidden";
  g6l.style.visibility = "hidden"; 
  g7l.style.visibility = "hidden";
  g8l.style.visibility = "hidden";
  g9l.style.visibility = "hidden";
  g1ol.style.visibility = "visible";
  g2ol.style.visibility = "visible";
  g3ol.style.visibility = "hidden";
  g4ol.style.visibility = "hidden";
  g5ol.style.visibility = "hidden";
  g6ol.style.visibility = "hidden"; 
  g7ol.style.visibility = "hidden";
  g8ol.style.visibility = "hidden";
  g9ol.style.visibility = "hidden";     }
  if (value == "3") {quantity.style.visibility = "visible";
  g1.style.visibility = "visible";
  g2.style.visibility = "visible";
  g3.style.visibility = "visible";
  g4.style.visibility = "hidden";
  g5.style.visibility = "hidden";
  g6.style.visibility = "hidden";
  g7.style.visibility = "hidden";
  g8.style.visibility = "hidden";
  g9.style.visibility = "hidden"; 
  g1o.style.visibility = "visible";
  g2o.style.visibility = "visible";
  g3o.style.visibility = "visible";
  g4o.style.visibility = "hidden";
  g5o.style.visibility = "hidden";
  g6o.style.visibility = "hidden";
  g7o.style.visibility = "hidden";
  g8o.style.visibility = "hidden";
  g9o.style.visibility = "hidden";
      g1l.style.visibility = "visible";
      g2l.style.visibility = "visible";
        g3l.style.visibility = "visible";
          g4l.style.visibility = "hidden";
            g5l.style.visibility = "hidden";
              g6l.style.visibility = "hidden"; 
                g7l.style.visibility = "hidden";
                  g8l.style.visibility = "hidden";
                    g9l.style.visibility = "hidden";
    g1ol.style.visibility = "visible";
      g2ol.style.visibility = "visible";
        g3ol.style.visibility = "visible";
          g4ol.style.visibility = "hidden";
            g5ol.style.visibility = "hidden";
              g6ol.style.visibility = "hidden"; 
                g7ol.style.visibility = "hidden";
                  g8ol.style.visibility = "hidden";
                    g9ol.style.visibility = "hidden";   } 
  if (value == "4") {quantity.style.visibility = "visible";
  g1.style.visibility = "visible";
  g2.style.visibility = "visible";
  g3.style.visibility = "visible";
  g4.style.visibility = "visible";
  g5.style.visibility = "hidden";
  g6.style.visibility = "hidden";
  g7.style.visibility = "hidden";
  g8.style.visibility = "hidden";
  g9.style.visibility = "hidden"; 
  g1o.style.visibility = "visible";
  g2o.style.visibility = "visible";
  g3o.style.visibility = "visible";
  g4o.style.visibility = "visible";
  g5o.style.visibility = "hidden";
  g6o.style.visibility = "hidden";
  g7o.style.visibility = "hidden";
  g8o.style.visibility = "hidden";
  g9o.style.visibility = "hidden";
      g1l.style.visibility = "visible";
      g2l.style.visibility = "visible";
        g3l.style.visibility = "visible";
          g4l.style.visibility = "visible";
            g5l.style.visibility = "hidden";
              g6l.style.visibility = "hidden"; 
                g7l.style.visibility = "hidden";
                  g8l.style.visibility = "hidden";
                    g9l.style.visibility = "hidden";
      g1ol.style.visibility = "visible";
      g2ol.style.visibility = "visible";
        g3ol.style.visibility = "visible";
          g4ol.style.visibility = "visible";
            g5ol.style.visibility = "hidden";
              g6ol.style.visibility = "hidden"; 
                g7ol.style.visibility = "hidden";
                  g8ol.style.visibility = "hidden";
                    g9ol.style.visibility = "hidden";  }
   if (value == "5") {quantity.style.visibility = "visible";
  g1.style.visibility = "visible";
  g2.style.visibility = "visible";
  g3.style.visibility = "visible";
  g4.style.visibility = "visible";
  g5.style.visibility = "visible";
  g6.style.visibility = "hidden";
  g7.style.visibility = "hidden";
  g8.style.visibility = "hidden";
  g9.style.visibility = "hidden"; 
  g1o.style.visibility = "visible";
  g2o.style.visibility = "visible";
  g3o.style.visibility = "visible";
  g4o.style.visibility = "visible";
  g5o.style.visibility = "visible";
  g6o.style.visibility = "hidden";
  g7o.style.visibility = "hidden";
  g8o.style.visibility = "hidden";
  g9o.style.visibility = "hidden";
      g1l.style.visibility = "visible";
      g2l.style.visibility = "visible";
        g3l.style.visibility = "visible";
          g4l.style.visibility = "visible";
            g5l.style.visibility = "visible";
              g6l.style.visibility = "hidden"; 
                g7l.style.visibility = "hidden";
                  g8l.style.visibility = "hidden";
                    g9l.style.visibility = "hidden";
      g1ol.style.visibility = "visible";
      g2ol.style.visibility = "visible";
        g3ol.style.visibility = "visible";
          g4ol.style.visibility = "visible";
            g5ol.style.visibility = "visible";
              g6ol.style.visibility = "hidden"; 
                g7ol.style.visibility = "hidden";
                  g8ol.style.visibility = "hidden";
                    g9ol.style.visibility = "hidden";   }
   if (value == "6") {quantity.style.visibility = "visible";
  g1.style.visibility = "visible";
  g2.style.visibility = "visible";
  g3.style.visibility = "visible";
  g4.style.visibility = "visible";
  g5.style.visibility = "visible";
  g6.style.visibility = "visible";
  g7.style.visibility = "hidden";
  g8.style.visibility = "hidden";
  g9.style.visibility = "hidden"; 
  g1o.style.visibility = "visible";
  g2o.style.visibility = "visible";
  g3o.style.visibility = "visible";
  g4o.style.visibility = "visible";
  g5o.style.visibility = "visible";
  g6o.style.visibility = "visible";
  g7o.style.visibility = "hidden";
  g8o.style.visibility = "hidden";
  g9o.style.visibility = "hidden";
      g1l.style.visibility = "visible";
      g2l.style.visibility = "visible";
        g3l.style.visibility = "visible";
          g4l.style.visibility = "visible";
            g5l.style.visibility = "visible";
              g6l.style.visibility = "visible"; 
                g7l.style.visibility = "hidden";
                  g8l.style.visibility = "hidden";
                    g9l.style.visibility = "hidden";
      g1ol.style.visibility = "visible";
      g2ol.style.visibility = "visible";
        g3ol.style.visibility = "visible";
          g4ol.style.visibility = "visible";
            g5ol.style.visibility = "visible";
              g6ol.style.visibility = "visible"; 
                g7ol.style.visibility = "hidden";
                  g8ol.style.visibility = "hidden";
                    g9ol.style.visibility = "hidden";    } 
   if (value == "7") {quantity.style.visibility = "visible";
  g1.style.visibility = "visible";
  g2.style.visibility = "visible";
  g3.style.visibility = "visible";
  g4.style.visibility = "visible";
  g5.style.visibility = "visible";
  g6.style.visibility = "visible";
  g7.style.visibility = "visible";
  g8.style.visibility = "hidden";
  g9.style.visibility = "hidden"; 
  g1o.style.visibility = "visible";
  g2o.style.visibility = "visible";
  g3o.style.visibility = "visible";
  g4o.style.visibility = "visible";
  g5o.style.visibility = "visible";
  g6o.style.visibility = "visible";
  g7o.style.visibility = "visible";
  g8o.style.visibility = "hidden";
  g9o.style.visibility = "hidden";
      g1l.style.visibility = "visible";
      g2l.style.visibility = "visible";
        g3l.style.visibility = "visible";
          g4l.style.visibility = "visible";
            g5l.style.visibility = "visible";
              g6l.style.visibility = "visible"; 
                g7l.style.visibility = "visible";
                  g8l.style.visibility = "hidden";
                    g9l.style.visibility = "hidden";
      g1ol.style.visibility = "visible";
      g2ol.style.visibility = "visible";
        g3ol.style.visibility = "visible";
          g4ol.style.visibility = "visible";
            g5ol.style.visibility = "visible";
              g6ol.style.visibility = "visible"; 
                g7ol.style.visibility = "visible";
                  g8ol.style.visibility = "hidden";
                    g9ol.style.visibility = "hidden";    } 
   if (value == "8") {quantity.style.visibility = "visible";
  g1.style.visibility = "visible";
  g2.style.visibility = "visible";
  g3.style.visibility = "visible";
  g4.style.visibility = "visible";
  g5.style.visibility = "visible";
  g6.style.visibility = "visible";
  g7.style.visibility = "visible";
  g8.style.visibility = "visible";
  g9.style.visibility = "hidden"; 
  g1o.style.visibility = "visible";
  g2o.style.visibility = "visible";
  g3o.style.visibility = "visible";
  g4o.style.visibility = "visible";
  g5o.style.visibility = "visible";
  g6o.style.visibility = "visible";
  g7o.style.visibility = "visible";
  g8o.style.visibility = "visible";
  g9o.style.visibility = "hidden";
      g1l.style.visibility = "visible";
      g2l.style.visibility = "visible";
        g3l.style.visibility = "visible";
          g4l.style.visibility = "visible";
            g5l.style.visibility = "visible";
              g6l.style.visibility = "visible"; 
                g7l.style.visibility = "visible";
                  g8l.style.visibility = "visible";
                    g9l.style.visibility = "hidden";
      g1ol.style.visibility = "visible";
      g2ol.style.visibility = "visible";
        g3ol.style.visibility = "visible";
          g4ol.style.visibility = "visible";
            g5ol.style.visibility = "visible";
              g6ol.style.visibility = "visible"; 
                g7ol.style.visibility = "visible";
                  g8ol.style.visibility = "visible";
                    g9ol.style.visibility = "hidden";   }
   if (value == "9") {quantity.style.visibility = "visible";
  g1.style.visibility = "visible";
  g2.style.visibility = "visible";
  g3.style.visibility = "visible";
  g4.style.visibility = "visible";
  g5.style.visibility = "visible";
  g6.style.visibility = "visible";
  g7.style.visibility = "visible";
  g8.style.visibility = "visible";
  g9.style.visibility = "visible"; 
  g1o.style.visibility = "visible";
  g2o.style.visibility = "visible";
  g3o.style.visibility = "visible";
  g4o.style.visibility = "visible";
  g5o.style.visibility = "visible";
  g6o.style.visibility = "visible";
  g7o.style.visibility = "visible";
  g8o.style.visibility = "visible";
  g9o.style.visibility = "visible";
      g1l.style.visibility = "visible";
      g2l.style.visibility = "visible";
        g3l.style.visibility = "visible";
          g4l.style.visibility = "visible";
            g5l.style.visibility = "visible";
              g6l.style.visibility = "visible"; 
                g7l.style.visibility = "visible";
                  g8l.style.visibility = "visible";
                    g9l.style.visibility = "visible";
      g1ol.style.visibility = "visible";
      g2ol.style.visibility = "visible";
        g3ol.style.visibility = "visible";
          g4ol.style.visibility = "visible";
            g5ol.style.visibility = "visible";
              g6ol.style.visibility = "visible"; 
                g7ol.style.visibility = "visible";
                  g8ol.style.visibility = "visible";
                    g9ol.style.visibility = "visible";     }      
  return false;
}

</script>

what could be the problem?

When I select from the drop down all of the elements show.

David_Powers
David_PowersCorrect answer
Inspiring
February 18, 2010

Two things:

  • IE uses currentStyle for styles that aren't defined inline
  • instead of visibility, you should use display: block, and display: none

To get around the problems with IE/FF differences, I would suggest using jQuery, which makes it a lot easier. jQuery has show(), hide(), and toggle().

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices