Put element attribute to input value

input value javascript
javascript add attribute to element
get value of html element
get attribute value javascript
how to set default value in textbox in html
set attribute jquery
html <input value
set attribute python

I have a simple contact form on my website which is created using online builder (so I can't change the html code and add id't to elements). Here is the example of my form:

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>

Because I completely forgot that the DOMSubtreeModified event has been deprecated – and because, as Smollet777 accurately commented, the DOMSubtreeModified approaches didn't work on changing the flag – the following approach is recommended instead of the versions:

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

HTML input value Attribute, The value attribute specifies the value of an <input> element. The value attribute is used differently for different input types: For "button", "reset", and "submit" - it  Stack Overflow Public questions and answers; Teams Private questions and answers for your team; Enterprise Private self-hosted questions and answers for your enterprise; Talent Hire technical talent

You can do it like this

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
Update

As I said in the comments below, you need to listen the changes of the flag menu. I'm not sure if intlTelInput has events for that (It should) but you can handle it with this not quite good code:

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

DOM Element setAttribute() Method, Example. Add the class attribute with the value of "democlass" to a <h1> element: document. Example. Change an input field to an input button: document. The value attribute for <input> element in HTML is used to specify the initial value of the input element. It has different meaning for different input type: The “button”, “reset” and “submit” property specifies the text on the button. The “text”, “password” and “hidden” property specifies the initial value of the input field.

Do it like below:

Value of selected flag changes in async manner so there has to be some function that can listen to the attribute change (here it is title)

check() function listens for title change every 0.5 sec

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

<input>: The Input (Form Input) element, Attributes for the <input> element include global HTML attributes and: The autocomplete attribute takes as its value a space-separated If put on more than one element, the first one with the attribute receives focus  Global attribute valid for all elements, including all the input types, it defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking. The value is used as the value of the <label> 's for attribute to link the label with the form control. See the the label element below.

Element.setAttribute(), Sets the value of an attribute on the specified element. In the following example​, setAttribute() is used to set attributes on a <button> . Definition and Usage. For <button>, <input> and <option> elements, the value attribute specifies the initial value of the element. For <li> elements, the value attribute sets the value of the list item (for ordered lists). The next list items will increment from that value. For <meter> elements, the value attribute specifies the current value of the gauge.

.attr(), Get the value of an attribute for the first element in the set of matched elements or set attributes, consider a DOM element defined by the HTML markup <input  The <input> tag specifies an input field where the user can enter data. The <input> element is the most important form element. The <input> element can be displayed in several ways, depending on the type attribute. The different input types are as follows: <input type="button">. <input type="checkbox">. <input type="color">. <input type="date">.

.prop(), Get the value of a property for the first element in the set of matched elements or set attributes, consider a DOM element defined by the HTML markup <input  Definition and Usage. The value property sets or returns the value of the value attribute of a text field. The value property contains the default value OR the value a user types in (or a value set by a script).

Comments
  • First two snippets are not working when country is changed.
  • Thanks! I honestly thought I'd checked that they worked. I can't believe I let that slip through (in two separate snippets)...
  • @DavidThomas did you check main form on the top of the page? (it has no problem). Issues that I described reveals in forms which are in modal windows which are called clicking on "Besichtigungstermin vereinbaren" and "Preise anfragen" buttons (green buttons on the middle and the end of the page)
  • @DavidThomas Thank you! Here is an example - jsfiddle.net/kerm131/at5sL2jc You can see, that auto-selection works well in all 3 form, but manual selection work only in the first one.
  • I've updated the answer, it should work as required now.
  • Unfortunately, it doesn't work jsfiddle.net/kerm131/w6oa7uhe/30
  • @Anton It actually works but what you need is to listen the changes of that flag menu.
  • I'm sorry, but I did't get it. After I run this code, the "hidden" field is still empty and in the inspect tool it still has value "hidden content" with no changes.
  • @Anton I updated my answer. you can also see it here: jsfiddle.net/w6oa7uhe/31
  • @Anton So then you really need to listen to intl-tel-input events (See this link: github.com/jackocnr/intl-tel-input#events) But just to make it work: jsfiddle.net/w6oa7uhe/32 (I really don't recommend this code though)