is there a way to transform all inputs field to divs? or span or anything. i have a table like:

<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>

and i want copy this source to a light box without inputs.. like:

<table>
<tr>
<td>Principal:</td>
<td><div>100.00$</div></td>
</tr>
<tr>
<td>start date:</td>
<td><div>02/02/2002</div></td>
</tr>
<tr>
<td>end date:</td>
<td><div>02/02/2002</div></td>
</tr>
</table>

i wonder is there a way to convert all those inputs to divs may be via using .replace or something else ?

thanks

is there a way to transform all inputs field to divs? or span or anything. i have a table like:

<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>

and i want copy this source to a light box without inputs.. like:

<table>
<tr>
<td>Principal:</td>
<td><div>100.00$</div></td>
</tr>
<tr>
<td>start date:</td>
<td><div>02/02/2002</div></td>
</tr>
<tr>
<td>end date:</td>
<td><div>02/02/2002</div></td>
</tr>
</table>

i wonder is there a way to convert all those inputs to divs may be via using .replace or something else ?

thanks

• javascript
• jquery
• input
• transform

3 Answers 3

Try this:

$('#calc').clone().appendTo('#lightbox');
$('#lightbox input').replaceWith(function() {
    return $('<div>' + $(this).val() + '</div>');
});

jsfiddle - http://jsfiddle/infernalbadger/c9Rub/2/

Updated to include copying the content to another div with the ID lightbox.

Assuming that you are not using any libs:

Here http://www.w3schools./jsref/dom_obj_all.asp, you can find some useful functions to do this.

By getting the input elements that you need, something like this:

var inputs = document.getElementsByTagName('input');

You can replace them with this:

  //pseudo
  for each input element
    var parentNode = input.parentNode;
    parentNode.removeChild(input);
    parentNode.innerHTML('<div>' + input.value + '</div>');

In the link that I put above, you can find some functions either to replace child or either to findParent, remove the current child and then append your div by yourself.

If you are using jquery you can do the following.

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#btnChange").click(function () {
            $("#calc :input").each(function () {
                this.outerHTML = "<div>" + this.value+ "</div>";
            });
        });
    });
</script>

<div id="calc">
<table>
<tr>
<td>Principal:</td>
<td><input value="100.00$" /></td>
</tr>
<tr>
<td>start date:</td>
<td><input value="02/02/2002" /></td>
</tr>
<tr>
<td>end date:</td>
<td><input value="02/02/2002" /></td>
</tr>
</table>
</div>
<input type="button" id="btnChange" value="Change" />