loop data attributes and set corresponding input value

Question

$(document).on('click', '.atitle', function(){
  //for each data attr - corresponding input value = data.value
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>

result:
input_x has value lorem
input_y has value ipsum
input_z has value dolor

what is the relationship between data attributes and input id values? — WebDev
– WebDev, Commented Jun 13, 2020 at 22:51
@TomaszBucko in reality there is 14 data attributes, so I need a loop — qadenza
– qadenza, Commented Jun 13, 2020 at 22:57

Paul · Accepted Answer · 2020-06-13 23:03:21Z

2

$(document).on('click', '.atitle', function() {
  // get data of all data attributes 
  // (it's an object like this { x: "lorem", y: "ipsum", ...)}
  let data = $(this).data();
  // Set data to input values.
  Object.entries(data).forEach(([key, value]) => {
    let elem = $(`#input_${key}`);
    // Check if elem exists before trying to assign a value. 
    // Just in case if .atitle contains some data attributes, 
    // which have no mapping to an input element.
    elem && elem.val(value);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>

edited Jun 13, 2020 at 23:03

answered Jun 13, 2020 at 22:51

Paul

2,0761 gold badge10 silver badges16 bronze badges

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

3 Comments

qadenza Over a year ago

elem && elem.val(value); - can you explain, pls. btw I didn't downvote

Paul Over a year ago

@qadenza The second part of the expression is only executed if elem is set. It's a short way for if (elem) elem.val(value) Check also the comment.

Paul Over a year ago

@qadenza Instead of elem && elem.val(value); you could actually also use elem?.val(value); But you need to be carefully, since some mobile browsers do not support it yet: developer.mozilla.org/de/docs/Web/JavaScript/Reference/…

Cagri Tacyildiz · Accepted Answer · 2020-06-13 23:11:55Z

1

you can read this

$(document).on('click', '.atitle', function(){
  var title= $(".atitle");
  let arr=title.data();
  console.log(arr)
  $('input').each(function( index ){   
      $( this ).val(arr[this.id.split("_")[1]])
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>

edited Jun 13, 2020 at 23:11

answered Jun 13, 2020 at 22:54

Cagri Tacyildiz

17.7k6 gold badges38 silver badges61 bronze badges

1 Comment

Paul Over a year ago

This won't work, if there are additional or maybe missing inputs or if the order of the input differs.

Mario · Accepted Answer · 2020-06-13 23:14:11Z

1

please take a look at this example

const trigger = document.querySelector(".atitle");

trigger.addEventListener("click", clickHandler);

function clickHandler(event) {
  const { x, y, z } = Object.assign({}, event.target.dataset);

  document.querySelector("#input_x").value = x;
  document.querySelector("#input_y").value = y;
  document.querySelector("#input_z").value = z;
}

<div class="atitle" data-x="lorem" data-y="ipsum" data-z="dolor">title</div>
<br />
<input type="text" id="input_x" />
<input type="text" id="input_y" />
<input type="text" id="input_z" />

See

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

answered Jun 13, 2020 at 23:14

Mario

5,0044 gold badges42 silver badges65 bronze badges

2 Comments

Paul Over a year ago

Why do you want to use const { x, y, z } = Object.assign({}, event.target.dataset);. You could just use const { x, y, z } = event.target.dataset;

Mario Over a year ago

Nice trick, The answer is because it makes explicit my intention. btw here another way const {x, y, z} = {... event.target.dataset};

WebDev · Accepted Answer · 2020-06-13 23:20:00Z

Please check following code. It's fully independent from keywords of attributes.

$(document).on('click', '.atitle', function(){
  var title= $(".atitle");
  $.each($(title)[0].attributes, function(key, value) {
    var attr_name = value.name
    if (attr_name.indexOf('data-') > -1) {
        var attr_val = value.value
        var attr_idx = attr_name.split('data-')[1]
        $('#input_' + attr_idx).val(attr_val)
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='atitle' data-x='lorem' data-y='ipsum' data-z='dolor' data-xx='xlorem' data-yy='yipsum' data-zz='zdolor'>title</div>
<br>
<input type='text' id='input_x'>
<input type='text' id='input_y'>
<input type='text' id='input_z'>
<input type='text' id='input_xx'>
<input type='text' id='input_yy'>
<input type='text' id='input_zz'>

Collectives™ on Stack Overflow

loop data attributes and set corresponding input value

4 Answers 4

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related