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

debugcn 发表于 Dev

Pravin tukadiya

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

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

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

IE。

<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

人造丝

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

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

要显示另一个输出element，请克隆target元素，然后对cloned（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>

编辑：要对施加条件check-box，请按以下方式使用ternary：$(this).replaceWith(this.type == 'checkbox' ? (this.checked ? this.value : "") : this.value);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。