Показать все значения 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-й вкладке у меня есть кнопка отправки, чтобы проверить и сохранить значения в БД.

Я хотел бы отобразить на той же странице, что все поля, в которые я ввел значение, отмеченные флажки и выделенное выпадающее меню. Я могу проверить, увидев содержимое до того, как я нажму кнопку «Отправить» на 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 вкладок. На 4-й вкладке у меня есть кнопка отправки, чтобы проверить и сохранить значения в БД.

Я хотел бы отобразить на той же странице, что все поля, в которые я ввел значение, отмеченные флажки и выделенное выпадающее меню в <div>. Я могу проверить, увидев содержимое в <div>, прежде чем нажать кнопку отправки на 4-й вкладке мастера, чтобы убедиться, что у меня есть правильные значения в текстовых окнах, выделенные выпадающие списки и отмеченные флажки. Я хочу, чтобы это интерактивно отображало содержимое в <div> без перезагрузки страницы.

Так что мне нужен исходный код или ссылочный URL, где я могу получить представление об их реализации.