Jquery add data-rel attribute to all input fields and remove name attribute

Question

I need to somehow have data-rel value to input field and remove name from same input field on specific class.

The code i had done so far is working to remove name from that specific field. but i can't add data-rel to that same field.

Here is the code.

$('.vf-sortable-holder').each(function() {
    var empty_sortable = $(this).closest('.option').find('.empty-sortable').find('input');
    var sortable_name = empty_sortable.attr('name');

    input.attr('data-rel', sortable_name);

    empty_sortable.removeAttr('name');

});

So html look like this

<div class="option">
    <div class="vf-sortable-holder">
        <div class="empty-sortable hidden">
        <input type="text" name="example">
        </div>
    </div>
</div>

<div class="option">
    <div class="vf-sortable-holder">
        <div class="empty-sortable hidden">
        <input type="text" name="example">
        </div>
    </div>
</div>

So my js code works to remove name attribute but i actually need to change name with data-rel either to remove name from html with js code and add data-rel or somehow to rename name to data-rel in the end i need it to look like this:

<div class="option">
    <div class="vf-sortable-holder">
        <div class="empty-sortable hidden">
        <input type="text" data-rel="example">
        </div>
    </div>
</div>

<div class="option">
    <div class="vf-sortable-holder">
        <div class="empty-sortable hidden">
        <input type="text" data-rel="example">
        </div>
    </div>
</div>

yes, thanks for noticing, in the code there is empty-sortable, i just forgot to write it here in example,i edited page to add empty-sortable element. — lonerunner
– lonerunner, Commented Dec 12, 2013 at 15:31

Kenny Thompson · Accepted Answer · 2013-12-12 15:29:53Z

3

Is this what you are looking for?

$('.vf-sortable-holder').each(function() {
    var empty_sortable = $(this).find('input');
    var sortable_name = empty_sortable.attr('name');

    empty_sortable.attr('data-rel', sortable_name).removeAttr('name');;
});

Also remove the '.' from your vf-sortable class name in the HTML.

answered Dec 12, 2013 at 15:29

Kenny Thompson

1,49212 silver badges28 bronze badges

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

2 Comments

Mark Over a year ago

was going to give the same answer, no need to go up & then down, when you have $(this)

lonerunner Over a year ago

Yes this did the trick, i just only had to change empty_sortable like you posted in your example and it worked, although i don't understand how this makes difference from what i have in my code, but this one works, thanks alot.

adeneo · Accepted Answer · 2013-12-12 15:31:53Z

1

Selecting .vf-sortable-holder, then the parent .option, then the .empty-sortable and finally the input, all inside loops, seems like jumping through a lot of hoops ?

$('.option .vf-sortable-holder .empty-sortable input').attr('data-rel', function() {
    return this.name;
}).prop('name','');

answered Dec 12, 2013 at 15:31

adeneo

319k29 gold badges410 silver badges392 bronze badges

Comments

Arun P Johny · Accepted Answer · 2013-12-12 15:30:02Z

0

Remove the . in the class name(.vf-sortable-holder)

<div class="option">
    <div class="vf-sortable-holder">
        <input type="text" name="example" />
    </div>
</div>
<div class="option">
    <div class="vf-sortable-holder">
        <input type="text" name="example2" />
    </div>
</div>

then

jQuery(function () {
    $('.vf-sortable-holder input').attr('data-rel', function () {
        var name = this.name;
        $(this).removeAttr('name');
        return name;
    })
})

Demo: Fiddle

answered Dec 12, 2013 at 15:30

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Collectives™ on Stack Overflow

Jquery add data-rel attribute to all input fields and remove name attribute

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related