JQueryを使用して同じHTMLページのすべてのHTML要素値をページロードなしで表示

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> 

私はさらに4つのタブのウィザード形式で、上記のHTMLコンテンツを持っています。 4番目のタブには、DBに値を検証して保存するための送信ボタンがあります。

私は同じページに、私が値を入力したすべてのフィールドと、チェックボックスとチェックボックスを選択したものを表示します。ウィザードの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番目のタブには、DBに値を検証して保存するための送信ボタンがあります。

私は同じページに、私が値を入力したすべてのフィールドと、チェックボックスと選択されたドロップダウンを<div>に表示します。 <div>の内容を確認してから、ウィザードの4番目のタブにある[送信]ボタンをクリックして、テキストボックス、選択されたドロップダウン、チェックボックスに正しい値が設定されていることを確認できます。 <div>のコンテンツをインタラクティブに表示するには、ページをリロードしないでください。

私はソースコードまたは参照URLが必要です。そこで、私は同じものを実装するアイデアを得ることができます。