CODEWITHSUNDEEP
javascriptjqueryhtml
GXCPL.Official
GXCPL.Official

Reputation: 279

Keeping Textboxes Hidden using Javascript

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.

Upvotes: 1

Views: 89

Answers (2)

Zander
Zander

Reputation: 1086

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/

Upvotes: 2

lshettyl
lshettyl

Reputation: 8181

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; }
*/

Upvotes: 1

Related Questions