Apply a function to a cloned field (Jquery)

Question

I have a form that contains 1 select option and 5 text fields.

My first function is when I select a specific option, those 5 text fields will auto-populate data from the database. This function is specific to the ID of the selected option.

And I have another function that when I click the "Add another" button, it will clone the form and will generate a new ID for each text fields.

The problem is, when I click the add another and the second form is there, the 5 text fields doesn't auto-populate because the auto-populate function is specific only to the original ID.

How do I solve this? How do I apply the auto-populate function to the newly generated form? Please help.

Given the form:

<form method='post' name="form1">
    <select id='select'>
        <option value='1'>1</option>
        <option value='2'>2</option>
    </select>

    First Name: <input type='text' id='fname'>
    Last Name: <input type='text' id='lname'>
    Contact Number: <input type='text' id='cnumber'>
    Address: <input type='text' id='address'>
    E-mail Address: <input type='text' id='email'>

    <button type='button' id='addanother'>Add Another</button>
</form>

Thank you!

why don't you use a class instead of ID ?? I think that would be more helpful . — Tushar Raj, Jul 20 '15 at 07:22
you need to use class instead of id, because id will conflict with each other — Bhavin Solanki, Jul 20 '15 at 07:23
As Tushar ad Bhavin, have suggested you might have to go wit classes instead of id. I want to know first when you change the second select box the same function should execute as executed for first select box? — Ajay Narain Mathur, Jul 20 '15 at 07:27

grasesed · Answer 1 · 2015-07-20T07:33:44.117

It would be good to see a working or non-working example so I could provide a less rough code sample, but rather than changing the ID's of the inputs, instead just use the parent as the selector i.e:

$('select').on('change', function (e) {
     $(this).parent().find('#fname').val("Set Value");
     ....
});

Although as the others have suggested you should be using class names as selectors rather than IDs (which are meant to be unique)

Apply a function to a cloned field (Jquery)

1 Answers1