CODEWITHSUNDEEP
javascriptjquerycheckbox
user2761030
user2761030

Reputation: 1485

jQuery - renaming checkboxes sets consecutively

I'm trying to build a form to allow multiple elements (unknown number) to be entered and then processed with PHP. The forms need to be grouped into two columns and my approach has been to clone the form at the top of the column on a user click.

This all works fine apart from processing the checkboxes! They need to be grouped into sets of two, and dynamically renumbered upon each new clone. The desired output is this:

On page load:

<input type="checkbox" name="UPDATE_METHOD[0][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[0][]" value="SMS" checked="">

<input type="checkbox" name="UPDATE_METHOD[1][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[1][]" value="SMS" checked="">

Upon one new clone

<input type="checkbox" name="UPDATE_METHOD[0][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[0][]" value="SMS" checked="">

<!-- This will be the new group, cloned from the above group -->
<input type="checkbox" name="UPDATE_METHOD[1][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[1][]" value="SMS" checked="">

<!-- Further clones may appear here -->

<input type="checkbox" name="UPDATE_METHOD[2][]" value="Email" checked="">
<input type="checkbox" name="UPDATE_METHOD[2][]" value="SMS" checked="">

<!-- ...or here -->

I'm trying to work out how to do this with javascript/jQuery. My code so far (with help from @adeneo is:

$(document).ready(function(){
            $(".clone_trigger_button").click(function () {

                // code to group checkboxes below
                $('[name="UPDATE_METHOD[]"]').prop('name', function(i, name) {
                    return name.split('[').shift() + '['+(++i)+'][]';
                });


                $('.clone_replicate_this_div').first().clone().insertBefore(".placer");
                $('input.cl:last').val('');
                event.preventDefault();


            });
        });

This is good, except that it renames every single checkbox before cloning. The change would be to add a grouping, then renumber all groupings on each clone click

This is the last bit I'm struggling on... Any ideas would be much appreciated!

With many thanks...

Upvotes: 0

Views: 167

Answers (2)

Justus Romijn
Justus Romijn

Reputation: 16019

Ive created a fiddle which is a more simple implementation:

HTML:

<div class="group origin">
    <label><input type="checkbox" name="UPDATE_METHOD[0][]" value="Email" checked="">Email</label>
    <label><input type="checkbox" name="UPDATE_METHOD[0][]" value="SMS" checked="">SMS</label>
</div>

<a href="#" class="cloner">Clone!</a>

Javascript:

var original= $(".origin");
var cloneNum = 0;
$(".cloner").on("click", function(e){
    e.preventDefault();

    cloneChecks();
});

function cloneChecks(){
    console.log("cloning..."); 
    cloneNum++;
    var clone = original.clone();
    clone.removeClass("origin");
    clone.find("input").each(function(){
        $(this).attr("name", "UPDATE_METHOD[" + cloneNum + "][]");
    });
    original.after(clone);
}

You can tweak this of course to remove the grouping div, but the principle is very easy.

Live example: http://jsfiddle.net/q3n7s/1/

Upvotes: 0

adeneo
adeneo

Reputation: 318202

var j = 0;

$('[name="UPDATE_METHOD[]"]').prop('name', function(i, name) {
    if (i%2==0) j++;
    return name.split('[').shift() + '['+j+'][]';
});

FIDDLE

Upvotes: 1

Related Questions