JQuery to create dynamic textboxes on button click

Question

I am new to jQuery. I want to dynamically add two text boxes with labels firstname and lastname on clicking the "Add" button.

<table border="0" cellspacing="2">
           <tr><td style= "width:200px;" align="right">Name
             <td>
             <input type="text" id="current Name" value="" />
            </td></td>
           </tr>                    
                    <tr>
                        <td align="right">Test value</td>
                        <td>
                            <select id="test" style= "width:350px;">                            
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">datas</td>
                        <td>
               <input type="button" id="add" value="Add" onclick="AddTables();"/>                       

                        </td>
                    </tr>

                    <tr>
                        <td style="height:3px" colspan="2"></td>
                    </tr>
                    <tr style="background-color: #383838">
                        <td></td>
                                            </tr>
                    <tr>

                    </tr>
                    <tr>

                        </div>
                        </div>
                        </td>
                    </tr>
                </table>

http://jsfiddle.net/x7uQx/

I have a limit on adding the text boxes. Maximum of 7. At the same way, is there also a way to delete the text boxes?

1) Indent properly your HTML markup, 2) Clarify your question, 3) Add what have you already tried in JS -- and hopefully you'll get upvotes for your question, useful critics on your code and some good suggestions/examples. With almost 1000 reputation, you should already know the house rules ;) — Roko C. Buljan
– Roko C. Buljan, Commented Aug 29, 2013 at 6:29
If your problem is solved please mark of of answer as accepted answer — Aniket Kulkarni
– Aniket Kulkarni, Commented Aug 29, 2013 at 6:57

Tushar Gupta - curioustushar · Accepted Answer · 2013-08-29 08:56:45Z

5

DEMO

$('#add').click(function () {
    var table = $(this).closest('table');
    if (table.find('input:text').length < 7) {
        table.append('<tr><td style="width:200px;" align="right">Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
    }
});
$('#del').click(function () {
    var table = $(this).closest('table');
    if (table.find('input:text').length > 1) {
        table.find('input:text').last().closest('tr').remove();
    }
});

.closest()

.append()

Updated after OP's comment

DEMO

$('#add').click(function () {
    var table = $(this).closest('table');
    console.log(table.find('input:text').length);
    if (table.find('input:text').length < 7) {
        var x = $(this).closest('tr').nextAll('tr');
        $.each(x, function (i, val) {
            val.remove();
        });
        table.append('<tr><td style="width:200px;" align="right">First Name <td> <input type="text" id="current Name" value="" /> </td><td style="width:200px;" align="right">Last Name <td> <input type="text" id="current Name" value="" /> </td></tr>');
        $.each(x, function (i, val) {
            table.append(val);
        });
    }
});
$('#del').click(function () {
    var table = $(this).closest('table');
    if (table.find('input:text').length > 1) {
        table.find('input:text').last().closest('tr').remove();
    }
});

edited Aug 29, 2013 at 8:56

answered Aug 29, 2013 at 6:39

Tushar Gupta - curioustushar

57.2k24 gold badges106 silver badges110 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

divz Over a year ago

jsfiddle.net/x7uQx/15 while clicking the add or delete button how can i generate textboxes below the add and del button instead of jodetails heading

Aniket Kulkarni · Accepted Answer · 2013-08-29 06:40:21Z

1

I hope The following code is more useful to you

<html>
<head>
<title>jQuery add / remove textbox example</title>

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

<style type="text/css">
div{
    padding:8px;
}
</style>

</head>

<body>

<h1>jQuery add / remove textbox example</h1>

<script type="text/javascript">

$(document).ready(function(){

var counter = 2;

$("#addButton").click(function () {

if(counter>10){
        alert("Only 10 textboxes allow");
        return false;
}   

var newTextBoxDiv = $(document.createElement('div'))
     .attr("id", 'TextBoxDiv' + counter);

newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
      '<input type="text" name="textbox' + counter + 
      '" id="textbox' + counter + '" value="" >');

newTextBoxDiv.appendTo("#TextBoxesGroup");


counter++;
 });

 $("#removeButton").click(function () {
if(counter==1){
      alert("No more textbox to remove");
      return false;
   }   

counter--;

    $("#TextBoxDiv" + counter).remove();

 });

 $("#getButtonValue").click(function () {

var msg = '';
for(i=1; i<counter; i++){
  msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();
}
      alert(msg);
 });
  });
</script>
</head><body>

<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
    <label>Textbox #1 : </label><input type='textbox' id='textbox1' >
</div>
</div>
<input type='button' value='Add Button' id='addButton'>
<input type='button' value='Remove Button' id='removeButton'>
<input type='button' value='Get TextBox Value' id='getButtonValue'>

</body>
</html>

Link

edited Aug 29, 2013 at 6:40

Aniket Kulkarni

13k10 gold badges70 silver badges94 bronze badges

answered Aug 29, 2013 at 6:30

kondapaka

1321 silver badge10 bronze badges

2 Comments

Roko C. Buljan Over a year ago

Please add some code. For future visitors a dead link will be all but useful :)

Krishnabhadra Over a year ago

If you have an answer, please describe the answer here itself. Link only answer are discouraged.

Sharad · Accepted Answer · 2013-08-29 06:42:48Z

I have modified your HTML little bit.

<table id="tbl" border="0" cellspacing="2">
           <tr><td style= "width:200px;" align="right">Name
             <td>
             <input type="text" id="current Name" value="" />
            </td></td>
           </tr>                    
                    <tr>
                        <td align="right">Test value</td>
                        <td>
                            <select id="test" style= "width:350px;">                            
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="right">datas</td>
                        <td>
               <input type="button" id="add" value="Add"/>                      

                        </td>
                    </tr>

                    <tr>
                        <td style="height:3px" colspan="2"></td>
                    </tr>
                    <tr style="background-color: #383838">
                        <td></td>
                                            </tr>
                    <tr>

                    </tr>
                    <tr>

                        </div>
                        </div>
                        </td>
                    </tr>
                </table>

Here is the jquery code

$(document).ready(function(){
$("#add").bind("click",AddTables);
function AddTables(e)
    {
        if($("#tbl tr[addedrow='yes']").length<7)
        {
        $("#tbl").append("<tr addedrow='yes'><td>First Name</td><td><input type='text'/></td></tr><tr><td>Last Name</td><td><input type='text'/></td></tr>");
        }
    } 

});

You can see it http://jsfiddle.net/x7uQx/12/

You can remove these also using .remove().

Aniket Kulkarni · Accepted Answer · 2013-08-29 06:37:50Z

0

If you have id or class of table or textbox you want to remove then you can use .remove() function of jQuery. Here is link .remove()

<script>
 $("button").click(function () {
 $("#id1").remove();  //this will remove your textfield or table or row from table whose id is id1
 });
</script>

For adding you can either use .append() or .appendTo() depends upon your need.

You problem is not clear yet but I think that's what are you looking for.

edited Aug 29, 2013 at 6:37

answered Aug 29, 2013 at 6:31

Aniket Kulkarni

13k10 gold badges70 silver badges94 bronze badges

Comments

Praveen · Accepted Answer · 2013-08-29 06:41:04Z

0

You can use .append() like this

$('input[type=button]').on('click', function() {
$(this).append('<label for="firstname">first name</label> <input type="text" id="firstname"/>');
$(this).append('<label for="lastname">last name</label> <input type="text" id="lastname"/>');
});

Use .remove() to delete an element like this

$('#firstname, label[for="firstname"]').remove();
$('#lastname, label[for="lastname"]').remove();

answered Aug 29, 2013 at 6:41

Praveen

56.7k35 gold badges137 silver badges169 bronze badges

1 Comment

divz Over a year ago

jsfiddle.net/x7uQx/15 while clicking the add or delete button how can i generate textboxes below the add and del button instead of jodetails heading

Abhishek Maurya · Accepted Answer · 2015-06-25 12:09:30Z

0

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            $("#ddlSelect").change(function ()
            {
                $("#divTxtGroup").empty();             
                var num = this.value;
                if (num > 0) {
                    for (i = 1; i <= num; i++) {
                        var newTextBoxDiv1 = $(document.createElement('div')).attr("id", 'divTxt' + i);
                        newTextBoxDiv1.after().html('<label>Textbox ' + i + ' : </label><input type="text" id="txt' + i + '">');
                        newTextBoxDiv1.appendTo("#divTxtGroup");
                    }
                }
            });
        });
    </script>
</head>
<body>
    <select id="ddlSelect" name="ddlSelect">
        <option value="0">-----Select-----</option>
        <option value="1">One</option>
        <option value="2">Two</option>
        <option value="3">Three</option>
    </select>
     <div id='divTxtGroup'></div>
</body>

answered Jun 25, 2015 at 12:09

Abhishek Maurya

5495 silver badges8 bronze badges

1 Comment

ZygD Over a year ago

Can you also describe your answer? Why is it more useful than others?

Collectives™ on Stack Overflow

JQuery to create dynamic textboxes on button click

6 Answers 6

1 Comment

2 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

Comments

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related