CODEWITHSUNDEEP
javascriptjquery
kdjernigan
kdjernigan

Reputation: 397

Jquery : How to use 2 textboxes to make 1 HTML preview

I have 2 textareas: 1 for stylesheet and 1 for html. I need for them to be setup for jquery onkeyup to update a separate div with the id of preview. If either of them are typed in, everytime a key goes up, I need for preview to update. I'm basically creating an html preview.

I also need jquery to insert the following code into preview on every keyup

<html><head><style> --insert stylesheet text-- </style><body> --insert html text-- </body></html>

I tried typing something random to see if jquery would process it, but I don't know enough about jquery to even get something like this working really. But I did try...

jquery:

$(".updatepreview").keyup(function(){

        var textinput = '<html><head><style>'+ $('#stylesheet').val() +'</style></head><body>' + $('#html').val() +'</body></html>';


        $("#preview").val(textinput);

HTML:

    <textarea class="updatepreview" id="html" name="html"><H1>TEST</h1></textarea>
    <textarea class="updatepreview" id="stylesheet" name="stylesheet">h1 { color: #C0000E; }</textarea>

<div id="preview"></div>

Upvotes: 0

Views: 73

Answers (1)

denolk
denolk

Reputation: 770

try changing $("#preview").val(textinput); to $("#preview").html(textinput);

Upvotes: 4

Related Questions