CODEWITHSUNDEEP
jquery
la_f0ka
la_f0ka

Reputation: 1773

what should I use instead of .clone() if I want the cloned elements to have different names?

I'm working on a form in which the user will be able to add as many elements as he needs, the problem is, when I do it with clone, all the elements created have the same name and thus cannot be intelligently retrieved for further processing in PHP. How could I find a way around this?

This is my html:

<form id="form" action="/create/table" method="post">
<table class="admtable, reportable">
        <caption>Admins</caption>
        <thead>
            <tr>
                <th>Name</th>
                <th>Username</th>
                <th>Email</th>
                <td><button class="add">Add</button></td>
            </tr>
        </thead>
        <tbody>
            <tr class="prototype">
                <td><input type="text" name="name[]" value="" /></td>
                <td><input type="text" name="username[]" value="" /></td>
                <td><input type="text" name="email[]" value="" /></td>
                <td><button class="remove">Delete</button></td>
            </tr>
    </table>


    <table class="usrtable, reportable">
        <caption>Users</caption>
        <thead>
            <tr>
                <th>URL</th>
                <th>Keyword</th>
                <th>Link</th>
                <td><button class="add">Add</button></td>
            </tr>
        </thead>
        <tbody>
            <tr class="prototype">
                <td><input type="text" name="name[]" value="" /></td>
                <td><input type="text" name="username[]" value="" /></td>
                <td><input type="text" name="email[]" value="" /></td>
                <td><button class="remove">Delete</button></td>
            </tr>
    </table> </form>

And this is the jQuery code so far:

$(document).ready(function() {

var className = $(this).closest('table').attr("add"); //??
// Add button functionality
$("button.add").click(function() {

    var master = $(this).closest("table");

    // Get a new row based on the prototype row
    var prot = master.find(".prototype").clone(true);
    prot.attr("class", "");

    master.find("tbody").append(prot);
});

// Remove button functionality
$("button.remove").live("click", function() {
    $(this).closest("tr").remove();
});
});

Upvotes: 0

Views: 189

Answers (2)

Eevee
Eevee

Reputation: 48536

Why don't you use a different set of names for each table? For example, user_names[] vs admin_names[]. Then server-side will have a list of user names, list of admin names, etc., rather than a list of the first user name + the first admin name.

Also, note that you don't need commas to separate multiple class names. I'm surprised that isn't breaking your CSS.

Upvotes: 0

tXK
tXK

Reputation: 712

Why not change the ids & names of the resulting objects by yourself, using .attr() setter?
This way you have a very good control of what's going on, no funky names or unknown ids.

Edit: or maybe you would like to try http://api.jquery.com/category/plugins/templates/

Upvotes: 1

Related Questions