Clearing text field using JQuery

Question

I have a table and I have only one row in it. I am generating rows dynamically when the Enter button is pressed. This is my code.

   <table>
        <thead>
            <tr>
                <th class="text-center">Amount</th>
                <th class="text-center">Installment</th>
                <th class="text-center">Source of Money</th>
            </tr>
        </thead>
        <tbody>
            <tr class="row1" id="rw1">
                <td class="text-center" id="rw1cl1">
                    <input class="form-control" type="text">
                </td>
                <td class="text-center" id="rw1cl2">
                    <input class="form-control" type="text">
                </td>
                <td class="text-center" id="rw1cl3">
                    <input class="form-control" type="text" id="sm">
                </td>
            </tr>
        </tbody>
    </table>

JavaScript

        <script type="text/javascript">
            $(document).ready(function() {

                $('#sm').on('keyup', function(e) {

                    var code = (e.keyCode ? e.keyCode : e.which);
                    if (code == 13) {
                        var cloned = $('.row1').first().clone(true);
                        cloned.insertAfter("#rw1");

                    }

                });

            });


        </script>

I am getting cloned rows as I expected. But the problem is I am getting cloned divs with the texts which were already inserted to previous row which were used to make the clone.

Since I am new to JQuery although I am bit familiar with JavaScript, I cannot figure out how to do it. I tried several stackoverflow answers, but I ended up with no luck.

Please Help me to solve the issue. Thanks!

Try `var cloned = $('.row1').first().clone();` – Florian Gl Sep 10 '14 at 07:39 — Florian Gl, Sep 10 '14 at 07:39
You are also cloning the `#ID`.. not good at all... – gmo Sep 10 '14 at 07:41 — gmo, Sep 10 '14 at 07:41

Milind Anantwar · Accepted Answer · 2014-09-10T09:58:32.207

2

For clearing textboxes on clone:

 var cloned = $('.row1').first().clone(true);
 cloned.find('input').val("");

Update: as gmo suggested, you should not clone ids. ids should be unique. You should assign new id to cloned TR element.

 var cloned = $('.row1').first().clone(true);
 cloned.attr('id','rw'+($('tbody tr').length+1))
 cloned.find('input').val("");

edited Sep 10 '14 at 09:58

answered Sep 10 '14 at 07:39

Milind Anantwar

81,290
25
94
125

As this is the accepted answer, I suggest (for better practice) provide a modification to OP script to avoid cloning the `id attr`. Something like this for example http://stackoverflow.com/questions/10126395/how-to-jquery-clone-and-change-id or add a note warning about it. – gmo Sep 10 '14 at 09:53

vikrant singh · Answer 2 · 2014-09-10T08:29:13.453

0

var cloned = $('.row1').first().clone(true);
cloned.insertAfter("#rw1").find("input").val("");//instering clone after #rw1 and clearing input fields

DEMO

edited Sep 10 '14 at 08:29

answered Sep 10 '14 at 07:41

vikrant singh

2,091
1
12
16

2

Answering with code is fine, but an explanation of what you're doing could go a long way for others reading this... – 2Dee Sep 10 '14 at 08:01

score 0 · Answer 3 · answered Sep 10 '14 at 07:43

0

The boolean argument in .clone() determines whether or not to copy the elements data and events. Try var cloned = $('.row1').first().clone(); instead.

answered Sep 10 '14 at 07:43

Florian Gl

5,984
2
17
30

score 0 · Answer 4 · answered Sep 10 '14 at 07:47

   <script type="text/javascript">
        $(document).ready(function() {

            $('#sm').on('keyup', function(e) {

                var code = (e.keyCode ? e.keyCode : e.which);
                if (code == 13) {
                    var cloned = $('.row1').first().clone(true);
                    cloned.find("input").val("").end().insertAfter("#rw1");

                }

            });

        });


    </script>

Clearing text field using JQuery

4 Answers4

DEMO