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

У меня есть веб-страница. Существует кнопка с именем add. Когда эта кнопка добавления нажата, необходимо добавить 1 текстовое поле. Это должно происходить только на стороне клиента. Я хочу разрешить пользователю добавлять не более 10 текстовых полей.Добавление нового текстового поля с помощью javascript

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

пример: отображаются

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

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

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

источник

2009-08-09 user93796

Вы используете jquery или какой-либо другой фреймворк javascript? – opHASnoNAME

Что вы подразумеваете под текстовым полем, вы имеете в виду asp.net textbox control? –

@Amr - OP заявляет клиентов. Как это означает текстовое поле asp.net? – redsquare

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

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

источник

2009-08-09 10:39:59 Quentin

can u pleas giv код детали вдоль wit html.I не знаком с javascript – user93796

Раствор с помощью 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(); 
    }); 
});

Примечание: Я не проверял код.

Edit: изменен неисправные кавычки

источник

2009-08-09 10:41:48 Scharrels

OP запросил javascript. Не решение jQuery. Посмотрите на теги в следующий раз для получения этой информации! – redsquare

Насколько мне не нравится распространенность «Использовать jQuery!» как ответ за все, что JS связано с stackoverflow - jQuery * есть * JavaScript. – Quentin

Я надеюсь, что вы используете 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'>

источник

2009-08-09 10:43:07

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

ответ

Смежные вопросы