jQuery - Copying form to identical form

Question

I want to copy an existing form to another form. I found this question which works on normal inputs but it throws an error on my checkboxes

The jQuery function (from) I am using is

(function($) {
    $.fn.copyNamedTo = function(other) {
        return this.each(function() {
            $(':input[name]', this).each(function() {
                $('[name=' + $(this).attr('name') +']', other).val($(this).val())
            })
        })
    }
}(jQuery));

The error is:

Uncaught Error: Syntax error, unrecognized expression: [name=cartype[]]

The checkboxes are arranged like so:

<input type="checkbox" name="cartype[]" id="cartype_10" value="10">4x4
<input type="checkbox" name="cartype[]" id="cartype_11" value="11">Saloon

I expect this is due to the [] in the name but can't figure out what to do about it.

Matt · Accepted Answer · 2012-09-05T19:23:27.433

1

You'll have to replace the [ and ] in your name with \\[ and \\] (as laid out here), as (as you know) they've got special meanings in jQuery selectors.

$('[name=' + $(this).attr('name').replace(/([\[\]])/g, '\\\\$1') +']', other).val($(this).val())

Note that technically you should also have a selector of the form $('[name="val"]') (note the quotes around the attribute value). jQuery has always seemed to be lenient about this, but it's conforming to the docs.

To nail the checkboxes and radio buttons, you need to be setting the checked property of them, rather than altering the value. You can change your function to this;

$.fn.copyNamedTo = function(other) {
    return this.each(function() {
        $(':input[name]', this).each(function() {
            var target = $('[name=' + $(this).attr('name').replace(/([\[\]])/g, '\\\\$1') +']', other);

            // Radios have the same name as each other, so filter based on value
            // Checkboxes are in the same boat here due to the naming conventions shown in the OP.
            if ($(this).is(':checkbox, :radio')) {
                target.filter('[value="' + this.value + '"]').prop('checked', this.checked);
            } else {
                target.val($(this).val());
            }
        })
    })
}

edited Sep 05 '12 at 19:23

answered Sep 05 '12 at 19:06

Matt

74,352
26
153
180

This worked, in that it didnt error. But none of the checkboxes actually copied the data across. Thinking about it all my form elements have unique IDs so maybe there is a simpler way? – Chris Sep 05 '12 at 19:09
@Chris: Try with the quotes (second part of my answer). Obviously you'll need some prefix/ suffix for the second form to keep the ID's unique, but you could change the selector to `$('#prefix' + this.id).val($(this).val())`. – Matt Sep 05 '12 at 19:10
Hey Matt.. You updated it just as I posted my comment, I edited it to reflect your edit. Cheers mate – Chris Sep 05 '12 at 19:11
The second form is loaded via ajax, so I have a parent by which to identify them by. Which works fine. – Chris Sep 05 '12 at 19:13
Hey Matt, this worked perfectly... BUT for one set of checkboxes it didnt work (but another set it did work?!) There was no errors. P.s. as per your suggestion you do need " around the value i.e. `$('[name="val"]')` – Chris Sep 05 '12 at 19:17
@Chris: Can you provide the markup for the checkboxes that failed? – Matt Sep 05 '12 at 19:19
Its the cartype ones that I put in my original question. I realise that it works for every element EXCEPT checkboxes that are linked (as the car type ones are). Im wondering if for them I should just use the unique ID? P.s. thanks again for your help :D - FYI I put a special case in for "cartype" and made it use the ID and it all works – Chris Sep 05 '12 at 19:21
@Chris: Ahhh I see. The updated code in my answer should work. – Matt Sep 05 '12 at 19:24

score 0 · Answer 2 · answered Sep 05 '12 at 19:04

0

Try using data attribute.

data-name="cartype[]"

And grab it using: $(this).data('name')

answered Sep 05 '12 at 19:04

Roko C. Buljan

196,159
39
305
313

jQuery - Copying form to identical form

2 Answers2