i'm working on a small html form with 1 textbox input, after the user enters any text and he presses a button on the end of the page i want the to change to a normal plain html text(so the whole page can be copy pasted into a word file including the written down text in the textbox).

as an example:

<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>

after the button is pressed i want the textbox to be converted to plain html text with no more textbox like this:

click!

i have been searching around and have not found a working solution yet, hope someone can help me out

i'm working on a small html form with 1 textbox input, after the user enters any text and he presses a button on the end of the page i want the to change to a normal plain html text(so the whole page can be copy pasted into a word file including the written down text in the textbox).

as an example:

<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>

after the button is pressed i want the textbox to be converted to plain html text with no more textbox like this:

click!

i have been searching around and have not found a working solution yet, hope someone can help me out

• javascript
• jquery
• html

• Thank you all for the great solutions provided, they all work and i will try the last ones tomorrow and see wich one works best. thanks again! – user2194285 Commented May 5, 2014 at 14:45

8 Answers 8

$('button').click(function(){
    $('body *').replaceWith(function(){
        return this.value || this.innerHTML;
    });
});

http://jsfiddle/pYw9P/

This should do it I think.

function disable_all() {
 var fs =  $("#fileserver"), span = $( "<span>" + fs.val() + "</span>");
 span.insertAfter(fs);
 fs.remove(); // or fs.hide(); in case you want it later.
}

Try:

HTML:

<input type="text" id="fileserver">
<button id="but">click!</button>

JS:

$( "#but" ).click(function() {
     var text=$( "#fileserver" ).val();
     $( "body" ).html(text);
});

DEMO

This should be helpful to you -

There are several way to achieve your task :

Solutions 1 -

function disable_all()
{
    $('#content').remove();
    $('#fileserver, button').hide();
    $('body').append("<div id='content'>" + $('#fileserver').val() + "</div>")
}

Working Fiddle

Solution 2 -

function disable_all()
{
   $("body").html($("#fileserver").val());
}

Working Fiddle

you can do this hiding the textbox

<input type="text" id="fileserver">
<div id="result"></div>
<button id="btn" >click!</button>

and

$(document).ready(function(){
    $("#result").hide();  
    $("#btn").click(function(){
        $("#result").text($("#fileserver").val());
        $("#fileserver").hide();
        $("#result").show();
    });
});

demo

The first "non-jQuery" answer...

your HTML:

<input type="text" id="fileserver">
<div style="display: none;" id="fileserver_text"></div>
<button id="btn">click!</button>

your Javascript:

document.getElementById('btn').onclick = disable_all;
function disable_all() {
    var input = document.getElementById('fileserver');
    var disp = document.getElementById('fileserver_text')
    disp.innerHTML = input.value; // get the text from the input and set the div text
    disp.style.display = 'block'; // show the div
    input.style.display = 'none'; // hide the input
}

JSFiddle

If you are using jQUery, this will help you, http://jsfiddle/DCak6/

function save(){
    $('input,textarea').each(function(){
        var $this = $(this);
        $this.after('<span class="value">' + $this.val() + '</span>');
        $this.remove();
    })
}

You may be better off with taking the text from the text field, copying the value and putting it into another div

<div id="textToCopy"></div>
<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>

<script type="text/javascript">
    function disable_all() { 
        $('#textToCopy').html($('#fileserver').val());
        $('#fileserver').hide();
    }
</script>