提交表單

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相同的幾個元素是非法的。