html - 如何将文本附加到 HTML 输入表单？

Question

我已经创建了一个基本的 html 输入表单，但想向用户输入附加一些文本，我该怎么做？

<form action="https://api.hipchat.com/v1/rooms/message" method="get" target="">
  <input type="hidden" name="room_id" value="example">
  <input type="hidden" name="from" value="example">
  <input type="hidden" name="color" value="example">
  <input type="hidden" name="notify" value="example">
  <input type="hidden" name="auth_token" value="example">

  Message: <input type="text" name="message"><br>
  <input type="submit" value="Submit">
</form>

我想从用户那里获得一些输入，然后将其发布到 HipChat 聊天室。所有这些都按原样工作。但是我想在消息之前添加“@Lewis”，这样我就会在 HipChat 上收到提及。是否可以做类似的事情:

value="@Lewis"+ "提交"

谢谢!

Answer 1

无需为此请求添加 jQuery。一个小的 JavaScript 将为您提供同样好的服务，并且更加轻量级。但是，如果您计划使用大量 js，则可能需要开始检查 jQuery。

<form id="myForm" action="https://api.hipchat.com/v1/rooms/message" method="get" target="">
  <input type="hidden" name="room_id" value="example">
  <input type="hidden" name="from" value="example">
  <input type="hidden" name="color" value="example">
  <input type="hidden" name="notify" value="example">
  <input type="hidden" name="auth_token" value="example">Message:
  <input type="text" name="message" id="myMessage">
  <br>
  <input type="submit" value="Submit">
</form>

<script type="text/javascript">
  window.onload = function() {
    document.getElementById("myForm").onsubmit = function() {
      var msgElement = document.getElementById("myMessage");
      msgElement.value = '@Lewis: ' + msgElement.value;
      alert(msgElement.value); //comment/remove this line
      return true;
    };
  };
</script>

请注意，我向表单和消息元素添加了 id。