CODEWITHSUNDEEP
javascript
user6322822
user6322822

Reputation:

on-click input a id into input field

What I'm trying to achieve is instead of the text inside the <a href="#">Text Inside</a> being inputted into the input field I would like the a id to be inputted. so for example if the first link is clicked with the a id of 1. 1 is then inputted into the text field.

<script type="text/javascript">
    $(function() {
        $('.tags_select a').click(function() {
            var value = $(this).text();
            var input = $('#text_tag_input');
            input.val(input.val() + value + ', ');
            return false;
        });
    });
</script>


<input id="text_tag_input" type="text" name="tags" />

<div class="tags_select">
    <a id="1" href="#">text1</a>
    <a id="2" href="#">text2</a>
    <a id="3" href="#">text3</a>
</div>

Upvotes: 1

Views: 1192

Answers (3)

Anwar YoungKid Ayub
Anwar YoungKid Ayub

Reputation: 1

Change this:

var value = $(this).text();

to this:

var value = $(this).attr('id');

Upvotes: 0

David Thomas
David Thomas

Reputation: 253358

Your posted code will work almost as written for this functionality, you simply have to retrieve the id instead of the text:

$(function() {
    $('.tags_select a').click(function() {

        // this.id retrieves the id attribute/property value
        // of the 'this' element (here the clicked <a> element:
        var value = this.id;
        var input = $('#text_tag_input');
        input.val(input.val() + value + ', ');
        return false;
    });
});

Although the above works, I'd suggest a minor tidy-up:

$(function() {
    $('.tags_select a').click(function() {
        var clicked = this;

        // here we select the relevant element to
        // which we want to add the new data. To
        // do that we use the anonymous function
        // of the val() method:
        $('#text_tag_input').val(function(i,v){
          // i: the index of the current (only)
          //    element in the collection returned
          //    in the jQuery collection.
          // v: the current value held in the
          //    element.

          // here we add the 'clicked.id' (id of
          // the clicked element, cached outside
          // of this method call) to the existing
          // value ('v') and and also add the ', '
          // String to that value:
          return v += clicked.id + ', ';
        });
        return false;
    });
});

You could also do the same thing, relatively easily, in plain JavaScript:

// a named function to act as the event-handler:
function addToElementText() {

  // 'this' is the element/node passed automatically
  // from the EventTarget.addEventListener() method
  // and in this example will be the <a> element:
  var clicked = this;

    // here we use document.querySelector() to retrieve
    // the first - if any - element matching the given
    // selector:
    document.querySelector(

      // we retrieve the selector held in the clicked
      // element's 'data-selector' attribute, retrieved
      // via the Element.dataset object:
      clicked.dataset.selector

    // then we update the value of that element via
    // its value property, retrieving the required
    // value-to-add from the property of the clicked
    // element:
    ).value += clicked[

      // retrieving the property to be used from the
      // data-property attribute of the clicked
      // element, using the same dataset API as
      // above:
      clicked.dataset.property

    // and also adding the ', ' string:
    ] + ', ';

}

// retrieving all the elements to which the event-handler
// should be bound, using a CSS selector:
var links = document.querySelectorAll('.tags_select a');

// creating an Array from the NodeList of elements returned
// by document.querySelectorAll():
Array.prototype.slice.call(links)

  // iterating over that Array of elements using
  // Array.prototype.forEach():
  .forEach(function(link) {
    // 'link': a reference to the current Array element
    // of the Array over which we're iterating.

    // here we bind the named function, addToElementText(),
    // (note the absence of parentheses below) to handle
    // the 'click' event on the link:
    link.addEventListener('click', addToElementText);
  });

The above JavaScript requires that the <a> elements have an additional attribute to convey the required selector for the element to which the the chosen property should be added, and another to select the relevant property-value to be added:

<a href="#" id="1" data-selector="#text_tag_input" data-property="id">link text</a>

Upvotes: 1

Vasil Gerginski
Vasil Gerginski

Reputation: 587

$(this).attr('id') instead of $(this).text()

This is the code(jquery):

 $(function() {
            $('.tags_select a').click(function() {
                var value = $(this).attr('id');
                var input = $('#text_tag_input');
                input.val(input.val() + value + ', ');
                return false;
      });
    });

Also you can use plane js for that also

 (function() {
       document.querySelectorAll('.tags_select a').forEach(function (i) {
            i.onclick = function () {
                var input = document.getElementById('text_tag_input');
                var value = input.value;
                input.value = value + this.id + ', ';
            }
        });
    })();

Upvotes: 0

Related Questions