顯示在同一個HTML頁面中的所有HTML元素值，而不使用頁面加載使用Jquery

Question

我有一個多頁輸入的HTML頁面：文本，輸入：複選框，輸入：選擇等，我想顯示選定的文本框值並在同一頁面中選中複選框，而無需重新加載頁面。

如果我改變文本框，div中的相應值應該改變。另外，如果我取消選擇或清空文本框值，則應刪除相應的值。

有人可以給我相同的頁面參考或源代碼。

<div class="col-md-8"> 
     <div class="form-group form-group-sm"> 
      <label for="name1" class="formlabel control-label col-xs-3">Source</label> 
      <div class="col-xs-8"> 
       <select class="form-control input-sm" id="source" name="source"> 
        <option>Just Dial</option> 
        <option>Web</option> 
        <option>Reference</option> 
       </select> 
      </div> 
     </div> 
     <div class="form-group form-group-sm"> 
      <label for="name1" class="formlabel control-label col-xs-3">Name 1</label> 
      <div class="col-xs-8"> 
       <input type="text" class="form-control input-sm" required="required" id="name1" name="name1"> 
      </div> 
     </div> 
     <div class="form-group form-group-sm"> 
      <label for="name2" class="formlabel control-label col-xs-3">Name 2</label> 
      <div class="col-xs-8"> 
       <input type="text" class="form-control input-sm" id="name2" name="name2"> 
      </div> 
     </div> 
     <div class="form-group form-group-sm"> 
      <label for="contact1" class="formlabel control-label col-xs-3">Contact #1</label> 
      <div class="col-xs-8"> 
       <input type="text" class="form-control input-sm" required="required" id="contact1" name="contact1"> 
      </div> 
     </div> 
     <div class="form-group form-group-sm"> 
      <label for="contact2" class="formlabel control-label col-xs-3">Contact #2</label> 
      <div class="col-xs-8"> 
       <input type="text" class="form-control input-sm" id="contact2" name="contact2"> 
      </div> 
     </div> 
     <div class="form-group form-group-sm"> 
      <label for="email1" class="formlabel control-label col-xs-3">Email 1</label> 
      <div class="col-xs-8"> 
       <input type="email" required="required" class="form-control input-sm" id="email1" name="email1"> 
      </div> 
     </div> 
     <div class="form-group form-group-sm"> 
      <label for="email2" class="formlabel control-label col-xs-3">Email 2</label> 
      <div class="col-xs-8"> 
       <input type="email" class="form-control input-sm" id="email2" name="email2"> 
      </div> 
     </div> 

    </div> 

我有上面的HTML內容，更多的是4個標籤的嚮導格式。在第四個選項卡中，我有提交按鈕來驗證和存儲數據庫中的值。

我想在同一頁面顯示什麼是我輸入的所有字段的值，在複選框中選中複選框並選中下拉列表。我可以通過在嚮導中單擊第4個選項卡中的提交按鈕之前查看內容來驗證，以確保我在文本框，選定的下拉列表和選中的複選框中具有正確的值。我希望這可以在不重新加載頁面的情況下以交互方式顯示內容。

所以我需要源代碼或引用URL，我可以在那裏實現相同的想法。

Answer 1

 <div class="col-md-8"> 
      <div class="form-group form-group-sm"> 
       <label for="name1" class="formlabel control-label col-xs-3">Source</label> 
       <div class="col-xs-8"> 
        <select class="form-control input-sm" id="source" name="source"> 
         <option>Just Dial</option> 
         <option>Web</option> 
         <option>Reference</option> 
        </select> 
       </div> 
      </div> 
      <div class="form-group form-group-sm"> 
       <label for="name1" class="formlabel control-label col-xs-3">Name 1</label> 
       <div class="col-xs-8"> 
        <input type="text" class="form-control input-sm" required="required" id="name1" name="name1"> 
       </div> 
      </div> 
      <div class="form-group form-group-sm"> 
       <label for="name2" class="formlabel control-label col-xs-3">Name 2</label> 
       <div class="col-xs-8"> 
        <input type="text" class="form-control input-sm" id="name2" name="name2"> 
       </div> 
      </div> 
      <div class="form-group form-group-sm"> 
       <label for="contact1" class="formlabel control-label col-xs-3">Contact #1</label> 
       <div class="col-xs-8"> 
        <input type="text" class="form-control input-sm" required="required" id="contact1" name="contact1"> 
       </div> 
      </div> 
      <div class="form-group form-group-sm"> 
       <label for="contact2" class="formlabel control-label col-xs-3">Contact #2</label> 
       <div class="col-xs-8"> 
        <input type="text" class="form-control input-sm" id="contact2" name="contact2"> 
       </div> 
      </div> 
      <div class="form-group form-group-sm"> 
       <label for="email1" class="formlabel control-label col-xs-3">Email 1</label> 
       <div class="col-xs-8"> 
        <input type="email" required="required" class="form-control input-sm" id="email1" name="email1"> 
       </div> 
      </div> 
      <div class="form-group form-group-sm"> 
       <label for="email2" class="formlabel control-label col-xs-3">Email 2</label> 
       <div class="col-xs-8"> 
        <input type="email" class="form-control input-sm" id="email2" name="email2"> 
       </div> 
      </div> 

     </div> 

我有上述的HTML內容，甚至更多的4個標籤的嚮導格式。在第四個選項卡中，我有提交按鈕來驗證和存儲數據庫中的值。

我想在同一頁面中顯示我輸入的所有字段的值，選中複選框並選中下拉列表中的一個<div>。我可以通過查看<div>中的內容進行驗證，然後單擊向導的第4個選項卡中的提交按鈕，以確保在文本框，選定的下拉列表和選中的複選框中具有正確的值。我希望這可以在不重新加載頁面的情況下以交互方式顯示<div>中的內容。

所以我需要源代碼或引用URL，我可以在那裏實現相同的想法。