...

View Full Version : Using Javascript to Generate HTML Code into TextArea



rossmosh
02-25-2012, 07:02 PM
I've done a bit of searching and I can't find the answer to my question. I'm working on a website for my business. I have some basic knowledge of coding but I'm mostly a code cobbler. I find various pieces and put it together and hope it works so take it easy on me.

I have some code to display products on my site. It works fine. We just have a lot of products and for me to add each one by hand was getting ridiculous. I finally had the bright idea to use Javascript to generate the code for me and then copy it back into my actual HTML page. Last night I wrote the code below. It works perfectly except I have to constantly "View Source" in order to get the code. I was hoping to cut down on a step or two and have the code go into a TextArea. From there I can just select it and copy it into the HTML file. It should make things a little quicker and most importantly easier. Maybe after that I'll try to figure out how to write function to select everything in the TextArea and copy it to my clipboard. That would make things even faster.

Any help?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<SCRIPT LANGUAGE="JavaScript">

function calc (form) {

var images = form.images.value;
var imagesArray = images.split("\n");
var linebreak = "<br />";
var i=0;
var j=0;
var a=0;


while(i < imagesArray.length)
{
if(j==0)
{
document.write (" <!-- -------------------------------------------- -->\n");
document.write (" <div id=\"cols3-top\"></div>\n");
document.write (" <div id=\"cols3\" class=\"box\">\n");
}

a++;

if(j/2!=1)
{
if(a==imagesArray.length)
{
document.write ("\n <!-- ---------------- -->\n\n");
document.write (" <div class=\"col last\">\n");
document.write (" <h3>Header</h3>\n");
document.write (" <p class=\"nom t-center\">\n");
document.write (" <a href=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" class=\"nivoZoom center\"><img src=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" alt=\"" + imagesArray[i] +"\" height=\"200px\" /></a></p>");
document.write (" <!-- /col-text -->\n");
document.write (" <div class=\"col-itemnum\">PDU: " + imagesArray[i] + "</div>\n");
document.write (" </div>\n");
document.write (" <!-- /col -->\n");
document.write (" <hr class=\"noscreen\" />\n");
document.write (" </div>\n");
document.write (" <div id=\"cols3-bottom\"></div>\n");
document.write (" <!-- /Columns End Here -->\n\n\n");
break;
}
else
{
document.write ("\n <!-- ---------------- -->\n");
document.write (" <div class=\"col\">\n");
document.write (" <h3>Header</h3>\n");
document.write (" <p class=\"nom t-center\">\n");
document.write (" <a href=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" class=\"nivoZoom center\"><img src=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" alt=\"" + imagesArray[i] +"\" height=\"200px\" /></a></p>");
document.write (" <!-- /col-text -->\n");
document.write (" <div class=\"col-itemnum\">PDU: " + imagesArray[i] + "</div>\n");
document.write (" </div>\n");
document.write (" <!-- /col -->\n");
document.write (" <hr class=\"noscreen\" />\n");
i++;
j++;
}
}
else
{
document.write ("\n <!-- ---------------- -->\n\n");
document.write (" <div class=\"col last\">\n");
document.write (" <h3>Header</h3>\n");
document.write (" <p class=\"nom t-center\">\n");
document.write (" <a href=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" class=\"nivoZoom center\"><img src=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" alt=\"" + imagesArray[i] +"\" height=\"200px\" /></a></p>");
document.write (" <!-- /col-text -->\n");
document.write (" <div class=\"col-itemnum\">PDU: " + imagesArray[i] + "</div>\n");
document.write (" </div>\n");
document.write (" <!-- /col -->\n");
document.write (" <hr class=\"noscreen\" />\n");
document.write (" </div>\n");
document.write (" <div id=\"cols3-bottom\"></div>\n");
document.write (" <!-- /Columns End Here -->\n\n\n");
i++;
j=0;
}
}

document.close();
}

</script>

</head>

<body>
<div style="width:960px; margin:0 auto;">

<form name="myform" method="get" action="">
<textarea label="Image Names:"name="images" cols="30" rows="15" onclick="this.value=''" ></textarea>
<p>
<label>
<input type="button" name="calculate" value="Calculate" onClick="calc(this.form)"/>
</label>
</p>
</form>


</div>
</body>
</html>

felgall
02-25-2012, 09:26 PM
<textarea id="text"></textarea>

document.getElementById('text').innerHTML = "\n <!-- ---------------- -->\n\n";

rossmosh
02-26-2012, 12:48 AM
Thanks for the help.

I tried what you said as shown below and it did not do what I was looking for. I read up on the function here: http://www.tizag.com/javascriptT/javascript-innerHTML.php and based on that information it doesn't seem to do what I'd want it to do. I'm probably doing something wrong but to clarify:

I'd like wherever it says "document.write" to say some sort of command so it writes to a textarea box.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<SCRIPT LANGUAGE="JavaScript">

function calc (form) {
document.getElementById('text').innerHTML = "\n <!-- ---------------- -->\n\n"
}

</script>

</head>

<body>
<div style="width:960px; margin:0 auto;">

<form name="myform" style="width:200px" method="get" action="">
<textarea label="Image Names:"name="images" cols="30" rows="15" onclick="this.value=''" ></textarea>
<p>
<label>
<input type="button" name="calculate" value="Calculate" onClick="calc(this.form)"/>
</label>
</p>
<p>
<textarea name="text" cols="100" rows="15" onclick="this.value=''" ></textarea>
</p>
</form>

</div>
</body>
</html>

DanInMa
02-26-2012, 04:29 AM
you need to give the textarea an ID of "text" and try again....

rossmosh
02-26-2012, 05:37 AM
Now it writes to the text box but if I do the 3 lines as shown, it only shows the last line. It seems to be constantly writing over the information. This is the problem I had when I attempted to do this previously with a different method.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<SCRIPT LANGUAGE="JavaScript">

function calc (form) {
document.getElementById('text').innerHTML = "\n <!-- ---------------- -->\n\n";
document.getElementById('text').innerHTML = " <div id=\"cols3-top\"></div>\n";
document.getElementById('text').innerHTML = " <div id=\"cols3\" class=\"box\">\n";
}

</script>

</head>

<body>
<div style="width:960px; margin:0 auto;">

<form name="myform" style="width:200px" method="get" action="">
<textarea label="Image Names:"name="images" cols="30" rows="15" onclick="this.value=''" ></textarea>
<p>
<label>
<input type="button" name="calculate" value="Calculate" onClick="calc(this.form)"/>
</label>
</p>
<p>
<textarea id="text" name="text" cols="100" rows="15" onclick="this.value=''" ></textarea>
</p>
</form>

</div>
</body>
</html>

DanInMa
02-26-2012, 05:47 AM
i think you should be using

.innerHTML +=

after the first .innerHTML =

DanInMa
02-26-2012, 05:50 AM
something like this maybe

oh I fixed this up a bit, since you are using XHTML, a few things to note. - it likes certian thigns wrapped in cdata, and also the name attribute is deprecated in xhtml so I changed all the names to ids, and removed the inline css, and replaced it with an inline stylesheet instead. also language= on the script block is deprecated as well.

Forgot, its a good idea to use strict on your doctype with new documents.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<script type="text/javascript">
//<![CDATA[
function calc (form) {
mytextOBJ = document.getElementById('text');

mytextOBJ.innerHTML = "\n <!-- ---------------- -->\n\n";
mytextOBJ.innerHTML += " <div id=\"cols3-top\"><\/div>\n";
mytextOBJ.innerHTML += " <div id=\"cols3\" class=\"box\">\n";
}
//]]>
</script>
<style type="text/css">
/*<![CDATA[*/
#container {
width:960px;
margin : 0 auto;
}
#myform {
width:200px
}
/*]]>*/
</style>
</head>

<body>
<div id="container">
<form id="myform" method="get" action="">
<textarea id="images" cols="30" rows="15" onclick=
"this.value=''">
</textarea>

<p><label><input type="button" id="calculate" value="Calculate" onclick=
"calc(this.form)" /></label></p>

<p>
<textarea id="text" cols="100" rows="15" onclick="this.value=''">
</textarea></p>
</form>
</div>
</body>
</html>

rossmosh
02-26-2012, 05:51 AM
Dan, that did the trick. I had no clue about the += option. My last experience up until a few weeks ago with Javascript was probably 10 years ago.

Thanks everyone for their help.

DanInMa
02-26-2012, 06:05 AM
awe3some. I added a few edits to get the document itself up to standard as well



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum