Adding Unlimited Form Fields With JQuery Problem.

Question

I'm fairly new to JQuery and I'm trying to add multiple form fields for example, <li id="container" id="add_field"><input type="text" name="text" value="text" /></li> but I think my JQuery code is off can some one please help me fix the JQuery code?

Here is the JQuery script.

var count = 0;
$(function(){
    $('li#add_field').click(function(){
        count += 1;
        $('#container').append(
                 '<li><input id="field_' + count + '" name="fields[]' + '" type="text" /></li>' );

    });
});

Here is the html code.

<form method="post" action="index.php">
    <fieldset>
        <ul>
            <li><label for="code">Code: </label>
            <textarea rows="8" cols="60" name="code" id="code"></textarea></li>

            <li id="container" id="add_field"><input type="text" name="text" value="text" /></li>

            <li><label for="comment">Comments: </label>
            <textarea rows="8" cols="60" name="comment" id="comment"></textarea></li>

            <li><input type="submit" name="submit" value="Submit" /></li></ul>
    </fieldset>

</form>

Answer 1

you have duplicate attribute for li

<li id="container" id="add_field">

<li id="add_field">Add Field</li>
<li id="container"><input type="text" name="text" value="text" /></li

>

Answer 2

The problem with your code is that you're appending list elements inside the existing li#container rather than adjacent to it.

A lot of your problems can be solved by adjusting your markup a bit. This will not appear the same as what you have above so you will need to create and/or adjust CSS stylings to achieve your desired look.

<script type="text/javascript">
    $(function() {
        $('input.dynamic').live('click', function() {
            $(this.parentNode).after(
                $('<p>').append(
                    $('<input>').attr({type: 'text', name: 'fields[]', value: 'text', 'class': 'dynamic'})
                )
            );
        });
    });
</script>

<form method="post" action="index.php">
    <fieldset>
        <p>
            <label for="code">Code: </label>
            <textarea rows="8" cols="60" name="code" id="code"></textarea>
        </p>
        <p><input type="text" class="dynamic" name="fields[]" value="text"/></p>
        <p>
            <label for="comment">Comments: </label>
            <textarea rows="8" cols="60" name="comment" id="comment"></textarea>
        </p>
        <p><input type="submit" name="submit" value="Submit" /></p>
    </fieldset>
</form>

Answer 3

.append() is going to insert your content at the end but inside the targeted element. In your example this will result in incorrectly nested <li> elements.

In your example I think you're looking for .after() functionality. Each new element will be inserted at the top of the list which might not be preferable.

You can either put in conditional elements to test for placement using last(), or adjust your HTML and use append.

Perhaps something like this:

var count = 0;

$(document).ready(function(){
    $('li#add_field').click(function(){
        count += 1;

        if(count == 1) {
            $('#container').after('<li><input id="field_' + count + '" name="fields[]" type="text" /></li>');
        }
        else {
            $('input[id^=field_]').last().parent('li').after('<li><input id="field_' + count + '" name="fields[]" type="text" /></li>');
        }
    });
});

And as others have mentioned, you have two IDs on <li id="container" id="add_field">. You should try to clean that up by either making one a class, or changing your HTML structure.