javascript - 将表单中的每个输入替换为其 value 属性

Question

我尝试将 html 导出为 pdf，但无法导出表单输入字段，因此我需要用其值替换表单标签。

我有一个表单，其中包含多个标签和表单输入，例如文本、复选框、单选按钮、选择等。

我想用它的 value 属性替换该输入标签，但我不知道该怎么做..

即。

<div id="Content">
    Name  : <input type="text" value="abc"/>
    Hobby : <input type="checkbox" value="abc" checked/>
            <input type="checkbox" value="abc"/>
    City  :<select class="form-control" id="EmployeeId" name="EmployeeId">
             <option value="">--Select One--</option>
             <option value="2454">Abc</option>
             <option value="2454">Def</option>
             <option value="2454" selected>Gif</option>
           </select>
</div>

如果我有这个 div 的以上 html，那么我想要这样的输出

Name : abc
Hobby : abc
City  : Gif

Answer 1

使用.replaceWith , 用提供的新内容替换匹配元素集中的每个元素

:input选择所有 input、textarea、select 和 button 元素。

要在另一个元素中显示输出，请克隆target元素并对clone(clone())元素进行操作。

$('#preview').on('click', function() {
  var temp = $("#Content").clone(true);
  $("#target").append(temp);
  temp.find(":input").each(function() {
    $(this).replaceWith(this.value);
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="Content">
  Name :
  <input type="text" value="abc" />
  <br>Hobby :
  <input type="checkbox" value="abc" checked/>
  <input type="checkbox" value="abc" />
  <br>City :
  <select class="form-control" id="EmployeeId" name="EmployeeId">
    <option value="">--Select One--</option>
    <option value="2454">Abc</option>
    <option value="2454">Def</option>
    <option value="2454" selected>Gif</option>
  </select>
</div>
<br>
<button id='preview'>Show Preview</button>
<h5>Target Elem</h5>
<div id='target'></div>

编辑:要应用复选框的条件，请使用三元，如下所示:$(this).replaceWith(this .type == 'checkbox' ? (this.checked ? this.value : "") : this.value);