Adding Input Field to form

Question

I was trying to use this:

But it seems that the jQuery version he is using is quite outdated.

However, the only necessary update I see in his code is to change .live() to .on(). But the remove button refused to work if I changed so.

    $('#remScnt').on('click', function() { 
            if( i > 2 ) {
                    $(this).parents('p').remove();
                    i--;
            }
            return false;
    });

Anyone has any idea why?

on() method has been added in jQuery 1.7, you're using the 1.4.3 version — Sam
– Sam, Commented May 12, 2013 at 2:06
@hjpotter92 I did try changing the ID to a class in my local test site, but it didnt work :( — He Hui
– He Hui, Commented May 12, 2013 at 3:07

hjpotter92 · Accepted Answer · 2013-05-12 02:34:02Z

1

The ID must be unique (This is not causing the trouble though)
Delegation is needed for newly added content.

jQuery

$(function () {
    var scntDiv = $('.p_scents');
    var i = $('.p_scents p').length + 1;

    $('#addScnt').on('click', function () {
        $('<p><label for="p_scnts"><input type="text" class="p_scnt" size="20" name="p_scnt_' + i + '" value="" placeholder="Input Value" /></label> <a href="#" class="remScnt">Remove</a></p>').appendTo(scntDiv);
        i++;
        return false;
    });

    $('.p_scents').on('click', '.remScnt', function () {
        if (i > 2) {
            $(this).parents('p').remove();
            i--;
        }
        return false;
    });
});

HTML

<h2><a href="#" id="addScnt">Add Another Input Box</a></h2>

<div class="p_scents">
    <p>
        <label for="p_scnts">
            <input type="text" id="p_scnt" size="20" name="p_scnt" value="" placeholder="Input Value" />
        </label>
    </p>
</div>

This works perfectly: http://jsfiddle.net/uFkPx/

edited May 12, 2013 at 2:34

answered May 12, 2013 at 2:09

hjpotter92

81.1k36 gold badges148 silver badges188 bronze badges

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

4 Comments

He Hui Over a year ago

@vher2 if size() is deprecated, what's the new one? length()?

hjpotter92 Over a year ago

@HeHui .length is not a method; just a property. Therefore, $('.p_scents p').length and not $('.p_scents p').length() is used.

He Hui Over a year ago

I'm assuming that would return how many p tags exists in .p_scents class?

hjpotter92 Over a year ago

@HeHui Yup. It will not be restricted to immediate children though!

adeneo · Accepted Answer · 2013-05-12 02:14:08Z

Looks like it needs a rewrite, several deprecated methods, dynamic elements created from strings, targeting all parents(), same ID's etc :

$(function () {
    var scntDiv = $('#p_scents'),
        i       = $('#p_scents p').length + 1;

    $('#addScnt').on('click', function (e) {
        e.preventDefault();
        var p = $('<p />'),
            l = $('<label />', {for: 'inp_'+i}),
            j = $('<input />', {type: 'text', 
                                id: 'inp_'+i, 
                                size: 20,
                                name: 'p_scnt_' + i,
                                placeholder: 'Input Value'
                               }),
            a = $('<a />', {href : '#', 
                            id: 'remScnt_' + i,
                            'class' : 'remScnt',
                            text: 'Remove'
                           });

        p.append(l.append(j), a).appendTo(scntDiv);
        i++;
    });

    scntDiv.on('click', '.remScnt', function (e) {
        e.preventDefault();
        if (i > 2) {
            $(this).closest('p').remove();
            i--;
        }
    });
});

FIDDLE

Collectives™ on Stack Overflow

Adding Input Field to form

2 Answers 2

jQuery

HTML

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

jQuery

HTML

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related