cloning input text in a form

Question

I have the following form:

<form method="post">
<table>
    <tr>
        <td>Foo</td><td><input type="text" name="field1" /></td>
    </tr>
    <tr>
        <td>Bar</td><td><input type="text" name="field2" /></td>
    </tr>
    <tr>
        <td>Foo</td><td><input type="text" name="field3" /></td>
    </tr>
    <tr>
        <td>Test</td><td><input type="text" name="field4" /></td>
    </tr>
    <tr>
        <td>Foo</td><td><input type="text" name="field5" /></td>
    </tr>
</table>

I'd like to insert text in field1 and automatically cloning it in all fields that are in foo rows. For example, if I insert "abcd" in field1, also field3 and field5 could be filled automatically with the same "abcd". Is it possible?

Yes, check this answer: https://stackoverflow.com/questions/6458840/on-input-change-event — uraimo, Mar 09 '15 at 14:21

score 0 · Answer 1 · answered Mar 09 '15 at 14:24

0

Using jquery it can be done this way:

$("input[name='field1']").on("input change", function() {
    $("input[name='field3'],input[name='field5']").val($(this).val());
});

answered Mar 09 '15 at 14:24

Petr Prazak

42
7

You can even make it shorter and use just "[name=field3],[name=field5]" instead of "input[name='field3'],input[name='field5']" – Petr Prazak Mar 09 '15 at 14:48

score 0 · Answer 2 · answered Mar 09 '15 at 14:27

0

$("input[name='field1']").keyup(function(e){
if(e.keyCode == 13)
{
    $( "input[name^='field']" ).val($(this).val());
}
});

answered Mar 09 '15 at 14:27

Sebri Zouhaier

745
7
18

1

Please add at least a few lines of prose explaining how this works and why it solves the problem. (And in this case you should also indicate that you're assuming jQuery.) – zwol Mar 09 '15 at 15:40

cloning input text in a form

2 Answers2