将元素属性放入输入值

Question

我在我的网站上有一个简单的联系表单，使用在线构建器创建（因此我无法更改html代码并向元素添加id't）。 以下是我的表单示例：

https://jsfiddle.net/kerm131/w6oa7uhe/30/

  $("[data-type='phone'] .input .form-control").intlTelInput({ allowDropdown: true, autoPlaceholder: "aggressive", initialCountry: "auto", geoIpLookup: function(success, failure) { $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) { var countryCode = (resp && resp.country) ? resp.country : ""; success(countryCode); }); }, }); let country = document.querySelector('selected-flag[title]'); $("[data-type='hidden'] .input .form-control").val($(country)); 

 .field { padding: 10px 0; } .form-control { padding: 10px; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/css/intlTelInput.css"> <div class="fields"> <div class="field" data-type="name" style="width: 247px;"> <div class="input"><input class="form-control text" type="text" data-placeholder="true" value="Wie sollen wir Sie ansprechen?" style="border-radius: 15px;"></div> </div> <div class="field" data-type="phone" style="width: 247px;"> <div class="input"><input class="form-control text" type="text" data-placeholder="true" style="border-radius: 15px;"></div> </div> <div class="field" data-type="email" style="width: 247px;"> <div class="input"><input class="form-control text" type="text" data-placeholder="true" value="E-Mail Adresse *" style="border-radius: 15px;"></div> </div> <div class="field" data-type="hidden" style="width: 247px;"> <div class="input"><input class="form-control" type="text" style="border-radius: 15px;" value="hidden content"></div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/intlTelInput-jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/utils.js"></script> 

在电话号码字段中有int-tel-input jQuery插件，它使用用户ip设置国家拨号代码。 我想将这些信息复制到hiddden字段。 或者更准确地说，使用类.selected-flag从元素的属性“title”中获取数据并填写此信息“hidden”字段。

不幸的是，我在JS和jQuery方面的技能很差，所以我无法弄清楚如何让它工作。 您可以在JS代码字段中看到我的尝试。

请给我一个提示或解决方案来解决我的问题。

Answer 1

因为我完全忘记了DOMSubtreeModified事件已被弃用 - 并且因为，正如Smollet777准确评论的那样， DOMSubtreeModified方法无法更改标志 - 建议使用以下方法而不是版本：

// caching the elements ('target' and 'recipient') for later use:
let target = document.querySelector('.selected-flag'),
    recipient = document.querySelector('[data-type=hidden] input.form-control'),

// setting the options for the MutationObserver, these are the
// mutation-types we're looking for:
    options = {
      'attributes' : true
    },

// the MutationObserver callback function:
    observationHandler = function(mutations, observer){

      // for each mutation of the list of mutations:
      for (let mutation of mutations) {

        // we update the value property of the recipient Node,
        // setting that value to the 'title' property-value
        // from the 'target' Node:
        recipient.value = target.title;
      }
    },

 // initialising a new MutationObserver, passing in the
 // callback function:
    observer = new MutationObserver(observationHandler);

 // using the observer.observe() method to observe the
 // 'target' Node using the options defined earlier:
    observer.observe(target, options);

 $("[data-type='phone'] .input .form-control").intlTelInput({ allowDropdown: true, autoPlaceholder: "aggressive", initialCountry: "auto", geoIpLookup: function(success, failure) { $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) { var countryCode = (resp && resp.country) ? resp.country : ""; success(countryCode); }); }, }); let target = document.querySelector('.selected-flag'), recipient = document.querySelector('[data-type=hidden] input.form-control'), options = { 'attributes': true }, observationHandler = function(mutations, observer) { for (let mutation of mutations) { recipient.value = target.title; } }, observer = new MutationObserver(observationHandler); observer.observe(target, options); 

 .field { padding: 10px 0; } .form-control { padding: 10px; } 

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/css/intlTelInput.css"> <div class="fields"> <div class="field" data-type="name" style="width: 247px;"> <div class="input"><input class="form-control text" type="text" data-placeholder="true" value="Wie sollen wir Sie ansprechen?" style="border-radius: 15px;"></div> </div> <div class="field" data-type="phone" style="width: 247px;"> <div class="input"><input class="form-control text" type="text" data-placeholder="true" style="border-radius: 15px;"></div> </div> <div class="field" data-type="email" style="width: 247px;"> <div class="input"><input class="form-control text" type="text" data-placeholder="true" value="E-Mail Adresse *" style="border-radius: 15px;"></div> </div> <div class="field" data-type="hidden" style="width: 247px;"> <div class="input"><input class="form-control" type="text" style="border-radius: 15px;" value="hidden content"></div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/intlTelInput-jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/utils.js"></script> 

JS小提琴演示 。

关于评论中提出的问题，该解决方案仅适用于页面上的多个类似表单中的第一个，以下内容经过修改，可以使用多种类似形式：

// cache all relevant elements, using document.querySelectorAll():
let targets = document.querySelectorAll('.selected-flag'),
  options = {
    'attributes': true
  },
  observationHandler = function(mutations, observer) {
    for (let mutation of mutations) {

      // here we cache the current target (the element to which
      // the observationHandler is bound):
      let target = mutation.target,

      // we find the 'recipient' node, the element you wish
      // to update; here we navigate from the 'target' to the
      // closest ancestor element matching the supplied CSS
      // selector, and from there we look for the first (if any)
      // nodes matching the CSS selector passed to
      // document.querySelector():
            recipient = target.closest('div.fields').querySelector('[data-type="hidden"] input');

      // here we update the value of the 'recipient' node:
          recipient.value = target.title;
    }
  },
  observer = new MutationObserver(observationHandler);

  // iterating over the NodeList of elements:
  targets.forEach(

    // here we bind the mutation observer to each
    // of the matching elements from the NodeList:
    (target) => observer.observe(target, options)
  );

JS小提琴演示 。

不幸的是，由于Stack Overflow答案的字符限制 - 以及提供的演示的长度 - 我无法在这里发布工作片段，但链接的JS Fiddle演示确实包含完整的工作代码。

参考文献：

• JavaScript的：
  • Document.querySelector() 。
  • DOMSubtreeModified事件 。
  • EventTarget.addEventListener() 。
  • HTMLInputElement 。
  • MutationObserver 。
  • NodeList.prototype.forEach 。
• jQuery的：
  • on() 。

Answer 2

你可以这样做

var title = $('.selected-flag').attr('title'); // get title of the element with class `selected-flag`
$("[data-type='hidden'] .input .form-control").val(title); // set value of the input

更新

正如我在下面的评论中所说，你需要听标志菜单的更改。 我不确定intlTelInput是否有事件（它应该），但你可以使用这个不太好的代码处理它：

$(document).ready(function() {
  $('#country-listbox > li').click(function() {
    setTimeout(function() {
      var title = $('.selected-flag').attr('title');
      $("[data-type='hidden'] .input .form-control").val(title);
    });
  });
});

Answer 3

如下所示：

所选标志的值以异步方式更改，因此必须有一些可以侦听属性更改的函数（此处为标题）

check()函数每0.5秒监听一次标题更改

  $("[data-type='phone'] .input .form-control").intlTelInput({ allowDropdown: true, autoPlaceholder: "aggressive", initialCountry: "auto", geoIpLookup: function(success, failure) { $.get("https://ipinfo.io", function() {}, "jsonp").always(function(resp) { var countryCode = (resp && resp.country) ? resp.country : ""; success(countryCode); }); }, }); function check() { //this function is important if (!$('.selected-flag').attr('title')) { return setTimeout(check, 500); } let country = $('.selected-flag').attr('title'); $("[data-type='hidden'] .input .form-control").val(country); } check(); 

 .field { padding: 10px 0; } .form-control { padding: 10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/css/intlTelInput.css"> <div class="fields"> <div class="field" data-type="name" style="width: 247px;"> <div class="input"><input class="form-control text" type="text" data-placeholder="true" value="Wie sollen wir Sie ansprechen?" style="border-radius: 15px;"></div> </div> <div class="field" data-type="phone" style="width: 247px;"> <div class="input"><input class="form-control text" type="text" data-placeholder="true" style="border-radius: 15px;"></div> </div> <div class="field" data-type="email" style="width: 247px;"> <div class="input"><input class="form-control text" type="text" data-placeholder="true" value="E-Mail Adresse *" style="border-radius: 15px;"></div> </div> <div class="field" data-type="hidden" style="width: 247px;"> <div class="input"><input class="form-control" type="text" style="border-radius: 15px;" value="hidden content"></div> </div> </div> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/intlTelInput-jquery.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/14.0.6/js/utils.js"></script>