单击后将数据输入文本框

Question

I have a form in which users can talk on a chatroom. My problem is that I have a gallery in which users can select pictures.

My question is how could a user click a html link and for that html link to input text into the input so when the user clicks the link which says cat it inputs into the text field :cat.

This is the form I have so far:

<form method="POST" action="chat.php">
  <input type="text" name="message"></input>
  <input type="submit" />
</form>

This is the gallery:

<a href="#"><img src="cat.jpg"/></a>

So again, the question is how I could insert text into the text box once the user clicks the image of the cat?

Thank you for anyone who spends time on helping me solve this issue.

Answer 1

You can create a js function and then call it with the anchor to change the value attribute of the input. Input type text should not have a closing tag either.

function changeChatInput(value) {
  document.getElementById('chatInput').value = value;
}

<form method="POST" action="chat.php">
  <input type="text" name="message" id="chatInput" />
  <input type="submit" />
</form>


<a href="javascript: changeChatInput(':cat');">
  <img src="cat.jpg" />
</a>

</div>