使用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>

我有上面的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，在那里我可以了解实现相同的内容。