Fill a textarea with different texts assigned to different buttons

Question

Fill a textarea with different texts assigned to different buttons

Navigation

#1 by (0 votes)

-1

What I am trying to achieve is quite simple to explain. I have a form, in which I have a common textarea, but I want that above this textarea there are diverse buttons that when pressing them load predefined data to the textarea, and in the same order that the user press the buttons.

Example, I have 4 buttons:

RED, with the value "You selected the color red."

BLUE, with the value "You selected the color blue."

GREEN, with the value "You selected the green color."

YELLOW, with the value "You selected the yellow color.".

In this way, if a user presses the RED button and the GREEN button, the textbox will write: "You selected the color red You selected the color green"

I am relatively new to this and I have a project in mind where I would need to make this textbox fill dynamically in that way and so I can in the future add or delete buttons with different values. I'm using Laravel for development, in case it helps.

I was trying for a while to do a script with JS but I could not make much progress, I would appreciate any help.

Thank you very much already.

javascript html php laravel

asked by Pablo Dolce 18.10.2018 в 04:20

source

1 answer

Java calculator problem (conditional) Related tables in PHP to display data

score 0 · Answer 1

Here is a code of what you should do. Or at least the way I would do it.

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>

I hope it serves you. For the next try to put a code of what you tried to do at least to avoid negative votes! I give you my support for being new in the community. Greetings!