I'm trying to copy the value (the displayed name) of the link onClick to the textbox. Is it possible ?

The following is my sloppy attempt to make it work -

<div class="service_list">
    <ul style="list-style-type:square; display:none;" id="ullist">
        <li><a href="#" class="service1">Service 1</a>

        </li>
        <li><a href="#" class="service2">Service 2</a>

        </li>
    </ul>
</div>
<input type="text" id="textbox" />
<br />
<table>
    <tr>
        <td>
            <div class="button">    <a href="#" download="servicename.txt" class="button" id="button">Download</a>

            </div>
        </td>
        <td>
            <div class="list">  <a href="#" class="list" id="list">List of Services</a>

            </div>
        </td>
    </tr>
</table>

Here is the JS -

var link_selected = document.querySelector('.service_list'); //edited
var input_field = document.getElementById("input");
link_selected.onclick = function (e) {
    var selected = document.querySelector('.service_list').value; //edited
    input_field.value = selected;
};

here is the JSFiddle for the same : /

I'm trying to copy the value (the displayed name) of the link onClick to the textbox. Is it possible ?

The following is my sloppy attempt to make it work -

<div class="service_list">
    <ul style="list-style-type:square; display:none;" id="ullist">
        <li><a href="#" class="service1">Service 1</a>

        </li>
        <li><a href="#" class="service2">Service 2</a>

        </li>
    </ul>
</div>
<input type="text" id="textbox" />
<br />
<table>
    <tr>
        <td>
            <div class="button">    <a href="#" download="servicename.txt" class="button" id="button">Download</a>

            </div>
        </td>
        <td>
            <div class="list">  <a href="#" class="list" id="list">List of Services</a>

            </div>
        </td>
    </tr>
</table>

Here is the JS -

var link_selected = document.querySelector('.service_list'); //edited
var input_field = document.getElementById("input");
link_selected.onclick = function (e) {
    var selected = document.querySelector('.service_list').value; //edited
    input_field.value = selected;
};

here is the JSFiddle for the same : https://jsfiddle/aishwarya26/rebpb5h2/

• javascript
• jquery
• html
• href

• Correct your code , service_list is a class not id and you are using #service_list instead of .service_list – Suraj Rawat Commented Jun 5, 2015 at 5:26
• Thanks for pointing that out. I'll fix it right away. – Aishwarya L Commented Jun 5, 2015 at 5:28
• check this jsfiddle/rebpb5h2/2 – user3528635 Commented Jun 5, 2015 at 5:29
• 1 Why do you have jQuery tagged on this question, you seem to be using the DOM? – David Thomas Commented Jun 5, 2015 at 5:37
• That's because I'm open to a JQuery solution as well – Aishwarya L Commented Jun 5, 2015 at 5:41

4 Answers 4

You can add a click handler to each link in the #ullist element then set teh value of the text box

var text = document.getElementById('textbox');
var anchor = document.querySelector('#button');

var links = document.querySelectorAll('#ullist a');
for(var  i = 0;i< links.length;i++){
    links[i].onclick = function(){
        text.value = this.textContent || this.innerText
    }
}

Demo: Fiddle

Using jQuery

jQuery(function($){
    var $text = $('#textbox');
    $('#ullist a').click(function () {
        $text.val($(this).text());
    });

    $('#button').click(function (e) {
        var textbox_text = $text.val();
        var textbox_file = new Blob([textbox_text], {
            "type": "application/bat"
        });

        this.href = URL.createObjectURL(textbox_file);
        this.download = "servicename.txt";
    });

    $('#list').click(function (e) {
        $('#ullist').toggle();
    });
})

Demo: Fiddle

As JQuery is tagged, this could be simply done with JQuery!

$(document).on('click', 'a', function(e) {
    e.preventDefault();
    //e = $(this).attr('href');//this gets the href
    e = $(this).text();//This gets the text
    $('input').val(e);
});

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input readonly>
<a href="http://google.">Google<a>
<a href="http://booble.">Booble<a>
<a href="http://doodle.">Doodle<a>
<a href="http://coocle.">Coocle<a>
<a href="http://roorle.">Roorle<a>

Use a click trigger on page load like this, If you are willing to dabble in a bit of jquery:

    $('a').click(function(){
        $('#textbox').val($(this).html());
    })

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="service_list">
    <ul style="list-style-type:square; display:none;" id="ullist">
        <li><a href="#" class="service1">Service 1</a>

        </li>
        <li><a href="#" class="service2">Service 2</a>

        </li>
    </ul>
</div>
<input type="text" id="textbox" />
<br />
<table>
    <tr>
        <td>
            <div class="button">    <a href="#" download="servicename.txt" class="button" id="button">Download</a>

            </div>
        </td>
        <td>
            <div class="list">  <a href="#" class="list" id="list">List of Services</a>

            </div>
        </td>
    </tr>
</table>

you can also use live jquery click for this

$(document).on('click','.service1,.service2',function(){
    $("#textbox").val($(this).html());
});