0

Tengo un grupo de etiquetas y quiero que cuando seleccione 1 o varias, se muestre o se muestren los VALUES de c/u de las etiquetas en un INPUT TEXT. Con este código ya logro mostrar SOLO 1 DE LAS ETIQUETAS, aun no logro obtener el valor de más de 2 etiquetas <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>

Esta es la función de Javascript con la que obtengo el valor solo de PARQUE, los demás valores no los logro mostrar.

function add(x)
{

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

}

Espero me puedan apoyar, se los agradezco.

4 respuestas 4

2

Esta es la función que imprime el valor de todos los tag a de la página.

    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);
   }

Esto no será toda la respuesta a tu pregunta pero creo q te puede alludar..

1
  • Gracias por tu apoyo Tony95 Commented el 27 sept. 2017 a las 19:23
1

utilizando jquery lo puede hacer de la siguiente manera:

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

si quiere ir concatenando puede hacer algo como esto:

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

de hecho te sobraria codigo en tu tabla como el id, el name y el onclick en tus a

el codigo de ejmplo esta en: https://jsfiddle.net/madaver1980/494Lg6mq/

si quieres le puede quitar lo que te digo para que veas que funciona igual correctamente, saludos!

no olvides agregar jquery src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

igual yo tome la clase de fav para dar la funcionalidad del click, si tienes mas objetos con clase fav estaria haciendo lo mismo, así que tienes que poner otro nombre, para que no tengas problemas.

1
  • Gracias Dave! Aprecio la ayuda, solo que esta ves me pidieron puro Javascript! Commented el 27 sept. 2017 a las 20:27
1

Con esta función evitarás que se dupliquen valores en tu array. Es decir, si das click varias veces sobre un enlace, el valor de este no se repetirá en el input text.

Nota: Ten en cuenta que no es una buena práctica dar el mismo id a varios elementos HTML. Es como si otorgas el mismo documento de identidad a varias personas. Los id deben ser siempre únicos.

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>

4
  • Gracias A. Cedano, es muy útil tu código. Commented el 27 sept. 2017 a las 19:38
  • Oye me funciona, no repite en el INPUT TEXT el valor si lo seleccionas 2 veces, pero al final si repite el valor en el arreglo. Commented el 4 oct. 2017 a las 19:46
  • No entiendo tu comentario @RicardoSauceda. Puse dos console.log en el código para que veas que los elementos no se repiten: uno muestra el total de elementos y el otro muestra los elementos que hay, lo mismo que en el input.
    – A. Cedano
    Commented el 5 oct. 2017 a las 2:15
  • Amigo, yo tenia mal mi código, tengo una duda y si quisiera borrar LO QUE YA SE SELECCIONO, es decir; si selecciono PARQUE se muestra en el INPUT, si lo presiono por segunda ocasión, necesito que desaparezca del INPUT TEXT. como podría ajustarlo? Commented el 5 oct. 2017 a las 5:47
0

Yo haría algo así:

Guardo los valores de cada <a> al momento de darle click en un array y al value del input le agrego ese array convertido en un 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>

Espero te sirva, saludos.

6
  • La verdad es que si me sirvió te lo agradezco, funciona, funciona! Una cosa mas, esos valores los traigo de la BDs, ya solo debo hacer un array independiente que obtenga los ID o los NAME (que son el ID de mis registros en la bds). Es parecido a esto verdad -> var id_opcion = document.getElementById('parque'); Commented el 27 sept. 2017 a las 19:19
  • Es hacer lo mismo, pero con los ID o NAME de estas etiquetas <a> Commented el 27 sept. 2017 a las 19:22
  • No entiendo muy bien a que te refieres, tu puedes capturar cualquier atributo del elemento al que le des click y guardar ese valor en un array, a eso te refieres ? Commented el 27 sept. 2017 a las 19:30
  • Si, quiero capturar el ID de las etiquetas <a>, porque después de seleccionarlos y mostrarlos en el INPUT TEXT, debo enviar los ID a la base de datos, pero solo obtenemos el texto de la etiqueta, no el ID :) Commented el 27 sept. 2017 a las 19:36
  • Para eso en la línea donde está x.innerHTML utilizas x.id y guardas eso en un array nuevo Commented el 27 sept. 2017 a las 19:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.