dom events - Adding new text box using JavaScript

I have a web page. There is a button called add. When this add button is clicked then one text box must be added. This should happen at client side only. I want to allow the user to add at most 10 text boxes.

How can I achieve it using JavaScript?

Example:

only one text box is displayed
user click add >
Two text boxes displayed
user clicks add >

I also wants to provide a button called "remove" by which the user can remove the extra text box

Can anyone provide me a JavaScript code for this?

How can I achieve it using JavaScript?

Example:

only one text box is displayed
user click add >
Two text boxes displayed
user clicks add >

I also wants to provide a button called "remove" by which the user can remove the extra text box

Can anyone provide me a JavaScript code for this?

Share Improve this question edited Apr 3, 2023 at 21:56 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Aug 9, 2009 at 10:11 user93796 18.4k31 gold badges98 silver badges153 bronze badges

3 do you use jquery or some other javascript framework ? – opHasNoName Commented Aug 9, 2009 at 10:17
What do you mean by textbox, do you mean asp textbox control? – Amr Elgarhy Commented Aug 9, 2009 at 10:31
2 @Amr - The OP states clientside. How does that mean an asp textbox?? – redsquare Commented Aug 9, 2009 at 10:33
Sounds a lot like homework... – JimG Commented Aug 9, 2009 at 10:33

Add a ment |

3 Answers 3

Sorted by: Reset to default 1

Untested, but this should work (assuming an element with the right id exists);

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

A solution using the jQuery framework:

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

The jQuery script code:

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

Note: I did not test the code.

Edit: changed faulty quotation marks

I hope you are using 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'>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

dom events - Adding new text box using JavaScript - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)