How to get value from several labels to and display in an input text?

0

I have a group of labels and I want that when you select 1 or several, the VALUES of each of the labels in an INPUT TEXT is shown or displayed. With this code I already show ONLY 1 OF THE LABELS, I still can not get the value of more than 2 labels <a>

<input class="tf w-input" id="node" maxlength="256" placeholder="Vida nocturna, el aeropuerto " type="text">

<a class="btn desc fav w-button" id="parque" name="parque" onclick = "add(this);" >PARQUE</a> 

<a class="btn desc fav w-button" id="parque" name="parque" onclick = "add(this);">CENTRO COMERCIAL</a>

<a class="btn desc fav w-button" id="parque" name="parque" onclick = "add(this);">GYM</a>

This is the Javascript function with which I get the value of just PARK, the other values I can not show.

function add(x)
{

    var valor = document.getElementById("parque").innerHTML;
    document.interes.node.value = valor;                            

}

I hope you can support me, I appreciate it.

    
asked by Ricardo Sauceda 27.09.2017 в 20:57
source

4 answers

0

I would do something like this:

I keep the values of each <a> at the time of giving click in a array and the value of input I add that array converted in string

var array_valores = Array();

function add(x)
{

    var input = document.getElementById('node');
    array_valores.push(x.innerHTML);

    input.value = array_valores.toString();                         

}
<input class="tf w-input" id="node" maxlength="256" placeholder="Vida nocturna, el aeropuerto " type="text">

    <a class="btn desc fav w-button" id="parque" name="parque" onclick="add(this);" >PARQUE</a> 

    <a class="btn desc fav w-button" id="parque" name="parque" onclick="add(this);">CENTRO COMERCIAL</a>

    <a class="btn desc fav w-button" id="parque" name="parque" onclick="add(this);">GYM</a>

I hope you serve, greetings.

    
answered by 27.09.2017 / 21:06
source
1

This is the function that prints the value of all the tag a of the page.

    function imprimeArregloTag(){
     var arrayTag = document.getElementsByTagName('a');
     var arrayText = new Array();

     for(var i = 0; i < arrayTag.length; i++){
      arrayText[i] = arrayTag[i].text
     }

     console.log(arrayText);
   }

This will not be the whole answer to your question but I think it can help you ..

    
answered by 27.09.2017 в 21:22
1

using jquery you can do it in the following way:

    $(function(){
          $('.fav').click(function(){
              $("#node").val($(this).html());                                    
          })                                                                       
     });

If you want to go concatenating you can do something like this:

   var node = $("#node").val();
   $("#node").val(node + $(this).html());

In fact you will have code in your table as id, name and onclick in your a

the example code is in: link

If you want you can take what I tell you so you can see that it works the same way, greetings!

Do not forget to add jquery src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

Even I take the fav class to give the functionality of the click, if you have more objects with class fav would be doing the same, so you have to put another name, so you do not have problems.

    
answered by 27.09.2017 в 22:08
1

With this function you will avoid duplicating values in your array. That is, if you click several times on a link, the value of this will not be repeated in the input text.

  

Note: Keep in mind that it is not a good practice to give the same id to   Several HTML elements. It's as if you grant the same document of   identity to several people. The id should always be unique.

var arrDatos = new Array();

function add(x) {

  var txtInput = document.getElementById('node');
  var strValor = x.innerHTML;

  arrDatos.pushIfNotExist(strValor, function(e) {
    return e === strValor;
  });


  txtInput.value = arrDatos.toString();
  console.log("Total de elementos actuales: "+arrDatos.length);
  console.log("Estos son los elementos: "+arrDatos);


}

Array.prototype.inArray = function(comparer) {
  for (var i = 0; i < this.length; i++) {
    if (comparer(this[i])) return true;
  }
  return false;
};

Array.prototype.pushIfNotExist = function(element, comparer) {
  if (!this.inArray(comparer)) {
    this.push(element);
  }
};
<input class="tf w-input" id="node" maxlength="256" placeholder="Vida nocturna, el aeropuerto " type="text" size="200">

<a class="btn desc fav w-button" id="parque1" name="parque" onclick="add(this);">PARQUE</a>

<a class="btn desc fav w-button" id="parque2" name="parque" onclick="add(this);">CENTRO COMERCIAL</a>

<a class="btn desc fav w-button" id="parque3" name="parque" onclick="add(this);">GYM</a>
    
answered by 27.09.2017 в 21:32