CODEWITHSUNDEEP
javascriptjquery
qadenza
qadenza

Reputation: 9293

loop data attributes and set corresponding input value

$(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

Upvotes: 2

Views: 62

Answers (4)

WebDev
WebDev

Reputation: 602

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'>

Upvotes: 1

Mario
Mario

Reputation: 4998

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

Upvotes: 1

Cagri Tacyildiz
Cagri Tacyildiz

Reputation: 17610

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'>

Upvotes: 1

Paul
Paul

Reputation: 2076

$(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'>

Upvotes: 2

Related Questions