PENDANT SELECTION

by Lucille Kenney

HTML

<!-- Left side with all the controls -->
		<div id='controls'>

					<h2>Pick a shape</h2>
						<div class="radioLeft">
							<label>
							<input type="radio" name="shapes" value="circle">circle
							</label>
							<input type="radio" name="shapes" value="square">
							<label>square</label>
							<input type="radio" name="shapes" value="heart">
							<label>heart</label>
							<br>
						</div>
						<br>
				<hr>
					<h2>Pick a metal</h2>
						<div class="radioLeft">
							<input type="radio" name="metals" value="silver" checked>silver
							<input type="radio" name="metals" value="bronze">
							bronze<br>
						</div><!--radioLeft-->
						<br>
				<hr>
					<h2>Pick a size</h2>
						<input type="radio" name="size" value="sm">sm
						<input type="radio" name="size" value="md" checked>md
						<input type="radio" name="size" value="lg">lg
	                    <br><br>
							This pendant costs: $<span id='output'>25.00</span>
						<br><br>

			<!-- Message -->	
				<h2>Type a message</h2>
					<input type='text' id='message' class="changeMe resetMe" maxlength="16"> 
					<div id='message-error'>Max 16 characters</div>
					<br>
					<!--Select font-->
				<h2>Select a different font and size?</h2>
	    			<select id="fs"> 
	        			<option value="Arial">Arial</option>
	        			<option value="Verdana ">Verdana </option>
	        			<option value="Impact ">Impact </option>
	        			<option value="CenturyGothic">Gothic</option>
	    			</select>
	    			<!--Select font size-->
	    			<select id="fontsize">
	        			<option value="12" selected>12 px</option>
	        			<option value="24">24 px</option>
	    			</select>
				<br><br>
          </div>
		</div><!--end controls-->

		<!-- Right side with the live preview -->
		<div id='preview'>
				<div id='preview-background'>
					<div id='canvas'>
						<div id='pendant-container'>
							<div id='pendant_c'>
//CONCATENATE THE INPUT VALUES SELECTED HERE!!!                          ...

JavaScript

/*----------------------------------------------------------------------
...
----------------------------------------------------------------------*/

	$('input:radio').change(function () {

		var c = document.getElementById("controls");
		var els = document.getElementsByTagName("input");
		//console.log(els);
		//console.log('This is the first input element: ' + els[0].value);

		for (var i = 0; i < els.length; i++) {    
		    if (els[i].type == "radio" && els[i].checked == true) {        
		        //console.log (els[i].value);
	    		//console.log('radio clicked: ' + els[i].value);
	    		//console.log('index 0 clicked: ' + els[1].value);
		   	}

	    // Concatenate 3 selected variables into an image url
            var imageURL = "images/" + 
                //$('[name|=els[i].value]:checked').val() + "-" + 
                $('this.els[3]:checked').val() + "-" + 
                $('this.els[i]:checked').val() + "-" +
                $('this.els[i]:checked').val() + ".png";
            console.log(imageURL);
                                                                                                                                          
	    //var imageURL = "images/" + shapes + "-" + size + "-" + metals + ".png";
	    //console.log(imageURL);

	    // Place the concatenated image string into image src
	    //var newImage = "<img src='" + imageURL + "'></img";
		//$('#pendant').html(newImage);
		    
		//printCost(shapes,size,metals);
		// console.log("I've changed");
		//console.log('[name|=shapes]:checked')
		    
		// Call to change character maximum when a new shape and/or size is clicked
		            //changeMaxLength($('[name|=shapes]:checked').val(),$('[name|=size]:checked').val());

		// Pass selected pendant valyes to id on paypal form
		//$('#paypalShapeSizeMetal').val(shapes + ' ' + size + ' ' + metals);*/
		    
		
		}

	    /*//var $this = $(this);
	    var shapes =  $('[name|=shapes]:checked').val();
	    var metals = ...