Clever Geek Handbook

Change input textbox to label with injected input value inside javascript label

I want to change a textbox to a label tag with user entered text inside. I have tried and seen many examples that work but do not set the value as text in the label. eg:.

<input id="1" type="text" value="hi"/>

I want to replace this textbox with a label or div tag with innerHTML

hi or user input. I tried the example below, but I didn't.

<p id="1" onclick="wish(id)">sasdsad</p>
<script>    
    document.getElementById("1").outerHTML = document.getElementById("1").outerHTML.replace(/p/g,"div");
</scrip>
+3


source to share


2 answers


The element identifier must start with a character, not a number.

With jQuery



<input id="one" type="text" value="hi"/>

$('#one').replaceWith("<div>"+$('#one').val()+"</div>");
+3


source


Or you can use this as well, just for an alternative solution:

Html

<input id="toChange" type="text" value="hi"/>
<p id="clickMe" onclick="changeTag()">Click Me</p>


JQuery

function changeTag(){
  var originalForm = $('#toChange');
  var div = $('<div/>',{
               text : originalForm.val(),
               id : originalForm.attr('id')
            });
  $('#toChange').replaceWith(div);
}

DEMO

0


source






More articles:


All Articles