Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Using Javascript to Generate HTML Code into TextArea

    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?


    Code:
    <!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>

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    <textarea id="text"></textarea>

    document.getElementById('text').innerHTML = "\n <!-- ---------------- -->\n\n";
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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/jav...-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.

    Code:
    <!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>

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    you need to give the textarea an ID of "text" and try again....

  • #5
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

    Code:
    <!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>

  • #6
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    i think you should be using

    .innerHTML +=

    after the first .innerHTML =

  • #7
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    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.

    Code:
    <!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>
    Last edited by DanInMa; 02-26-2012 at 06:07 AM.

  • Users who have thanked DanInMa for this post:

    rossmosh (02-26-2012)

  • #8
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #9
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    awe3some. I added a few edits to get the document itself up to standard as well


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •