HTML Note Textbox

Question

我是HTML的新手，我遇到了困难。

我已经实施了一个笔记页面。

用户可以输入注释并按提交。

当他们按提交时，我希望他们输入的注释显示在下面的文本框中，但是我很难实现。

<form class="form-horizontal">
<fieldset>

<!-- Form Name -->
<legend>Form Name</legend>

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="Type Note">Note:</label>  
  <div class="col-md-5">
  <input id="Type Note" name="Type Note" type="text" placeholder="" class="form-control input-md">

  </div>
</div>

<!-- Button -->
<div class="form-group">
  <label class="col-md-4 control-label" for=""></label>
  <div class="col-md-4">
    <button id="" name="" class="btn btn-primary">Submit</button>
  </div>
</div>

</fieldset>
</form>

输出看起来像......

Note:[==insertnotehere==]

Submit[button]

[Want my notes to display below in a text box]

如果有人有洞察力会很棒！谢谢！

Answer 1

HTML是一种声明性标记语言，因此它无法独立完成这种级别的交互。相反，您需要编写一些javascript才能使其正常工作。

您需要编写一些执行以下操作的JavaScript：

• 找到表单元素
• 在所述元素上收听submit事件
• 在事件处理程序中：
  • 取消默认表单提交，否则将刷新页面
  • 创建显示便笺所需的HTML元素
  • 使用文本框的值填充HTML
  • 将元素添加到DOM
  中
  • 清除文本框的值

Answer 2

$(function () {
  $(".form-horizontal").submit(function (e) {
    e.preventDefault();
    alert($("#Type Note").val());
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-4">
      <form class="form-horizontal">
        <fieldset>

          <!-- Form Name -->
          <legend>Form Name</legend>

          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label" for="Type Note">Note:</label>
            <div class="col-md-5">
              <input id="Type Note" name="Type Note" type="text" placeholder="" class="form-control input-md">
            </div>
          </div>

          <!-- Button -->
          <div class="form-group">
            <label class="col-md-4 control-label" for=""></label>
            <div class="col-md-4">
              <button class="btn btn-primary">Submit</button>
            </div>
          </div>
        </fieldset>
      </form>
    </div>
  </div>
</div>