-1

Lo que estoy tratando de lograr es bastante simple de explicar. Tengo un formulario, en el cual tengo un textarea común y corriente, pero quiero que arriba de este textarea haya diversos botones que al presionarlos carguen datos predefinidos al textarea, y en el mismo orden que el usuario presione los botones.

Ejemplo, tengo 4 botones:

ROJO, con el valor "Usted seleccionó el color rojo. "

AZUL, con el valor "Usted seleccionó el color azul. "

VERDE, con el valor "Usted seleccionó el color verde. "

AMARILLO, con el valor "Usted seleccionó el color amarillo. ".

De esta forma, si un usuario presiona el botón ROJO y el botón VERDE, en el textbox se escriba: "Usted seleccionó el color rojo. Usted seleccionó el color verde"

Soy relativamente nuevo en esto y tengo un proyecto en mente donde necesitaría lograr hacer que este textbox se llene dinámicamente de esa forma y así yo poder en el futuro agregar o eliminar botones con diferentes valores. Estoy usando Laravel para el desarrollo, por si les sirve de algo.

Estuve probando un rato hacer un script con JS pero no logré avanzar mucho, agradecería cualquier tipo de ayuda.

Desde ya muchas gracias.

1
  • Por favor incluí el código que has probado para poder darte una orientación.
    – Niche
    el 18 oct. 2018 a las 2:23

1 respuesta 1

0

Aquí te dejo un código de lo que deberías hacer. O al menos el modo en el que yo lo haría.

function addText(text){
var actualText = $("#inputArea").val();
var newText =  actualText +" "+ text;
$("#inputArea").val(newText);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" style="width:90px; background-color:red; color:white;" onclick="addText('Usted seleccionó el color rojo. ')">Rojo</button>
<button type="button" style="width:90px; background-color:blue; color:white;" onclick="addText('Usted seleccionó el color azul. ')">Azul</button>
<button type="button" style="width:90px; background-color:green; color:white;" onclick="addText('Usted seleccionó el color verde. ')">Verde</button>
<button type="button" style="width:90px; background-color:yellow; color:white;" onclick="addText('Usted seleccionó el color amarillo. ')">Amarillo</button>

<textarea id="inputArea" rows="4" cols="50"></textarea>

Espero que te sirva. Para la próxima trata de poner un codigo de lo que intentaste hacer por lo menos para evitarte los votos negativos! Te doy mi apoyo por ser nuevo en la comunidad. Saludos!

4
  • Excelente! Muchísimas gracias, funciona pero hasta cierto punto, ya que hay algo que no mencioné y es que me gustaría que "leyera" las etiquetas html, en otras palabras, que si pongo un <br> dentro de la función "addText" lo respete dentro del textarea. Se te ocurre alguna forma de lograrlo? Y gracias por responder a pesar de publicar inocentemente sin respetar el formato adecuado. el 19 oct. 2018 a las 3:14
  • Necesitas que te lea cualquier tipo de etiqueta o lo que buscas es solo poder bajar de linea?
    – Fran Islas
    el 19 oct. 2018 a las 3:26
  • En el futuro me gustaría poder añadir imágenes dentro del textarea, no sería necesario verlas durante la edición pero si me gustaría que a la hora de imprimir todo el resultado del formulario, que la imagen sea visible. el 19 oct. 2018 a las 11:59
  • Para usar HTML en un textarea lo recomendable es un editor html como el FCKEditor. Con él podras agregar texto en formato html (negrita, cursiva, color, etc...). De todos modos no le veo sentido hacerlo de ese modo. Pero cada proyecto es un mundo...
    – Fran Islas
    el 19 oct. 2018 a las 14:50

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.