change input text field into label with input typed value inside label javascript

Question

I want to change the text field into a label tag with input user typed text inside it. I have tried and seen many example which are working but not set value as a text in label. e.g.:

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

I want to replace this input text field with label or div tag with its innerHTML hi or the user typed value i have tried the example below but i it is not done by me.

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

Sorry For Mistake document.getElementById("1").outerHTML = document.getElementById("1").outerHTML.replace(/p/g,"div"); — user3857603
– user3857603, Commented Jul 30, 2015 at 8:07
ID's cannot and should not just be a number, they must start with some text identifier such as <p id="sad1">sadsad</p> — Jamie Barker
– Jamie Barker, Commented Jul 30, 2015 at 8:12
yes it is working for the above example but it doesnot work for problem thanks — user3857603
– user3857603, Commented Jul 30, 2015 at 8:14

Aravinder · Accepted Answer · 2015-07-30 08:17:43Z

5

Element id should start with character not number.

With using jQuery

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

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

answered Jul 30, 2015 at 8:17

Aravinder

5034 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Norlihazmey Ghazali · Accepted Answer · 2019-11-14 02:03:41Z

0

Or you can use like 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

edited Nov 14, 2019 at 2:03

answered Jul 30, 2015 at 8:25

Norlihazmey Ghazali

9,0701 gold badge26 silver badges42 bronze badges

1 Comment

The Memebot Over a year ago

The link of the demo is down

Collectives™ on Stack Overflow

change input text field into label with input typed value inside label javascript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related