Copying and pasting one inputs value into other input with the same name

Question

I am trying to write something that will copy the current <input>s value and enter it into any <input> that start with the same name.

<input> names will follow this pattern: price-0, price-1, price-2, upc-0, upc-1, upc-2.

So if a user enters a value in <input name="price-0"> and hits copy the value should be transferred over to all input whos name start with price

This is the code I've written:

$(document).on('click', '.--copy', function () {
    var input_name = $(this).closest('div').find('input').attr('name').split('-')[0];
    $('input[name^=' + input_name + ']').val($(this).closest('div').find('input').val());
});

A fiddle to make everyones life easier: http://jsfiddle.net/6jGLD/

I feel like there are too many selectors being called upon and the code is somewhat difficult to read.

Answer 1

Why not at least save the intermediate to avoid rerunning that:

$(document).on('click', '.--copy', function () {
    var obj = $(this).closest('div').find('input');
    var input_name = obj.attr('name').split('-')[0];
    $('input[name^=' + input_name + ']').val(obj.val());
});

Answer 2

The whole thing could by simplified by adding to the HTML, for example using data attributes:

<input type="text" name="price-0" data-copy-group="price">

$(document).on('click', '.--copy', function () {
    var input = $(this).closest('div').find('input');
    var copyGroup = input.data('copy-group');
    $('input[data-copy-group=' + copyGroup + ']').val(input.val());
});

---

It maybe also be a good idea to add an attribute that explicitly connects the copy link to its input, so in case the HTML structure changes, you don't need to remember to change the script.

<input type="text" name="price-0" id="price-0" data-copy-group="price">
<a class="--copy" href="#" data-source="#price-0">copy</a>

$(document).on('click', '.--copy', function () {
    var input = $($(this).data("source"));
    var copyGroup = input.data('copy-group');
    $('input[data-copy-group=' + copyGroup + ']').val(input.val());
});

Even if you don't do this, you should at the very least add a class to surrounding div and refer to that when using .closest().

Answer 3

If you are just wanting to take the current input value and copy it to the first other input you find that begins with the same name... (Not sure this is what you are after, but...)

<!-- using onClick(),or use addListener() if you prefer -->

<input type="text" name="myName" value="abd" id=srcInput onClick="copyThis2That(this)"/>
<input type="text" name="myName1" value="" />
<input type="text" name="myName2" value="" />
<input type="text" name="myName3" value="" />

You can move your call to copyThis2That() to a button, or anything else you like, so long as you reference it back to the specific input whose value you want to copy by sending copyThis2That(document.getElementById("srcInput")) as the parameter to the function.

Then...

<script>

    function copyThis2That(e) {

        var x = document.querySelectorAll("input");

        for (var i = 0; i < x.length; i++) {
            if (x[i].name) {
                if (x[i].name !== e.name && (x[i].name + " ".repeat(100)).substr(0,e.name.length) == e.name) {
                    x[i].value = e.value;
                }
            }

        }

    }
</script>

description: for each input on page,

1. IF it HAS a name, and
2. if that name is not exactly equal to the source input's name (ie, begins with it but is longer), and
3. if it BEGINS with the same as the source input's entire name, THEN copy the value to this input.

Again, this copies the source input value to the FIRST other input it finds that begins with the same characters as the source input name.

This snippet assumes that you have no elements on the page whose name is longer than 100 characters.