hiding multiple fields in html form

Question

I have multiple fields with same id in HTML form and I want to hide them if the value of a particular field is 1 but it only hides the first field of that id all other fields are not hidden

<div class="form-group">
    <label class="col-md-3 control-label" for="example-text-input" id="g">Days of week</label>
    <div class="col-md-9">
        <div class="checkbok">
            <label for="example-checkbox1">
            <input type="checkbox" id="g" name="gender" value="monday">Monday
            </label>
        </div>
        <div class="checkbok">
            <label for="example-checkbox1">
            <input type="checkbox" id="g" name="gender" value="tuesday">Tuesday
            </label>
        </div>
        <div class="checkbok">
            <label for="example-checkbox1">
            <input type="checkbox" id="g" name="gender" value="wednesday">Wednesday
            </label>
        </div>
        <div class="checkbok">
            <label for="example-checkbox1">
            <input type="checkbox" id="g" name="gender" value="thursday">Thursday
            </label>
        </div>
        <div class="checkbok">
            <label for="example-checkbox1">
            <input type="checkbox" id="g" name="gender" value="friday">Friday
            </label>
        </div>
        <div class="checkbok">
            <label for="example-checkbox1">
            <input type="checkbox" id="g" name="gender" value="saturday">Saturday
            </label>
        </div>
        <div class="checkbok">
            <label for="example-checkbox1">
            <input type="checkbox" id="g" name="gender" value="sunday"> Sunday
            </label>
        </div>
    </div>
</div>  
<div class="form-group">
    <label class="col-md-3 control-label" for="example-text-input" id="g">Time</label>
    <div class="col-md-3">
        <select id="g" name="nod" class="form-control">
        <?php 
            for($i=1;$i<=12;$i++){
                echo"<option value='$i'>$i AM</option>"; 
            } 
            for($i=1;$i<=12;$i++){
                echo "<option value='12+$i'>$i PM</option>";
            }?>                         
        </select>
    </div>
</div>

All the elements have the same id="g".Below is the javascript code

<script type="text/javascript">
    var ele=document.getElementById("st").value;
    if(ele==1)
        document.getElementById("g").style.visibility = "hidden";
    //else
        //document.getElementById("g").style.visibility = "none";
</script>

But only the first element(ie the text days of week) gets hidden all others are shown.How do I hide all the others

*All the elements have the same id="g"* — Start by fixing that. HTML does not allow it. http://validator.w3.org/nu/ may be helpful. — Quentin, Jul 20 '15 at 12:27
check this page should have only one element with specific ID they should not repeat http://stackoverflow.com/questions/5611963/can-multiple-different-html-elements-have-the-same-id-if-theyre-different-types — Anil Namde, Jul 20 '15 at 12:28
Agreed. An HTML document cannot have more than a single element with the same ID. That is why Javascript is only finding the first element, then stopping. Use classes and `getElementsByClassName` instead. — Wes Foster, Jul 20 '15 at 12:29

KDP · Answer 1 · 2015-07-20T12:44:09.520

0

ID should be unique in html fields,but you can have same name attribute/classname. you have to loop through the array of elements extracted using classname or name attribute.

in your case use name attribute

 function hideGender(){
     var ele=document.getElementById("st").value;
   if(ele==1){
    var elements=document.getElementsByName("gender");
    for(var i=0;i<elements.length;i++)
     elements[i].style.visibility = "hidden";
   }
 }

edited Jul 20 '15 at 12:44

answered Jul 20 '15 at 12:42

KDP

1,481
7
13

`elements[i]..style.visibility = "hidden";` needs fixing to 1 dot – Josh Stevens Jul 20 '15 at 12:43

Shrinivas Pai · Answer 2 · 2015-07-20T12:45:24.873

-1

IDs should be unique within the document. Change id="g" to class="g".

 <label for="example-checkbox1">
      <input type="checkbox" class="g" name="gender" value="saturday"> Saturday
 </label>


    <script type="text/javascript">
   Array.filter( 
   document.getElementsByClassName('g'),
   function(elem){
   elem.style.visibility = 'hidden';
   });
    </script>

edited Jul 20 '15 at 12:45

answered Jul 20 '15 at 12:29

Shrinivas Pai

7,491
4
29
56

score -2 · Answer 3 · answered Jul 20 '15 at 12:30

-2

To select multiple fields with same id you will have to use -

$('[id="yourFieldId"]');

So in your case -

var ele=document.getElementById("st").value;
if(ele==1)
   $('[id="yourFieldId"]').hide();

answered Jul 20 '15 at 12:30

Waqar

428
4
17

what? this will not work. and very bad practice whole point of a ID is to be unique simply use a class instead thats the whole point of classes – Josh Stevens Jul 20 '15 at 12:31
I agree that this is bad practice, but the jquery will work, though the original question doesn't mention jquery – depperm Jul 20 '15 at 12:32
@Josh Stevens I have already tried that, and it works. Your point is absolutely correct, one should use a class to select multiple fields. But his requirement was with id, so the solution fits. – Waqar Jul 20 '15 at 12:32

hiding multiple fields in html form

3 Answers3