3

Tengo una aplicación para imprimir etiquetas, utilizo una dll que aún no termino de entender, pero quiero hacer esto: Cuento con 3 input type en HTML en el cual agrego información para la creación de una etiqueta, lo que quiero es que esa información se pase en línea hacia un textarea

<form>
  NUMERO DE SERIE:
  <input type="text" name="numeroserie"><br> REFERENCIA:
  <input type="text" name="referencia"><br> PESO (KG):
  <input type="number" name="peso"><br>

</form>
<textarea id="textToEncode" style="width: 100%; height: 200px;"></textarea>

La dll o función que tengo cargada toma la información del textarea y la convierte en un código de barras, entonces como aun no entiendo cómo funciona, quiero pasar la información de los textbox hacia el textarea, como se puede ver en la imagen de abajo, al darle clic al botón Insertar.. me mande la información hacia el textarea

introducir la descripción de la imagen aquí

Gracias por la ayuda

1
  • Lo que le falta al codigo es asignar los identificadores a los elementos del formulario, he agregado una respuesta en la que te explico una solucion que puede servirte el 7 jul. 2017 a las 23:08

3 respuestas 3

3

Primero

Si vas a utilizar Javascript sin frameworks, podrias hacer algo como esto:

function copiarDatos(){

  var numeroSerie = document.getElementById("numeroserie").value;
  var referencia = document.getElementById("referencia").value;
  var peso = document.getElementById("peso").value;

  var texto = numeroSerie + "\t\t" + referencia + "\t\t" + peso;

  document.getElementById("textToEncode").innerHTML = texto;

}
<form>
  NUMERO DE SERIE:
  <input type="text" id="numeroserie" name="numeroserie"><br> REFERENCIA:
  <input type="text" id="referencia" name="referencia"><br> PESO (KG):
  <input type="number" id="peso" name="peso"><br>
  <button type="button" id="boton" onClick="copiarDatos()">Insertar Información del Producto</button>

</form>
<textarea id="textToEncode" style="width: 100%; height: 200px;"></textarea>

Que hemos hecho aqui?

Lo primero que hemos hecho, es asignar un identificador a los elementos del formulario:

 <input type="text" id="numeroserie" name="numeroserie"><br> REFERENCIA:
 <input type="text" id="referencia" name="referencia"><br> PESO (KG):
 <input type="number" id="peso" name="peso"><br>

Nos falta una funcion

Por lo tanto, hemos creado esta funcion, la cual se encargara de copiar los datos del formulario al textarea:

function copiarDatos(){

  var numeroSerie = document.getElementById("numeroserie").value;
  var referencia = document.getElementById("referencia").value;
  var peso = document.getElementById("peso").value;

  var texto = numeroSerie + "\t\t" + referencia + "\t\t" + peso;

  document.getElementById("textToEncode").innerHTML = texto;

}

En esta funcion obtenemos los valores respectivos del formulario, referenciando a cada elemento usando su identificador. Posteriormente, los concatenamos todos usando el caracter \t, para que quede tabulado entre cada texto y guardamos todo esto en la variable texto.

Por cierto

Debemos agregar esta funcion al boton, esto se haria asi:

<button type="button" id="boton" onClick="copiarDatos()">Insertar Información del Producto</button>
3
  • Muchas Gracias por la ayuda, me sirvio de mucho, ya puedo realizar el proceso de la aplicación, ahora tengo que buscar la manera de meter espacios, por ejemplo para el numero de serie necesito que sean 16 caracteres si o si, ya sean 5 caracteres + 11 espacios, o 10 caracteres + 6 espacios siempre al final, sabrías como contar los caracteres y poner los espacios? Saludos!
    – user5019
    el 10 jul. 2017 a las 14:22
  • @EduardoVelazquez No soy un experto, pero claro que te puedo ayudar! Solo debes formular una pregunta y cualquier miembro de la comunidad podra ayudarte el 10 jul. 2017 a las 14:28
  • Especifica bien lo que requieres en tu nueva pregunta, y asi podremos ayudarte :) el 10 jul. 2017 a las 14:29
0

Lo puedes hacer con Jquery: Agrega los id a los textbox para que los puedas ubicar

  NUMERO DE SERIE:
  <input type="text" name="numeroserie" id="numeroserie"><br>
  REFERENCIA:
  <input type="text" name="referencia" id="referencia"><br>
  PESO (KG):
  <input type="number" name="peso" id="peso"><br>

  <button id="miboton" onClick="pasardatos()">Insertar Información del Producto</button>

JavaScript

function pasardatos(){
var numeroserie = $("#numeroserie").val();
var referencia = $("#referencia").val();
var peso = $("#peso").val();

var datos = numeroserie+" "+referencia+" "+peso;

$("#textToEncode").val(datos); 
}
0

Utilizando puro javascript necesitas identificar tu input con un id cambialo por lo siguiente

<input type="text" name="numeroserie" id="numeroserie">

Y para obtener sus valores utiliza lo siguiente

    document.getElementById("numeroserie").value();

Tu Respuesta

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