如何将文本附加到 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 上收到提及。是否可以做类似的事情：

值=“@刘易斯”+“提交”

谢谢！

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添加到了表单和消息元素中。