Changing multiple same name input from different parent

Question

Just several questions here

In case if i have a form, with structure like below

<form>
<div id='dynamicFormBox'>
    <div id='parent_1'>
        <div id='level_2'>
            <div id='level_3'>
                    <input id='name' name='name' value=''/>
                    <input id='id' name='id' value=''/>
                    <input id='passNo' name='passNo' value=''/>
                    <input type="button" id="removeDiv"/>
            </div>
        </div>
    </div>
    <div id='parent_2'>
        <div id='level_2'>
            <div id='level_3'>
                    <input id='name' name='name' value=''/>
                    <input id='id' name='id' value=''/>
                    <input id='passNo' name='passNo' value=''/>
                    <input type="button" id="removeDiv"/>
            </div>
        </div>
    </div>
    <div id='parent_3'>
        <div id='level_2'>
            <div id='level_3'>
                    <input id='name' name='name' value=''/>
                    <input id='id' name='id' value=''/>
                    <input id='passNo' name='passNo' value=''/>
                    <input type="button" id="removeDiv"/>  
            </div>
        </div>
    </div>
</div>
</form>

So my questions here are

How do i get to, say the input 'name' from either one of the parent? And in case if i input on the 'name', i can tell that the 'name' comes from that parent id and not other parent?
How do i want to change, say input 'id' from all 3 parents, but with different value for each input 'id'?
How do i make it so that if i change any of the input 'id', it will simultaneously changed the parent id too?
If say i can add the parent div using append, how do i make it so that the id of the parent is changed according to the number of children inside the dynamicFormBox? Like right now, i have parent_1, parent_2 and parent_3, so if i append the next parent, the id will be automatically set to parent_4?
How do i make it so that, only the 'parent' part of the parent id is following the value of the input 'id'? Like for parent_1, if i changed the value of input 'id' into 'john', then the parent id will change to 'john_1'?
How do i make it so that, only the 'number' part of the parent id is following the value of the input 'passNo', and at the same time changing its number format? Like for example, for parent_2, if i changed the value of input 'passNo' into 2, then it will change the parent id into parent_02?
For the delete button with id 'removeDiv', say if all button goes to the same removeDiv() function if i click it.. and i clicked the button inside parent_2, how can i make sure that it will delete only the parent_2 block, and not the others?

I know my some of my questions have already been answered in here, but i want to know for the case where all the inputs shared the same name and same id, i want to know how to differentiate which input in respect to their belonging parent.

Remove ids from your inputs. There can be only one id in whole document with one value. So lets start with this:) — Beri
– Beri, Commented Oct 23, 2014 at 6:26
Okay so if we remove the id for each input, and relies only on the name of the input, how do we differentiate it then? With only the parent to differentiate each input from the other inputs? — Fred A
– Fred A, Commented Oct 23, 2014 at 6:27
Sure :).. yeah i asked alot coz i collected it for the past few days, and didn't want to open a question for one problem only. — Fred A
– Fred A, Commented Oct 23, 2014 at 6:29

Beri · Accepted Answer · 2014-10-23 06:46:42Z

1

How do i get to, say the input 'name' from either one of the parent? And in case if i input on the 'name', i can tell that the 'name' comes from that parent id and not other parent?

This will return value from input in parent_3

var value = $('#parent_3 input[name=name]').val();

How do i want to change, say input 'id' from all 3 parents, but with different value for each input 'id'?

Just use a loop:) it's up to you, you just need to implement a correct select quesry for that:

Lets say that we will define a new function for that:) It will get parentId and JSON with new field values. Thanks to that you can set whole form with one function call, you just need to create a json obj.

var newValues = { name: 'new name value', 'passNo': 'new_Value' }
function setVal(parentId, newValues){
if(newValues.name)
$('#'+parentId+' input[name=name]').val(newValues.name);
if(newValues.passNo)
$('#'+parentId+' input[name=passNo]').val(newValues.passNo);
}

If you want to change input for all 3 parents, lets say for name input, use:

$(input[name=passNo]').val(newValue)

3.How do i make it so that if i change any of the input 'id', it will simultaneously changed the parent id too?

If you nwant an event to trigger on value change use change method, like so:

$('#'+parentId+' input[name=passNo]').change(function(){
console.log('new value ' + $(this).val());
});

But I would NOT recomment to change ids of DOM. It's a bad practise.

5.How do i make it so that, only the 'parent' part of the parent id is following the value of the input 'id'? Like for parent_1, if i changed the value of input 'id' into 'john', then the parent id will change to 'john_1'?

   $('#parent_1 input[name=name]').change(function(){
     var parentNode = $(this).closest('.parent-block');
     var newId = newId($(this).val(), parentNode); // this will return a new id.(you have to write it ofc:)) Because it is the subject of next point.
     parentNode.attr('id',newId );
     // you will need to add class 'parent-block' to your parents. Because your id will change you need to find a way to find your parent.
    });

When you are in a onclick function $(this) will be a jQuery obj for clicked object, in your case button. So use jQuery functions to get to the parent. There are 2 known to me ways, either parent() <-go to this el parent, or closest() <-goes to fist node (ancestor) with given qualifier, like a css class.

$('button').on('click', function()){ $(this).parent().parent().parent().remove(); $(this).closest('.parent-block').remove(); // you will need to add a class to parent blocks:)

};

answered Oct 23, 2014 at 6:46

Beri

11.6k4 gold badges38 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Beri Over a year ago

I hope I dod not make any mistakes in the code, your questions should be a bit shorter:)

Fred A Over a year ago

Thanks! Going to test all of these and reply back asap

Beri Over a year ago

I personally think that it would be better for you to understand them better, not only copy and run, so when you don;t understand a part of code, just ask, I will try to help explaining.

Fred A Over a year ago

Havent test all of the above, only some, but with lil tweak and twist, it works like charm! Thanks :D

Collectives™ on Stack Overflow

Changing multiple same name input from different parent

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related