Tell me more ×
Code Review Stack Exchange is a question and answer site for peer programmer code reviews. It's 100% free, no registration required.
up vote 1 down vote favorite

What is the simplest way of hiding labels and inputs in a way that they do not affect the layout. See image and the code below. The label text3 is hidden and there is no extra gap between text2 and text4. In this implementation I put both in div container and change its .style.display property.

Edit: the figure is excactly what I want but the implementation is not good. In other words, how to rewrite the function (e.g. getting rid of div and using css...).

Example of hiding a row

<html>
<body>
<script type="application/javascript">

    function hideableLabelAndTextInput(divId, inputId, labelTxt){
        // container
        var hiderDiv = document.createElement('div');
        hiderDiv.style.display = 'block';
        hiderDiv.id = divId

        // label
        var newLabel = document.createElement('label');
        newLabel.innerHTML = labelTxt;

        // textBox
        var newTextBox = document.createElement('input');
        newTextBox.type = 'text';
        newTextBox.id = 'inputId';

        // grouping
        hiderDiv.appendChild(newLabel);
        hiderDiv.appendChild(newTextBox);

        return hiderDiv;
    }

    for (var i=0; i<10; i++){
        elem = hideableLabelAndTextInput('div' + i, 'text' + i, 'text' + i);
        document.body.appendChild(elem);
    }

    document.getElementById('div3').style.display = 'none';
    document.getElementById('div6').style.display = 'none';

</script>
</body>
</html>
share|improve this question
1  
So you want to have a gap between 2 and 4? Just trying to make sure I understand – Flambino Oct 16 '12 at 20:03
No, I want it to exactly like that. I just think that my implementation is bad... – Juha Oct 16 '12 at 20:50
Why not just add the label name as a data attribute to the element it's for? Example <div data-label="text1">Test 1</div> – Larry Battle Oct 18 '12 at 23:39

1 Answer

up vote 1 down vote

I would use a combination of CSS and JavaScript for this use-case. Essentially what you want to achieve is a simple solution to showing and hiding form elements.

This is what I would suggest for markup:

<form id="myform" method="POST" action="/some/processing/script">
    <fieldset id="group-a" class="input-group">
        <label for="my-input-element-1" class="input-wrapper">
            <span>My Element Label</span>
            <input type="text" id="my-input-element-1" value="" />
        </label>

        <!-- Repeat as many times as you need -->
    </fieldset>
</form>

CSS:

#myform label {
    display: block;
    margin: 0 0 10px 0; /* Set the bottom margin to whatever you want */
}

#myform label > span {
    display: block;    /* display:block will force the input element below it */
    margin: 0 0 3px 0; /* Set the bottom margin to whatever you want */
}

#myform label > input[type="text"] {
    display: block;    /* The default is inline, but we want to span the whole width */
    width: 100%; /* Full width */
    padding: 5px 0; /* Trick to allow an input to span the full width, without poking out of the containing element */
    margin: 0; /* Set the bottom margin to whatever you want */
    text-indent: 5px; /* Indent the text to make it appear normally */
}

#myform label.hidden {
    display: none !important;
    visibility: hidden !important;
}

/* OR */

.hidden {
  display: none !important;
  visibility: hidden !important; /* Prevent element from affecting the box model, e.g. whitespace between visible, surrounding elements  */
}

Now, with this setup in mind, you should only have to add or remove the class .hidden from either the containing <label /> element or apply it to the <fieldset /> element if you want to hide the whole group.

Also, if you're going to go to the trouble of hiding input fields, I'd recommend setting the disabled attribute, e.g. <input type="text" disabled="disabled" /> to prevent it's values from being serialized/submitted as part of the form.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.