Keeping Textboxes Hidden using Javascript

Question

I have 5 text boxes pre-defined in a form.

Is it possible to use JQuery/JavaScript to:

1. Keep only one textbox visible when the page containing the form is loaded.
2. Can there be A more link/button to show the other 4 text boxes, one at a time.
3. Can we disable the link/button from adding another text box, because only 5 textboxes are predefined.

I am working with "securefiles" type in CouchCMS. And have to achieve this at the front end.

My current front definition of the text boxes are:

  <cms:input type="bound" name="ibox1" /><br /><br />
    <cms:input type="bound" name="ibox2" /><br /><br />
    <cms:input type="bound" name="ibox3" /><br /><br />
    <cms:input type="bound" name="ibox4" /><br /><br />
    <cms:input type="bound" name="ibox5" />

And the bounded type is defined as:

for each textbox.

Zander · Accepted Answer · 2015-03-16 15:53:24Z

Of course it's possible. You can have a div container for all your predefined inputs, and when a new one is created, put it below the last one.

HTML:

<div id="where_boxes_go">
    <input type="bound" name="ibox1">
    <input type="bound" name="ibox2">
    <input type="bound" name="ibox3">
    <input type="bound" name="ibox4">
    <input type="bound" name="ibox5">
</div>
<span class="more-inputs">Add</span>

CSS

.hidden {
    display: { none; }
}

JQUERY

$(document).ready(function() {
    $(".more-inputs").on("click", function() {
        $(".form").each(function() {
            if( $(this).hasClass("hidden") ) {
                $(this).removeClass("hidden");
                return false;
            }
         });
    });
});

This will make that your text, or bounds, our whatever you want starts hidden except the first one. If you click the Add button, it will show the next one. It won't matter if there is no more text boxes, the button won't do anything, you will have to check inside the each() function if a counter reached 5, and then add a class for changing it's CSS to one that make the user know that he can use the button.

Demo: http://jsfiddle.net/3sex8mqf/1/

lshettyl · Accepted Answer · 2015-03-16 15:10:34Z

1

You could do the following in jQuery. Demo@fiddle

var $inputs = $("input[type='bound']"), count = 0;
$inputs.first().show();

$(".more").on("click", function(e) {
    e.preventDefault();
    count++;
    $inputs.filter(":eq("+count+")").show();
    if ($inputs.length === count + 1) {
        $(this).hide();
    }
});

HTML:

<input type="bound" name="ibox1" /><br /><br />
    <input type="bound" name="ibox2" /><br /><br />
    <input type="bound" name="ibox3" /><br /><br />
    <input type="bound" name="ibox4" /><br /><br />
    <input type="bound" name="ibox5" />

<button class="more" style="cursor: pointer">Show More</button>

CSS:

input[type="bound"] { display: none; }
/* OR
input { display: none; }
*/

edited Mar 16, 2015 at 15:10

answered Mar 16, 2015 at 15:05

lshettyl

8,1815 gold badges27 silver badges31 bronze badges

Collectives™ on Stack Overflow

Keeping Textboxes Hidden using Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related