在提交表单之前显示在表单中输入的数据

Question

我有一个表单，用户需要输入多个输入，但在提交表单之前，我希望向用户展示他们的 i/p 将如何显示。

我的页面分为2部分，1部分包含表单，2部分包含布局

<form class="form-horizontal"  enctype="multipart/form-data" role="form" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="POST">
    <div class="form-group">
        <label for="input01" class="col-sm-2 control-label">First Name</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="firstname" id="input01">
            </div>
    </div>

    <div class="form-group">
        <label for="input01" class="col-sm-2 control-label">Last Name</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="lastname" id="input02">
            </div>
    </div>

    <div class="form-group">
        <label for="input01" class="col-sm-2 control-label">Location</label>
            <div class="col-sm-4">
                <input type="text" class="form-control" name="location" id="input03">
            </div>
    </div>
</form>

现在我要显示上述数据的地方将是不同的 div，这需要在提交按钮之前完成，例如：

我想要那个

when user types firstname, at the same instance it should be displayed under <div id="firstname"></div>,

when user types lastname , at the same instance it should be displayed under <div id="lastname "></div>,

when user types location, at the same instance it should be displayed under <div id="location"></div>,

目前我的代码仅适用于单输入

<input type="text" value="">
<p></p>

$( "input" )
  .keyup(function() {
    var value = $( this ).val();
    $( "p" ).text( value );
  })
  .keyup(); 

但我想要一些可以用于任意数量的输入的东西，如上面示例中所述。谁能帮帮我

Answer 1

您可以将特殊的data-attribute 添加到您的input，以明确输入的文本应放置在何处。你可以随意称呼它，前缀data-，我们就叫它data-view-id。然后将此属性添加到您的input：

 <input type="text" class="form-control" name="location" id="input01" data-view-id="#location">

下一步 - 修改你的 js：

$( "input" )
  .keyup(function() {
      var value = $( this ).val(),
          dataViewId = $( this ).data( "view-id" );  // get your data-attribute value
      // use this value as a selector:
      $( dataViewId ).text( value );
  })
  .keyup();

更进一步 - 如果您要放置文本的 div 的 ID 与输入的 names 相同 - 那么您甚至不需要 data-attribute：

$( "input" )
  .keyup(function() {
      var value = $( this ).val(),
          dataViewId = $( this ).attr( "name" );  // get your value using `name`
      // use this value as a selector:
      $( "#" + dataViewId ).text( value );
  })
  .keyup();

顺便说一句 - id 属性在页面上应该是唯一。因此，像您目前拥有的那样拥有多个具有相同 id 的元素是非法的。