在BootStrap 4表单中如何调用JavaScript函数获取输入并展示输出

第一步：新增输出文本框 #

在现有表单的提交按钮上方，新增一个用于展示返回结果的文本框，设置唯一id方便DOM选中，加readonly属性可防止用户修改输出内容，不需要可以删除：

<div class="form-group">
  <label for="outputResult">处理结果：</label>
  <textarea class="form-control" rows="5" id="outputResult" readonly></textarea>
</div>

第二步：修改提交按钮的点击事件 #

给按钮的onclick属性填入处理逻辑，完整按钮代码如下：

<button onclick="
  // 获取输入文本域的内容
  const inputText = document.getElementById('comment').value;
  // 调用自定义函数拿到返回值
  const result = AcceptInput(inputText);
  // 把结果写入输出文本框
  document.getElementById('outputResult').value = result;
" type="button" class="btn btn-primary">Submit</button>

完整修改后的表单代码 #

<form action="" class="container p-3 my-3 bg-dark text-white">
  <div class="form-group">
    <label for="comment">Your Text:</label>
    <textarea class="form-control" rows="5" id="comment" name="text"></textarea>
  </div>
  <!-- 新增的输出文本框 -->
  <div class="form-group">
    <label for="outputResult">处理结果：</label>
    <textarea class="form-control" rows="5" id="outputResult" readonly></textarea>
  </div>
  <button onclick="
    const inputText = document.getElementById('comment').value;
    const result = AcceptInput(inputText);
    document.getElementById('outputResult').value = result;
  " type="button" class="btn btn-primary">Submit</button>
</form>

逻辑说明 #

• 获取输入文本值：通过document.getElementById()选中id为comment的输入文本域，读取它的value属性即可拿到用户输入的字符串
• 使用函数返回值：拿到AcceptInput的返回结果后，同样选中输出文本域，给它的value属性赋值就能把结果展示在页面上
• 如果不想把逻辑写在onclick属性里，也可以单独封装成一个自定义函数，再绑定到按钮的点击事件上，代码整洁度会更高。

内容的提问来源于stack exchange，提问作者Aeryes