无法设置输入字段的值onclick

Question

I have created this custom dropdown which has custom radio buttons. I get the value of the selected radio button and set it to span tag successfully.

What i am not getting is : i want to set the same value in the input field that is present in the dropdown, but the value is not getting set.

i use pure js as well as jquery to do so but the value is alerting and not setting into the input field.

code is live here: http://thekabir.in/onsitego-planlisting2017/index.html

Steps: click on check brands dropdown and select any brand..

jquery and js used are

//filters dropdown   
function DropDown(el) {
  this.dd = el;
  this.placeholder = this.dd.children('span');
  this.opts = this.dd.find('div.dropdown li');
  this.val = '';
  this.index = -1;
  this.initEvents();
  }
  DropDown.prototype = {
  initEvents : function() {
      var obj = this;
      obj.dd.on('click',function(){
        $(this).toggleClass("active");
        $(this).parent().toggleClass("border-active");
        $('.filters').toggleClass('border-bottom');
        $(this).children('.dropdown').css('width',$(window).width());
        var deID = $(this);

        if(deID[0].id == 'devicebrand')
        {
          $('#devicebrand i.icon-down-arrow-1').addClass('icon-up-arrow-1').removeClass('icon-down-arrow-1');
        }
        return false;
      });
      obj.opts.on('click',function(e){
          // e.preventDefault();
          $(this).parent().addClass('hidden');
          $(this).addClass('active');
          var opt = $(this);
          obj.val = opt.text();
          obj.index = opt.index();
          obj.placeholder.text(obj.val);
          var currentID = $(this).parents('div.wrapper-dropdown-3')[0].id;

          if(currentID == 'devicebrand')
          {
            $('#devicebrand.wrapper-dropdown-3 .dropdown li').removeClass('active');
            $('#devicebrand.wrapper-dropdown-3 .dropdown li span').removeClass('icon-selected-radio-yellow').addClass('icon-oval-3-copy-3');
            $('#devicebrand i.icon-up-arrow-1').addClass('icon-tick-filled').removeClass('icon-up-arrow-1');
            $('.more-brands').addClass('hidden');
            $('.covered').removeClass('hidden');
            $('#manual-brand-input').val(obj.val);
          }
          $(this).children('span').removeClass('icon-oval-3-copy-3').addClass('icon-selected-radio-yellow');
          $(this).parent().toggleClass("border-active");
          $('.dropdown input').val('');
          e.stopPropagation();
      });
  },
  getValue : function() {
      return this.val;
  },
  getIndex : function() {
      return this.index;
  }
  };
  $(function() {
  var dd = new DropDown( $('#devicebrand') );
  $(document).click(function() {
      // all dropdowns
      $('.wrapper-dropdown-3').removeClass('active');
  });
  });

Html :

<div class="filter check-brand">
    <div id="devicebrand" class="wrapper-dropdown-3" tabindex="1">
      <i class="icon icon-brand"></i>
      <span data-val="-1">check brand </span>
      <div class="dropdown brand">
        <span class="icon-cross-it"></span>
        <div class="side-info">
          <p class="SELECT-YOUR-MOBILE-P">SELECT YOUR MOBILE BRAND  </p>
          <p class="One-line-to-explain">One line to explain why he needs to select his city. Along with more information.</p>
        </div>
        <div class="city-selection">
          <ul>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="htc">HTC</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="motorola">motorola</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="xiaomi">xiaomi</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="lg">LG</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="samgsung">samgsung</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="sony">sony</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="huawei">huawei</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="google pixel">google pixel</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="nokia">nokia</a></li>
            <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="le-eco">le-eco</a></li>
          </ul>
          <div class="more-brands">
            <a class="more-brands-btn" href="javascript:void(0);">+ 254 Brands</a>
          </div>
          <div class="manual-brand">
            <input placeholder="Enter your brand if not found above " id="manual-brand-input" class="manual-brand-input ui-autocomplete-input" value="" autocomplete="off" type="text"><span class="icon-shape_4"></span>
          <ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none;"></ul></div>
          <div class="covered hidden">
            <p><span class="icon-tick"></span>Congratulations! Free Pick &amp; Drop service available in your city</p>
            <p><span class="icon-tick"></span>400 Service centers near you</p>
            <p><span class="icon-tick"></span>20% of people bought this near your locality</p>
            <p><span class="icon-tick"></span>3days is average repair time in your area.</p>
          </div>
          <div class="not-covered hidden">
            <p><span class="icon-not-covered-tick"></span>Sorry, we are currently present in India. We don’t cover your City.</p>
            <p>We can briefly state here why we dont cover particular city. Or if at all we are in process of including it.</p>
          </div>
        </div>
      </div>
      <i class="icon-down-arrow-1"></i>
      <i class="icon-orange-cross hidden"></i>
    </div>
  </div>

Here is the fiddle for the same. https://jsfiddle.net/kvab7wyd/1/

Answer 1

UPDATE

Applied my answer to OP's Fiddle

Store your value in a variable, then set the input's value equal to the variable. The way you had it was not working because document.getElementById('input').value is plain JavaScript expression and $(this).attr(data-) is jQuery expression, if you mix them, you must take dereference the jQuery by using $(obj).get() or dot notation $(obj)[0] , although I'm not entirely sure it would be worth the trouble in doing so. BTW use e.preventDefault() when using links that don't go anywhere, that'll stop that irritating jumping when clicking them. I also used .data() instead of .attr() it's the same result either way but .data() looks cleaner.

SNIPPET

 $('.dropdown li a').on('click', function(e){ var data = $(this).data('val'); e.preventDefault(); document.getElementById('manual-brand-input').value = data; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="filter check-brand"> <div id="devicebrand" class="wrapper-dropdown-3" tabindex="1"> <i class="icon icon-brand"></i> <span data-val="-1">check brand </span> <div class="dropdown brand"> <span class="icon-cross-it"></span> <div class="side-info"> <p class="SELECT-YOUR-MOBILE-P">SELECT YOUR MOBILE BRAND </p> <p class="One-line-to-explain">One line to explain why he needs to select his city. Along with more information.</p> </div> <div class="city-selection"> <ul> <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="htc">HTC</a></li> <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="motorola">motorola</a></li> <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="xiaomi">xiaomi</a></li> <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="lg">LG</a></li> <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="samgsung">samgsung</a></li> <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="sony">sony</a></li> <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="huawei">huawei</a></li> <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="google pixel">google pixel</a></li> <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="nokia">nokia</a></li> <li><span class="icon-oval-3-copy-3"></span><a href="#" data-val="le-eco">le-eco</a></li> </ul> <div class="more-brands"> <a class="more-brands-btn" href="javascript:void(0);">+ 254 Brands</a> </div> <div class="manual-brand"> <input placeholder="Enter your brand if not found above " id="manual-brand-input" class="manual-brand-input ui-autocomplete-input" value="" autocomplete="off" type="text"><span class="icon-shape_4"></span> <ul id="ui-id-1" tabindex="0" class="ui-menu ui-widget ui-widget-content ui-autocomplete ui-front" style="display: none;"></ul></div> <div class="covered hidden"> <p><span class="icon-tick"></span>Congratulations! Free Pick &amp; Drop service available in your city</p> <p><span class="icon-tick"></span>400 Service centers near you</p> <p><span class="icon-tick"></span>20% of people bought this near your locality</p> <p><span class="icon-tick"></span>3days is average repair time in your area.</p> </div> <div class="not-covered hidden"> <p><span class="icon-not-covered-tick"></span>Sorry, we are currently present in India. We don't cover your City.</p> <p>We can briefly state here why we dont cover particular city. Or if at all we are in process of including it.</p> </div> </div> </div> <i class="icon-down-arrow-1"></i> <i class="icon-orange-cross hidden"></i> </div> </div> 

Answer 2

Main change is here: $('.dropdown input').val($(this).find('a').data('val'));

//filters dropdown
  function DropDown(el) {
      this.dd = el;
      this.placeholder = this.dd.children('span');
      this.opts = this.dd.find('div.dropdown li');
      this.val = '';
      this.index = -1;
      this.initEvents();
  }
  DropDown.prototype = {
      initEvents : function() {
          var obj = this;
          obj.dd.on('click',function(){
            $(this).toggleClass("active");
            $(this).parent().toggleClass("border-active");
            $('.filters').toggleClass('border-bottom');
            $(this).children('.dropdown').css('width',$(window).width());
            var deID = $(this);

            if(deID[0].id == 'devicebrand')
            {
              $('#devicebrand i.icon-down-arrow-1').addClass('icon-up-arrow-1').removeClass('icon-down-arrow-1');
            }
            return false;
          });
          obj.opts.on('click',function(e){
              // e.preventDefault();
              $(this).parent().addClass('hidden');
              $(this).addClass('active');
              var opt = $(this);
              obj.val = opt.text();
              obj.index = opt.index();
              obj.placeholder.text(obj.val);
              var currentID = $(this).parents('div.wrapper-dropdown-3')[0].id;

              if(currentID == 'devicebrand')
              {
                $('#devicebrand.wrapper-dropdown-3 .dropdown li').removeClass('active');
                $('#devicebrand.wrapper-dropdown-3 .dropdown li span').removeClass('icon-selected-radio-yellow').addClass('icon-oval-3-copy-3');
                $('#devicebrand i.icon-up-arrow-1').addClass('icon-tick-filled').removeClass('icon-up-arrow-1');
                $('.more-brands').addClass('hidden');
                $('.covered').removeClass('hidden');
              }
              $(this).children('span').removeClass('icon-oval-3-copy-3').addClass('icon-selected-radio-yellow');
              $(this).parent().toggleClass("border-active");
              console.log($(this).data('val'));
              $('.dropdown input').val($(this).find('a').data('val'));
              e.stopPropagation();
          });
      },
      getValue : function() {
          return this.val;
      },
      getIndex : function() {
          return this.index;
      }
  };
  $(function() {
      var dd = new DropDown( $('#devicebrand') );
      $(document).click(function() {
          // all dropdowns
          $('.wrapper-dropdown-3').removeClass('active');
      });
  });

Answer 3

You can try this:

$('.dropdown li a').click(function(e){
    $("#manual-brand-input").val($(this).attr('data-val'));
});

Answer 4

There was a small error in my code.

$('.dropdown input').val('');

this was causing the value to be empty.

Sorry guys.