Needed: Javascript.help.please

Question

webdev2010 0 Newbie Poster

14 Years Ago

Hi,

So far most of my web development experience has been in HTML... I am looking to create a design form similar to one found at www.alliancetag.com. Basically I will just produce 2 colors of paper, 2 sizes, with 2 lines of text but I want the end user to be able to preview the item right on the screen. Any help would be appreciated... thanks in advance!

javascript

3 Contributors
16 Replies
273 Views
5 Months Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

zabijan commented: i want to know how is demo +0

Airshow 416 WiFi Lounge Lizard

14 Years Ago

So far most of my web development experience has been in HTML... I am looking to create a design form similar to one found at www.alliancetag.com. Basically I will just produce 2 colors of paper, 2 sizes, with 2 lines of text but I want the end user to be able to preview the item right on the screen. Any help would be appreciated... thanks in advance!

There is no form on that page. Is this a genuine question or thinly disguised spam?

Airshow

Ezzaral 2,714 Posting Sage

14 Years Ago

I'm guessing it's this interactive design form? https://alliancetag.com/tagdesign.aspx

Airshow 416 WiFi Lounge Lizard

14 Years Ago

OK, to show how sorry I am for questioning the authenticity of your post, here's something to get you started:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
body {
	font-family: arial;
	font-size:10pt;
}
.mainWrapper {
	width: 650px;
	padding: 5px;
	border: 1px solid #999;
}
.section {
	margin: 6px 0;
}
.section h3 {
	margin:0;
	font-family: arial;
	font-size:12pt;
}

.blackText { color: black; }
.blackBG { background-color: black; }
.blackBorder { border-color: black; }

.redText { color: red; }
.redBG { background-color: red; }
.redBorder { border-color: red; }

.greenText { color: green; }
.greenBG { background-color: green; }
.greenBorder { border-color: green; }

.purpleText { color: purple; }
.purpleBG { background-color: purple; }
.purpleBorder { border-color: purple; }

.blueText { color: blue; }
.blueBG { background-color: blue; }
.blueBorder { border-color: blue; }

.goldText { color: gold; }
.goldBG { background-color: gold; }
.goldBorder { border-color: gold; }

.colorWrapper {
	float: left;
	width:  40px;
	height: 30px;
	padding: 5px 0 0 0;
	border: 1px solid #FFF;
	text-align: center;
}
.colorSwatch {
	width:  30px;
	height: 20px;
}
.colorName {
}
#preview {
	width:  300px;
	height: 100px;
	border: 1px solid #999;
	padding: 10px;
}
#preview p {
	margin: 0;
	font-size: 7.5pt;
}
</style>

<script>
onload = function(){
	var i;
	var previewLine1 = document.getElementById('previewText1');
	var previewLine2 = document.getElementById('previewText2');

	var divs = document.getElementsByTagName('div');
	for(i=0; i<divs.length; i++) {
		if(divs[i].className.indexOf('colorWrapper')>-1) { 
			divs[i].onmouseover = function(){
				this.style.borderColor = this.getAttribute('color');
			};
			divs[i].onmouseout = function() {
				this.style.borderColor = '#FFF';
			};
			divs[i].onclick = function() {
				var color = this.getAttribute('color');
				//Here handle colour change in previewer, eg. ...
				previewLine1.style.color = color;
				previewLine2.style.color = color;
			};
		}
	}
	var inputs = document.getElementsByTagName('input');
	for(i=0; i<inputs.length; i++) {
		if( inputs[i].name == 'size' ) {
			inputs[i].onclick = function() {
				var size = this.value;
				//Here handle size change in previewer, eg. ...
				previewLine1.style.fontSize = (size == 'large') ? '10pt' : '7.5pt';
				previewLine2.style.fontSize = (size == 'large') ? '10pt' : '7.5pt';
			};
			if(inputs[i].checked) { inputs[i].onclick(); }
		}
		if( inputs[i].name == 'text1' ) {
			inputs[i].onblur = function() {
				previewLine1.innerHTML = this.value;
			};
			inputs[i].onblur();
		}
		if( inputs[i].name == 'text2' ) {
			inputs[i].onblur = function() {
				previewLine2.innerHTML = this.value;
			};
			inputs[i].onblur();
		}
	}
};
</script>
</head>

<body>

<div class="mainWrapper">
<div class="section">
	<h3>Select a colour</h3>
	<div class="colorWrapper" color="black"><div class="colorSwatch blackBG"></div><div class="colorName blackText">Black</div></div>
	<div class="colorWrapper" color="red"><div class="colorSwatch redBG"></div><div class="colorName redText">Red</div></div>
	<div class="colorWrapper" color="green"><div class="colorSwatch greenBG"></div><div class="colorName greenText">Green</div></div>
	<div class="colorWrapper" color="purple"><div class="colorSwatch purpleBG"></div><div class="colorName purpleText">Purple</div></div>
	<div class="colorWrapper" color="blue"><div class="colorSwatch blueBG"></div><div class="colorName blueText">Blue</div></div>
	<div class="colorWrapper" color="gold"><div class="colorSwatch goldBG"></div><div class="colorName goldText">Gold</div></div>
</div>

<div class="section" style="clear:both;">
	<h3>Select a size</h3>
	<input type="radio" id="size1" name="size" value="small" checked="checked"><label for="size1">Small</label>&nbsp;
	<input type="radio" id="size2" name="size" value="large"><label for="size2">Large</label>&nbsp;
</div>

<div class="section">
	<h3>Enter your text</h3>
	<input type="text" id="text1" name="text1" value="Text - line 1" size="100" maxlength="100"><br>
	<input type="text" id="text2" name="text2" value="Text - line 2" size="100" maxlength="100">
</div>
</div>

<div class="section">
	<h3>Preview</h3>
	<div id="preview">
		<p id="previewText1"></p>
		<p id="previewText2"></p>
	</div>
</div>

</body>
</html>

I have had to guess what the various choices (colour/size/text) mean and am most likely incorrect in my interpretation, but I think the overall framework should be about right - if I understand the problem correctly that is.

Have a look and see what you think.

Airshow

Edited 14 Years Ago by Airshow because: n/a

Ezzaral commented: Nice +10

Airshow 416 WiFi Lounge Lizard

14 Years Ago

WebDev,

I must say, the site looks very professional and congrats on getting the keyup code working.

You can actually simplify the things slightly by addressing the select/input elements directly rather than looping through the selects and inputs 'collections'.

//Attach event handlers to form elements
f.o2.onchange = function() { previewLine3.innerHTML = this.value; };
f.os0.onblur = f.os0.onkeyup = function() { previewLine1.innerHTML = this.value; };
f.os1.onblur = f.os1.onkeyup = function() { previewLine2.innerHTML = this.value; };

You can also code all the previewX.styly.yyyy statements and previewWrapper.style.backgroundImage = 'url(img/labels1b.jpg)' in CSS rather than javascript as their values are now static (for each label style).

That would leave some 11 lines of javascript in the onload function, which, with a little modification, can be the same for every label page:

onload = function(){
	f = document.getElementById('labeldesign');
	var previewWrapper = document.getElementById('previewWrapper');
	var previewLine1 = document.getElementById('previewLine1');
	var previewLine2 = document.getElementById('previewLine2');
	var previewLine3 = document.getElementById('previewLine3');
	//Attach event handlers to form elements
	if(previewLine3) {
		previewLine3.innerHTML = (f.heading[f.heading.selectedIndex].value);
		f.o2.onchange = function() { previewLine3.innerHTML = this.value; };
	}
	if(previewLine1) {
		previewLine1.innerHTML = f.text1.value;
		f.os0.onblur = f.os0.onkeyup = function() { previewLine1.innerHTML = this.value; };
	}
	if(previewLine2) {
		previewLine2.innerHTML = f.text2.value;
		f.os1.onblur = f.os1.onkeyup = function() { previewLine2.innerHTML = this.value; };
	}
};

The if clauses cater for the fact that not all label styles have all three preview fields.

You should now be able to put the above code in its own .js file (eg. label_preview.js) and include it in each of your labels pages with:

<script type="text/javascript" src="label_preview.js"></script>

Good luck

Airshow

webdev2010 commented: perfect! +1

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2010-04-10T00:50:12+00:00

Well found Ezzaral.

I suddenly feel I am on the verge making an apology.

Airshow

webdev2010 0 Newbie Poster · Answer 2 · 2010-04-10T06:20:54+00:00

I'm guessing it's this interactive design form? https://alliancetag.com/tagdesign.aspx

Yes it is the interactive form to create a label. This is what Im trying to create.

Thanks

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 3 · 2010-04-10T06:46:14+00:00

CSS needs some amendments for cross-broser purposes.

This should do it:

.colorWrapper {
	float: left;
	width:  45px;
	height: 45px;
	border: 1px solid #FFF;
}
.colorSwatch {
	position:relative;
	left: 5px;
	top: 5px;
	width:  35px;
	height: 20px;
}
.colorName {
	position:relative;
	top: 5px;
	text-align: center;
}

Airshow

webdev2010 0 Newbie Poster · Answer 4 · 2010-04-11T00:56:42+00:00

Yes, this is what I am looking to do. I think you have helped me get started in the right direction. Thank you so much. I will play around with it and see what I can come up with... Thank you again!

CSS needs some amendments for cross-broser purposes.

This should do it:

.colorWrapper {
	float: left;
	width:  45px;
	height: 45px;
	border: 1px solid #FFF;
}
.colorSwatch {
	position:relative;
	left: 5px;
	top: 5px;
	width:  35px;
	height: 20px;
}
.colorName {
	position:relative;
	top: 5px;
	text-align: center;
}

Airshow

webdev2010 0 Newbie Poster · Answer 5 · 2010-04-15T12:57:45+00:00

Hello and thanks for your help with the javascript. I have really tried hard to figure this thing out. I am just a little confused when it comes to javascript.

I have my form pretty much how I need it. I just need to figure out the preview portion.

There are two colors of labels (white and yellow)
There are two sizes of labels (1.5"x.75" and 2.0"x.75")
When you select the white label you have an option to add a barcode, but when you select the yellow label you do not.
There is an option for numbering sequence.. you can choose no numbering, start numbering at 000001, or you can create a custom number to start the sequence at.
The user can then choose a heading for the label or choose create their own and enter text.
The next field is to enter upto 2 lines of text.
and then choose quantity.

I created 12 images all the same size. My plan was to just use these as background images... depending on the options selected.

You can view the form and images at http://www.cpshopper.com/fmo/

•White Label
o 2.00”x0.75”
 Numbers Only - "label1.gif"
 Barcode Only - "label2.gif"
 Numbers + Barcode - "label3.gif"
 No Numbers +No Barcode - "label4.gif"
o 1.50”x0.75”
 Numbers Only - "label5.gif"
 Barcode Only - "label6.gif"
 Numbers + Barcode - "label7.gif"
 No Numbers +No Barcode - "label8.gif"

•Yellow Label
o 2.00”x.075”
 Numbers Only - "label9.gif"
 No Numbers - "label10.gif"
o 1.50”x.075”
 Numbers Only - "label11.gif"
 No Numbers - "label12.gif"

there are samples of what the label should look like when in the preview.

I might be making this harder than it has to be....

Please help

webdev2010 0 Newbie Poster · Answer 6 · 2010-04-15T23:38:29+00:00

Ok, I tried to create a function to bring up an image based on user input. I am not sure if this is the best way to do this or not.

<!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=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function dropdownlist(listindex)
{
 
document.labeldesign.subcategory.options.length = 0;
switch (listindex)
{
 
case "White" :
document.labeldesign.subcategory.options[0]=new Option("Select Symbology","");
document.labeldesign.subcategory.options[1]=new Option("No Barcode","No Barcode");
document.labeldesign.subcategory.options[2]=new Option("Barcode - Code 39","Barcode - Code 39");
document.labeldesign.subcategory.options[3]=new Option("Barcode - Code 128","Barcode - Code 128");
 
break;
 
case "Yellow" :
document.labeldesign.subcategory.options[0]=new Option("Barcode Not Avail for Yellow Label","");
 
break;
 
}
return true;
}
 
function tagHeading(obj)
{
   
	if (obj.options[obj.selectedIndex].value=='Create your Own') {
		document.getElementById('text3').style.display='block';
	}
	else {
		document.getElementById('text3').style.display='none';
	
	
	}
}
 
function tagHeading2(obj)
{
   
	if (obj.options[obj.selectedIndex].value=='Create your Own') {
		document.getElementById('text4').style.display='block';
	}
	else {
		document.getElementById('text4').style.display='none';
	
	
	}}
	
function changeImg(changeImg){

var labelSize = document.getElementById(labelsize[this.selectedIndex]).value
var labelColor=document.getElementById(labelcolor[this.selectedIndex]).value
var barcodeSymbology=document.getElementById(barcodesymbology[this.selectedIndex]).value
var numberingSequence=document.getElementById(numberingsequence[this.selectedIndex]).value

var displayImg;
var label1 =("http://www.cpshopper.com/fmo/images/label1.gif")
var label2 =("http://www.cpshopper.com/fmo/images/label2.gif")
var label3 =("http://www.cpshopper.com/fmo/images/label3.gif")
var label4 =("http://www.cpshopper.com/fmo/images/label4.gif")
var label5 =("http://www.cpshopper.com/fmo/images/label5.gif")
var label6 =("http://www.cpshopper.com/fmo/images/label6.gif")
var label7 =("http://www.cpshopper.com/fmo/images/label7.gif")
var label8 =("http://www.cpshopper.com/fmo/images/label8.gif")
var label9 =("http://www.cpshopper.com/fmo/images/label9.gif")
var label10 =("http://www.cpshopper.com/fmo/images/label10.gif")
var label11 =("http://www.cpshopper.com/fmo/images/label11.gif")
var label12 =("http://www.cpshopper.com/fmo/images/label12.gif")

if(labelSize == ('2.00"x0.75"') &&
   labelColor == ("White") &&
   barcodeSymbology == ("No Barcode") &&
   numberingSequence !=("No Numbers"))
{
	   displayImg = label1
}
else if(labelSize == ('2.00"x0.75"') &&
   labelColor == ("White") &&
   barcodeSymbology == ("Barcode - Code 39", "Barcode - Code 128") &&
   numberingSequence ==("No Numbers"))
{
	   displayImg = label2
}
else if(labelSize == ('2.00"x0.75"') &&
   labelColor == ("White") &&
   barcodeSymbology == ("Barcode - Code 39", "Barcode - Code 128") &&
   numberingSequence !=("No Numbers"))
{
	   displayImg = label3
}
else if(labelSize == ('2.00"x0.75"') &&
   labelColor == ("White") &&
   barcodeSymbology == ("No Barcode") &&
   numberingSequence ==("No Numbers"))
{
	   displayImg = label4
}
else if(labelSize == ("1.5x.075") &&
   labelColor == ("White") &&
   barcodeSymbology == ("No Barcode") &&
   numberingSequence !=("No Numbers"))
{
	   displayImg = label5
}
else if(labelSize == ("1.5x.075") &&
   labelColor == ("White") &&
   barcodeSymbology == ("Barcode - Code 39", "Barcode - Code 128") &&
   numberingSequence ==("No Numbers"))
{
	   displayImg = label6
}
else if(labelSize == ("1.5x.075") &&
   labelColor == ("White") &&
   barcodeSymbology == ("Barcode - Code 39", "Barcoe - Code 128") &&
   numberingSequence !=("No Numbers"))
{
	   displayImg = label7
}
else if(labelSize == ("1.5x.075") &&
   labelColor == ("White") &&
   barcodeSymbology == ("No Barcode") &&
   numberingSequence ==("No Numbers"))
{
	   displayImg = label8
}
else if(labelSize == ('2.00"x0.75"') &&
   labelColor == ("Yellow") &&
   numberingSequence !=("No Numbers"))
{
	   displayImg = label9
}
else if(labelSize == ('2.00"x0.75"') &&
   labelColor == ("Yellow") &&
   numberingSequence ==("No Numbers"))
{
	   displayImg = label10
}
else if(labelSize == ('"1.50x0.75"') &&
   labelColor == ("Yellow") &&
   numberingSequence !=("No Numbers"))
{
	   displayImg = label11
}
else if(labelSize == ('"1.50x0.75"') &&
   labelColor == ("Yellow") &&
   numberingSequence ==("No Numbers"))
{
	   displayImg = label12
}
}

</script>
</head>



<body>

<form id="labeldesign" name="labeldesign" method="post" action="submitform.asp" >
 
	<h3>Select a Label Size</h3>
	<input type="radio" id="labelsize" name="labelsize" value="labelsize1" checked="checked"><label for="labelsize1">1.50"x0.75"</label>&nbsp;&nbsp;&nbsp;&nbsp;
	<input type="radio" id="labelsize" name="labelsize" value="labelsize2"><label for="labelsize2">2.00"x0.75"</label>
  
	<h3>Select Material</h3>
	<input type="radio" id="material" name="material" value="small" checked="checked"><label for="material">Premium Polyester</label>

 

	<h3>Select a Label Color</h3>
    <select name="labelcolor" id="labelcolor" onchange="javascript: dropdownlist(this.options[this.selectedIndex].value); changeImg(this.options[this.selectedIndex].value)">
<option value="">Select Label Color</option>
<option value="White">White</option>
<option value="Yellow">Yellow</option>
</select>

	<h3>Barcode Symbology</h3>
    
<script type="text/javascript" language="JavaScript"> 
document.write('<select name="subcategory"><option value="">Select Symbology</option></select>')
</script>
<noscript><select name="barcodesymbology" id="barcodesymbology" >
<option value="">Select Symbology</option>
</select>
</noscript>

	<h3>Start Numbering Sequence at:</h3>
	<select name="numbersequence" id="numbersequence" onchange="tagHeading2 (this);">
    <option value="None">No Numbers</option>
    	<option value="Start at 000001">Start at 000001</option>
        <option value="Create your Own">Create your Own</option>
  </select>
  <input type="text" id="text4" name="text4" value="Numbering - line4" size="50" maxlength="50" style="display:none;"/>


	<h3>Select a Heading</h3>
	<select name="text3" id="sel" onchange="tagHeading (this);">
    	<option value="Reward">Reward</option>
        <option value="Property Of">Property Of</option>
        <option value="For Service Call">For Service Call</option>
        <option value="If Found Call">If Found Call</option>
        <option value="For Sales or Service Call">For Sales or Service Call</option>
        <option value="Installed By">Installed By</option>
        <option value="Invetory Tag">Inventory Tag</option>
        <option value="Belong's To">Belong's To</option>
        <option value="Caution">Caution</option>
        <option value="Create your Own">Create your Own</option>
  </select>
  
  <input type="text" id="text3" name="text3" value="Heading Tag - line1" size="50" maxlength="50" style="display:none;"/><p></p>

 
	<h3>Enter Your Text</h3>
	<input type="text" id="text1" name="text1" value="Text - line 1" size="30" maxlength="30"><br>
	<input type="text" id="text2" name="text2" value="Text - line 2" size="30" maxlength="30"><p></p>

	<h3>Quantity</h3>
	<select name="select">
    	<option value="30">30</option>
        <option value="60">60</option>
        <option value="90">90</option>
        <option value="120">120</option>
        <option value="150">150</option>
        <option value="180">180</option>
  </select>
</form>
																																																																																																																																																																						
	<div>				
    																																																																																																																																																																			
<img src="displayImg">

		<p id="previewText3"></p> <!--heading from drop down menu or create your own -->
		<p id="previewText1"></p> <!--Text - Line 1 -->
        <p id="previewText2"></p> <!--Text - Line 2 -->
        </center>
</div>
</body>
</html>

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 7 · 2010-04-17T07:15:51+00:00

Webdev,

That's looking really good.

I think it would benefit from dependence on fewer images. You may be able to get the gif count down to just 4 by building the preview in layers of absolutely positioned divs, including the color layer and barcodes. The images would be small-background, large-background, barcode-28 and barcode-128.

The barcodes would have transparent backgrounds to allow the color layer to show through. This is not strictly relevant unless you add another barcodable color at some time.

Then all you need is some fairly well organised HTML/CSS/Javascript to make it all happen.

Zipped files attached. Plenty of comments in code.

It is particularly easy to add new label colors. I just created "cream" by adding one line of javascript and one line of HTML. Search for "cream" to see how it's done.

Numbering for barcode 128 needs to be worked up. I think it's better to use two separate fields rather than padding out with spaces, to overcome availability/rendering of fonts in different browsers.

Airshow

webdev2010 0 Newbie Poster · Answer 8 · 2010-09-07T05:29:21+00:00

I can not seem to get the preview text to work properly. I tried to use onBlur for the two text boxes but it errors out... however onchange works for the drop down. I would really like for it to update in real time so as the user types it is show instantly.. but using setinterval makes my shopping cart freeze. Below is my code.

<script> 
onload = function(){
	f = document.getElementById('labeldesign');
	var previewWrapper = document.getElementById('previewWrapper');
	var previewLine1 = document.getElementById('previewLine1');
	var previewLine2 = document.getElementById('previewLine2');
	var previewLine3 = document.getElementById('previewLine3');
	

		//*** previewMain
		previewWrapper.style.backgroundImage = 'url(img/labels1b.jpg)'
		
 
		//*** previewLine3 (heading)
		previewLine3.innerHTML = (f.heading[f.heading.selectedIndex].value);
		previewLine3.style.width = '250px';
		previewLine3.style.top = '43px';
		previewLine3.style.left = '0px';
		previewLine3.style.fontSize =  '11pt';
		previewLine3.style.fontFamily = 'Arial';
		previewLine3.style.fontWeight = 'bold';

		//*** previewLine1
		previewLine1.innerHTML = f.text1.value;
		previewLine1.style.width = '250px';
		previewLine1.style.top = '43px';
		previewLine1.style.left = '0px';
		previewLine1.style.fontSize = '11pt';
		previewLine1.style.fontFamily = 'Arial Narrow';
		previewLine1.style.fontWeight = 'bold';
 
		//*** previewLine2
		previewLine2.innerHTML = f.text2.value;
		previewLine2.style.width = '250px';
		previewLine2.style.top = '39px';
		previewLine2.style.left = '0px';
		previewLine2.style.fontSize = '11pt' ;
		previewLine2.style.fontFamily = 'Arial Narrow';
		previewLine2.style.fontWeight = 'bold';

	
}
 
</script>

Here is my form:

<h2>Custom Label Configurator...</h2> 
	  
      Enter Label Text...
      <p>&nbsp;</p>
      <center>
      <div class="current" id="previewWrapper" style="position:relative; width:272px; height:136px;">
      	<div id="previewLine3" style="z-index:3;"></div>
		<div id="previewLine1" style="z-index:1;"></div>
		<div id="previewLine2" style="z-index:2;"></div>
	</div>
      
     <form id="labeldesign" action="https://www.e-junkie.com/ecom/gb.php?c=cart&i=1000501&cl=134165&ejc=2" target="ej_ejc" method="POST" accept-charset="UTF-8">
	<h3>&nbsp;</h3>
	<h3>Select a Heading</h3>
	<p>
	  <select name="o2" id="heading">
	    <option value="">None</option>
	    <option value="REWARD">Reward</option>
	    <option value="PROPERTY OF">Property Of</option>
	    <option value="FOR SERVICE CALL">For Service Call</option>
	    <option value="IF FOUND CALL" selected="selected">If Found Call</option>
	    <option value="FOR SALES OR SERVICE CALL">For Sales or Service Call</option>
	    <option value="INSTALLED BY">Installed By</option>
	    <option value="IVENTORY TAG">Inventory Tag</option>
	    <option value="BELONG'S TO">Belong's To</option>
	    <option value="CAUTION">Caution</option>
	    </select>
	</p>
<h3>Enter Your Text</h3>
	<p>Text Line 1: </br>
<input type="hidden" name="on0" value="Text - Line 1"/>
<input type="text" name="os0" value="Text - Line 1" maxlength="16" id="text1"/>

	<p>Text Line 2: </br>
<input type="hidden" name="on1" value="Text - Line 2"/>
<input type="text" name="os1" value="Text - Line 2" maxlength="16" id="text2"/>

<br/>
	  </p>
<h3>Quantity / Price</h3>
	<select name="o1">
<option value="30 pcs" selected="selected">30 pcs - $19.95</option>
<option value="60 pcs">60 pcs - $25.95</option>
<option value="90 pcs">90 pcs - $31.95</option>
<option value="120 pcs">120 pcs - $37.95</option>
<option value="150 pcs">150 pcs - $43.95</option>
<option value="180 pcs">180 pcs - $49.95</option>
  </select>

       <p>&nbsp;</p>
       <p>Your Selections:</p>
       <p>Material:  Premium Polyester <br />
         Label Size:
           <input name="o3" class="highlighted" value="1.00&quot;x0.50&quot;" size="11" readonly="readonly"></input>
<br />
         Label Color: White <br />
      Shipping: &nbsp;FREE</p>
       <p>
         <input type="image" src="http://www.e-junkie.com/ej/ej_add_to_cart.gif" border="0"  alt="Add to Cart" class="ec_ejc_thkbx" onClick="javascript:return EJEJC_lc(this.parentNode);"/>
       </p>
       <p>&nbsp;</p>
     </form>

webdev2010 0 Newbie Poster · Answer 9 · 2010-09-07T10:12:20+00:00

I decided to use onkeyup on the input text boxes. I noticed that onkeyup does not work in IE but it works fine in Firefox. Any ideas why?

The error in IE is:

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C)
Timestamp: Tue, 7 Sep 2010 04:12:59 UTC

Message: Object doesn't support this property or method
Line: 120
Char: 1
Code: 0
URI: file:///C:/Users/Admin/Desktop/c1000501.html

<h3>Enter Your Text</h3>
        <p>Text Line 1: </br>
          <input type="hidden" name="on0" value="Text - Line 1" />
          <input type="text" name="os0" value="Text - Line 1" maxlength="16" id="text1" onkeyup="onload(this.id)"/>
        </p>
        <p>Text Line 2: </br>
          <input type="hidden" name="on1" value="Text - Line 2"/>
          <input type="text" name="os1" value="Text - Line 2" maxlength="16" id="text2" onkeyup="onload(this.id)"/>
          <br/>
        </p>

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 10 · 2010-09-07T17:36:56+00:00

Webdev,

Did you ever try out my sample code as attached to my post above (16 April 2010)?

Both onblur and onkeyup can be made to work by changing the line :

el.onblur = go;

to

el.onblur = el.onkeyup = go;

This offers a 'belt & braces' approach.

Attaching the event handler in HTML (with onkeyup="...") will also work but there's no point trying to pass this.id to onload() as the function doesn't (currently) accept parameters.

It is recommended to attach events in javascript rather than HTML, primarily to avoid polluting the global namespace and to keep the code tidy.

Airshow

webdev2010 0 Newbie Poster · Answer 11 · 2010-09-07T18:33:40+00:00

Hi Airshow,

I did try out your sample code , basically I did take the preview part out of it. I did not know how to remove different features like color since i decided to just use an html page prior to the label design form so the user can see all the labels and choose which one he/she likes best. Then once they click on a label it can goto its own page, add the text, preview the label and add to cart. (integration of the shopping cart only allows for three variables) so I can have only 3 lines of text., this is with ejunkie. As for getting onkeyup working..

I see you have this from your original code:

var go = function(){
		setForm();
		buildPreview();
	};

	//Attach event handlers to form elements
	for(i=0; i<f.length; i++) {
		var el = f[i];
		if(el.tagName.toLowerCase() == 'input' && el.type == 'text') {
			el.onblur = go;
		}
		else if(el.tagName.toLowerCase() == 'input' && el.type == 'radio') {
			el.onclick = go;
		}
		else if(el.tagName.toLowerCase() == 'select') {
			el.onchange = go;
		}
	}
	go();//initialise form and preview.
};

I understand to take onkeyup and onchange out of html but how do I integrate your script into what I have now.. so that I can get onkeyup to work. when i put that back in it says f is undefined. Can i just set it to run onload function or change it so it will work with the modified code that I have done. The page is located at http://cpshopper.com/fmo/

<script type="text/javascript">
onload = function(){
	f = document.getElementById('labeldesign');
	var previewWrapper = document.getElementById('previewWrapper');
	var previewLine1 = document.getElementById('previewLine1');
	var previewLine2 = document.getElementById('previewLine2');
	var previewLine3 = document.getElementById('previewLine3');
	var previewLine4 = document.getElementById('previewLine4');
	

		//*** previewMain
		previewWrapper.style.backgroundImage = 'url(img/labels3b.jpg)'
		
 
		//*** previewLine3 (heading)
		previewLine3.innerHTML = (f.heading[f.heading.selectedIndex].value);
		previewLine3.style.width = '250px';
		previewLine3.style.top = '25px';
		previewLine3.style.left = '0px';
		previewLine3.style.fontSize =  '14pt';
		previewLine3.style.fontFamily = 'Arial';
		previewLine3.style.fontWeight = 'bold';

		//*** previewLine1
		previewLine1.innerHTML = f.text1.value;
		previewLine1.style.width = '250px';
		previewLine1.style.top = '28px';
		previewLine1.style.left = '0px';
		previewLine1.style.fontSize = '11pt';
		previewLine1.style.fontFamily = 'Arial Narrow';
		previewLine1.style.fontWeight = 'bold';
 
		//*** previewLine2
		previewLine2.innerHTML = f.text2.value;
		previewLine2.style.width = '250px';
		previewLine2.style.top = '28px';
		previewLine2.style.left = '0px';
		previewLine2.style.fontSize = '11pt' ;
		previewLine2.style.fontFamily = 'Arial Narrow';
		previewLine2.style.fontWeight = 'bold';
		
		//*** previewLine2
		previewLine4.innerHTML = f.text3.value;
		previewLine4.style.width = '250px';
		previewLine4.style.top = '28px';
		previewLine4.style.left = '0px';
		previewLine4.style.fontSize = '11pt' ;
		previewLine4.style.fontFamily = 'Arial Narrow';
		previewLine4.style.fontWeight = 'bold';
        
	};
	
	var go = function(){
	//Attach event handlers to form elements
	for(i=0; i<f.length; i++) {
		var el = f[i];
		if(el.tagName.toLowerCase() == 'input' && el.type == 'text') {
			el.onblur = el.onkeyup = go;
		}
		else if(el.tagName.toLowerCase() == 'input' && el.type == 'radio') {
			el.onclick = go;
		}
		else if(el.tagName.toLowerCase() == 'select') {
			el.onchange = go;
		}
	}
	go();//initialise form and preview.

	};
</script>

The above code does not make any change...

webdev2010 0 Newbie Poster · Answer 12 · 2010-09-08T12:47:16+00:00

ok after hours of playing around.. I figured it out...

//Attach event handlers to form elements
		var selects = document.getElementsByTagName('select');
	for(i=0; i<selects.length; i++) {
		
		if( selects[i].name == 'o2' ) {selects[i].onchange = function() {previewLine3.innerHTML = this.value}}
	}
	var inputs = document.getElementsByTagName('input');
	for(i=0; i<inputs.length; i++) {
		
		if( inputs[i].name == 'os0' ) {inputs[i].onblur = inputs[i].onkeyup = function() {previewLine1.innerHTML = this.value}}
		if( inputs[i].name == 'os1' ) {inputs[i].onblur = inputs[i].onkeyup = function() {previewLine2.innerHTML = this.value}}
		if( inputs[i].name == 'os2' ) {inputs[i].onblur = inputs[i].onkeyup = function() {previewLine4.innerHTML = this.value}}
}