Добавление нового текстового поля с помощью javascript

У меня есть веб-страница. Есть кнопка добавить. При нажатии этой кнопки добавления должно быть добавлено 1 текстовое поле. Это должно происходить только на стороне клиента. Я хочу разрешить пользователю добавлять не более 10 текстовых полей.

Как я могу добиться этого с помощью javascript?

пример:

  • отображается только 1 текстовое поле
  • пользователь нажимает добавить >
  • Отображено 2 текстовых поля
  • пользователь нажимает добавить >

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

Может ли кто-нибудь предоставить мне код javascript для этого ??


javascript javascript-events
person user93796    schedule 09.08.2009    source источник
comment
Вы используете jquery или какой-либо другой фреймворк javascript?   -  person opHASnoNAME    schedule 09.08.2009
comment
Что вы подразумеваете под текстовым полем, вы имеете в виду управление текстовым полем asp.net?   -  person Amr Elgarhy    schedule 09.08.2009
comment
@Amr - OP указывает на стороне клиента. Как это означает текстовое поле asp.net ??   -  person redsquare    schedule 09.08.2009
comment
Очень похоже на домашнее задание...   -  person JimG    schedule 09.08.2009

Ответы (3)


arrow_upward
1
arrow_downward

Не проверено, но это должно работать (при условии, что элемент с правильным идентификатором существует);

var add_input = function () {

    var count = 0;

    return function add_input() {
        count++;
        if (count >= 10) {
            return false;
        }
        var input = document.createElement('input');
        input.name = 'generated_input';
        document.getElementbyId('inputs_contained').appendChild(input);
    }

}();

add_input();
add_input();
add_input();
person Quentin    schedule 09.08.2009
comment
не могли бы вы дать подробный код вместе с html. Я не знаком с javascript - person user93796; 09.08.2009

arrow_upward
1
arrow_downward

Решение, использующее структуру jQuery:

<form>
<ul class="addedfields">
<li><input type="text" name="field[]" class="textbox" />
<input type="button" class="removebutton" value="remove"/></li>
</ul>
<input type="button" class="addbutton" value="add"/>
</form>

Код jQuery-скрипта:

$(function(){
  $(".addbutton").click(){
     if(".addedfields").length < 10){
       $(".addedfields").append(
         '<li><input type="text" name="field[]" class="textbox" />' + 
         '<input type="button" class="removebutton" value="remove"/></li>'
       );
     }
  }

  // live event will automatically be attached to every new remove button
  $(".removebutton").live("click",function(){
     $(this).parent().remove();
  });
});

Примечание. Я не тестировал код.

Изменить: изменены ошибочные кавычки

person Scharrels    schedule 09.08.2009
comment
ОП попросил javascript. Не решение jQuery. Посмотрите на теги в следующий раз для этой информации! - person redsquare; 09.08.2009
comment
Как бы мне не нравилось распространение Use jQuery! в качестве ответа на все, что связано с JS в stackoverflow — jQuery является JavaScript. - person Quentin; 09.08.2009

arrow_upward
1
arrow_downward

Надеюсь, вы используете jQuery.

<script src="jquery.js" type="text/javascript"></script> 
<script type="text/javascript"><!--


    $(document).ready(function(){

    var counter = 2;
    $("#add").click(function () {
    if(counter==11){
        alert("Too many boxes");
        return false;
    }   
        $("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'> Textbox "+counter+"</label><input type='textbox' id='t"+counter+"' > </div>\n");
        ++counter;
    });

    $("#remove").click(function () {
    if(counter==1){
        alert("Can u see any boxes");
        return false;
    }   
        --counter;
        $("#d"+counter).remove();
    });
  });
// --></script>
</head><body>

 <div id='textBoxes'>
<div id='d1' ><label for="t1"> Textbox 1</label><input type='textbox' id='t1' ></div>
</div>
<input type='button' value='add' id='add'>
<input type='button' value='remove' id='remove'>
person Ahmet Kakıcı    schedule 09.08.2009