How to get data attribute from dynamic button if it changes

user_11718670 0
Viewed 500

I would like to obtain the value of an attribute (here the title) of a dynamic button (created by the multiselect library) and display it in a text box, if there is a change.

Here's what I have now: 

// for combine checkbox value

$(function() {
  $('input').on('click', function() {
    var values = [];
    $('input[name=test]:checked').each(function() {
      values.push($(this).parent().text());
    });
    $('[name="result"]').attr({
      value: values.join('|')
    });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form oninput="txtrequete.value = ( 
      txtdomain.value +  ';' +  result.value).replace(/\s+/g, '');" class="form-horizontal form-label-left">
  FINAL
  <div>
    <input type="text" name="txtrequete" disabled="disabled" size='70'>
  </div>
  TEXT TEST FOR CONCAT
  <div>
    <input type="text" name="txtdomain" id="domainId" value="testvalue" />
  </div>
  CHECKBOX TEST FOR CONCAT
  <div>
    <label><input type="checkbox" name="test" /> test3</label><br />
    <label><input type="checkbox" name="test" /> test4</label><br />
    <input type="text" name="result" disabled="disabled" />
  </div>

  <div>
    BUTTON CREATED FROM MULTISELECT JQUERY LIBRARY
  </div>
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="India, United State, Canada, Taiwan" aria-expanded="true">
        <span class="multiselect-selected-text">4 selected</span> <b class="caret"></b></button>
  <div>
    <input type="text" name="spantitle" disabled="disabled" value="i would like the title value 'India, United State, Canada, Taiwan' HERE from the button attribute if change" size="70" />
  </div>
</form>

has anyone ever used this before? Thank you in advance 

<button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown"
    title="India, United State, Canada, Taiwan" aria-expanded="true">

    <span class="multiselect-selected-text">4 selected</span>
    <b class="caret"></b></button>div>
<input type="text" name="spantitle" disabled="disabled"
    value="i would like the title value 'India, United State, Canada, Taiwan' HERE from the button attribute if change"
    size="70" />
</div>
jquery javascript
1 Answers

If you have an event listener, just simply use the title attribute of your button and set it as value of your input field, like:

$('input[name=spantitle]').val($('.multiselect ').attr('title'));

If you are not sure when or how the dynamic changes happen, you could use MutationObserver.

The MutationObserver interface provides the ability to watch for changes being made to the DOM tree. It is designed as a replacement for the older Mutation Events feature which was part of the DOM3 Events specification.

Here is an example how it could work:

// for combine checkbox value

$(function() {
  $('input').on('click', function() {
    var values = [];
    $('input[name=test]:checked').each(function() {
      values.push($(this).parent().text());
    });
    $('[name="result"]').attr({
      value: values.join('|')
    });
  });
});


$('#test').on('click', () => {
  $('.multiselect ').attr('title', 'Just another attribute');
});

var observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === "attributes") {
      $('input[name=spantitle]').val($('.multiselect ').attr('title'));
    }
  });
});

observer.observe($('.multiselect')[0], {
  attributes: true // Listening to the attribute changes
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form oninput="txtrequete.value = ( 
      txtdomain.value +  ';' +  result.value).replace(/\s+/g, '');" class="form-horizontal form-label-left">
  FINAL
  <div>
    <input type="text" name="txtrequete" disabled="disabled" size='70'>
  </div>
  TEXT TEST FOR CONCAT
  <div>
    <input type="text" name="txtdomain" id="domainId" value="testvalue" />
  </div>
  CHECKBOX TEST FOR CONCAT
  <div>
    <label><input type="checkbox" name="test" /> test3</label><br />
    <label><input type="checkbox" name="test" /> test4</label><br />
    <input type="text" name="result" disabled="disabled" />
  </div>

  <div>
    BUTTON CREATED FROM MULTISELECT JQUERY LIBRARY
  </div>
  <button type="button" class="multiselect dropdown-toggle btn btn-default" data-toggle="dropdown" title="India, United State, Canada, Taiwan" aria-expanded="true">
        <span class="multiselect-selected-text">4 selected</span> <b class="caret"></b></button>
  <div>
    <input type="text" name="spantitle" disabled="disabled" value="i would like the title value 'India, United State, Canada, Taiwan' HERE from the button attribute if change" size="70" />
  </div>
</form>

<button id="test">Test me!</button>

Click on the button "Test me!" to change the title attribute and you may see that the object observer will change the value of your input field.

user_46416800
Related