Сохранение текстовых полей с помощью Javascript

Question

У меня есть 5 текстовых полей, предварительно определенных в форме.

Можно ли использовать JQuery/JavaScript для:

1. Хранить только один текстовое поле отображается, когда страница, содержащая форму загрузки.
2. Может ли быть еще ссылка/кнопка, чтобы показать остальные 4 текстовых поля по одному.
3. Можем ли мы отключить ссылку/кнопку от добавления другого текстового поля, поскольку предопределены только 5 текстовых полей.

Я работаю с типом «securefiles» в CouchCMS. И нужно добиться этого на переднем конце.

Мое текущее определение фронт текстовых полей являются:

<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" /> 

И ограниченный тип определяется как:

для каждого текстового поля.

Answer 1

Конечно, это возможно. У вас может быть контейнер div для всех ваших предопределенных входов, а когда новый создается, поставьте его ниже последнего.

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; 
      } 
     }); 
    }); 
}); 

Это сделает, что ваш текст, или границы, наши все, что вы хотите, начинается скрытые за исключением первого. Если вы нажмете кнопку «Добавить», она отобразит следующую. Не имеет значения, если текстовых полей больше нет, кнопка ничего не сделает, вам нужно будет проверить внутри функции each(), если счетчик достиг 5, а затем добавьте класс для изменения его CSS на тот, который делает пользователь знает, что он может использовать кнопку.

Демонстрация: http://jsfiddle.net/3sex8mqf/1/

Answer 2

Вы можете сделать следующее в 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; } 
*/