1

Tengo mi formulario:

<input type="text" name="" placeholder="nombre">

<input type="text" name="" plaholder="apellidos">

<select>
<option>seleccion 1</option>
<option>seleccion 2</option>
<option>seleccion 3<option>
</select>

quiero que todos los datos introducidos en estos campos sean introducidos todos también en un textarea:

<textarea></textarea>

¿cómo lo puedo hacer usando jquery o javascript?

2
  • ¿ Cómo debería ser el resultado final ? podrias colocar un ejemplo.
    – mariovzc
    el 22 mar. 2019 a las 6:27
  • Simplemente que todo el texto ingresado en los input sea agregado al textarea, en el value obviamente para que esa información también se envíe.
    – Header90
    el 22 mar. 2019 a las 8:55

3 respuestas 3

2

Necesitas identificar cada input, Select, etc. con un ID clase, etc. Luego desde el javascript obtienes la data ingresada en casa uno y lo guardas ya sea en un string o array como te funcione mejor. Luego está data la seteas en el textarea.

// use to select with DOM element.
var value = $("input").val();

// use the id to select the element.
var value = $("#txt_name").val();

// use type="text" with input to select the element
var value = $("input:text").val();


// use to add "text content" to the DOM element.
$("input").val(value);

// use the id to add "text content" to the element.
$("#txt_name").val(value);

// use type="text" with input to add "text content" to the element
$("input:text").val(value)
2
  • Pero explica bien porque no entiendo nada. Como queda el código construido?
    – Header90
    el 22 mar. 2019 a las 14:23
  • @Header90 Te estoy dando la información necesaria para hacer resolver tu duda, el uso exacto se lo darás cuando lo implementes. el 22 mar. 2019 a las 14:36
1

Necesitas agregarles un id para poder tomar el valor de cada input y de cada select podrías hacer algo como esto:

function agregar(){

var nombre = document.getElementById('nombre').value;
var apellido = document.getElementById('apellido').value;
var sexo = document.getElementById('sexo').value;
var textarea = document.getElementById('texto');

if(nombre == '' || apellido == '' || sexo == ''){
alert('todos los campos son obligatorios');
}else{

textarea.innerHTML = nombre+','+apellido+','+sexo;
}





}
Nombre: <input type="text" id="nombre" required>
Apellido: <input type="text" id="apellido" required>

Sexo: <select id="sexo" required>
<option value="">Selecciona</option>
<option value="Masculino">Masculino</option>
<option value="Femenino">Femenino</option>

</select>
<br>
<br>
<button id="agregar" type="submit" onclick="agregar()">Agregar info</button>
<br>
<textarea id="texto" rows="5" width="5%"></textarea>

1

Buena tarde, te propongo la misma solución, pero con Jquery, que a mi parecer simplifica más el código.

Lo interesnte de Jquery es la forma de acceder a los elementos, en este caso como manejamos el atributo 'id', accedemos mediante un # y el nombre de ese id, de esta forma: $('#nombreId'); y .val(), simplemente obtiene el valor de los input.

Espero te ayude en algo.

//Asociamos evento click al botón 'Obtener Datos'
$('#jsObtainedData').on('click', ()=>{
  //Obtenemos los respectivos valores de los input y el select
  let valueName = $('#jsNombre').val()+', ';
  let valueApellido = $('#jsApellidos').val()+', ';
  let valueSelect = $('#jsSelect').val();
  
  //Cargamos al textarea los valores anteriores con .text()
  $('#jsTextarea').text(valueName+valueApellido+valueSelect);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="jsNombre" placeholder="nombre"><br>
<input type="text" id="jsApellidos" placeholder="apellidos"><br>
<select id="jsSelect">
<option>Seleccion 1</option>
<option>Seleccion 2</option>
<option>Seleccion 3<option>
</select><br><br><br>

<button id="jsObtainedData">Obtener Datos</button><br>
<textarea id="jsTextarea"></textarea>

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.