Входной номер для добавления дополнительных входов JQuery - PullRequest
Новая
       17

Входной номер для добавления дополнительных входов JQuery

0 голосов
/ 16 марта 2011

Я хочу иметь форму ввода, в которую можно было бы ввести число и щелкнуть кнопку рядом с ним, чтобы он «добавил» прежнее число входов с каждым собственным именем.

  1. Введите номер
  2. Нажмите кнопку Go или что-то еще
  3. Выводит на той же странице это количество входов (создает новые входы)

Я пробовал это, которое только добавляет функцию ADD по одному: 

$(function() {
    var i = $('input').size() + 1; // check how many input exists on the document and add 1 for the add command to work

    $('a#add').click(function() { // when you click the add link
        $('<p><input type="text" value="' + i + '" /></p>').appendTo('body'); // append (add) a new input to the document.
// if you have the input inside a form, change body to form in the appendTo
        i++; //after the click i will be i = 3 if you click again i will be i = 4
    });

    $('a#remove').click(function() { // similar to the previous, when you click remove link
    if(i > 1) { // if you have at least 1 input on the form
        $('input:last').remove(); //remove the last input
        i--; //deduct 1 from i so if i = 3, after i--, i will be i = 2
    }
    });

    $('a.reset').click(function() {
    while(i > 2) { // while you have more than 1 input on the page
        $('input:last').remove(); // remove inputs
        i--;
    }
    });

}); 

<a href="#" id="add">Add</a>  
<a href="#" id="remove">Remove</a>  
<input type="text" value="1" />

Ответы [ 3 ]

2 голосов
/ 16 марта 2011

Как то так? 

<script>
  $(document).ready(function(){
    $('#addButton').click(function(){
      var count = parseInt($('#quantity').val());
      var newHTML = [];
      for(var i=0;i<count;i++){
        newHTML.push('<input type="text"/><br/>');//or whatever content you want
      }
      $('#sandbox').html(newHTML.join(''));
    });
  });
</script>



<input type="text" id="quantity" value=""/>
<input type="button" id="addButton" value="Add"/>
<div id="sandbox"></div>
1 голос
/ 16 марта 2011

Вы можете сделать что-то вроде этого (адаптировать этот код под свои нужды): 

var newInputs = parseInt($('#newInputs').val(), 10);
for(var i = 0; i < newInputs; i++){
  var $input = $('<input/>').attr({
    name: 'input_'+i,
    value: i
  }).appendTo('#form');
}

В основном, когда вы нажимаете кнопку «Перейти», вы хотите взять введенное значение и зациклитьраз.На каждой итерации создайте новый элемент input и добавьте его в исходную форму.

0 голосов
/ 16 марта 2011

Вроде поздно для вечеринки, однако хорошим вариантом будет использование шаблонов jQuery $.tmpl (если вы не против использования плагина) 

var markup = '<input type="text" id="Input${this.data}" value="" class="auto"/>';
$.template("inputTemplate", markup);

$("input.add").click(function() {
    var times = parseInt($("input.times").val(), 10);
    var total = $("input.auto").length;
    for (var x = 0; x < times; x++) {
        $.tmpl("inputTemplate", (x+ total) ).appendTo("body");
    }
});
$("input.remove").click(function() {
    $("input.auto:last").remove();
});
$("input.reset").click(function() {
    $("input.auto").remove();
});

Пример кода на jsfiddle .

...