提交表单

Question

我必须在有多个输入需要由用户输入表单之前显示在表单中输入的数据，但在提交表单之前，我希望向用户显示其自己的I/P将如何获得显示。

我的页面分为两个部分，一部分包含表单和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-归功于您的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是一样name S的投入 - 那么你甚至不需要一个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相同的几个元素是非法的。