|
JavaScript - Order Form With Selects - Dynamic Price Change
Similar TutorialsI'm building an order form for a food delivery business website and I'm struggling of getting the page to display the total prices of the items on the order page before the order is sent. The form ideally consists of: Product 1 - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden) Product 2 - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden) ..... Product n - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden) Total price: (sum of all selected multiplied by the single prices) Name Telephone Address Postal Code Comment SUBMIT BUTTON What I have so far is: HTML: 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 content="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>COMIDA GREGA OLYMPO</title>
<style type="text/css">
.Subheader {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: large;
font-weight: normal;
font-style: normal;
font-variant: normal;
text-transform: none;
color: #000000;
text-decoration: none;
}
.Header {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: x-large;
font-weight: bold;
font-style: normal;
font-variant: normal;
text-transform: capitalize;
text-decoration: none;
}
.auto-style1 {
text-align: center;
}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<style type="text/css">
a.fancybox img {
border: none;
box-shadow: 0 1px 7px rgba(0,0,0,0.6);
-o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
}
a.fancybox:hover img {
position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
}
.auto-style2 {
border-style: solid;
border-width: 2px;
}
</style>
</head>
<body class="Subheader" style="background-image: url('bg.png')">
<p><br />
</p>
<table align="center" style="width: 940px" bgcolor="white" class="auto-style2">
<tr>
<td style="height: 33px"><span class="Header">HEADER IMAGE + LOGO</span></td>
</tr>
<tr>
<td style="height: 33px">
<table style="width: 100%">
<tr>
<td class="auto-style1" style="width: 17%">
<a href="#prediastia">ПРЕДЯСТИЯ</a></td>
<td class="auto-style1" style="width: 17%"><a href="#osnovni">
ОСНОВНИ</a></td>
<td class="auto-style1" style="width: 17%"><a href="#deserti">
ДЕСЕРТИ</a></td>
<td class="auto-style1" style="width: 17%"><a href="#napitki">
НАПИТКИ</a></td>
<td class="auto-style1" style="width: 17%"><a href="order.html">ПОРЪЧАЙ</a></td>
<td class="auto-style1" style="width: 15%">КОНТАКТИ</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<form name="contactform" method="post" action="send_form_email.php">
<table width="750px" align="center">
<tr>
<td valign="top" width="40%">
<label for="first_name">ГРЪЦКА САЛАТА</label>
</td>
<td valign="top" width="30%">
<input type="number" placeholder="0" name="gruckasalata" maxlength="5" size="5">
</td>
<td width="30%"><img class="fancybox" alt="" height="42" src="grucka-salata.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" />
</td>
</tr>
<tr>
<td valign="top" width="40%">
<label for="first_name">МУСАКА</label>
</td>
<td valign="top" width="30%">
<input type="number" placeholder="0" name="musaka" maxlength="5" size="5">
</td>
<td width="30%"><img class="fancybox" alt="" height="42" src="musaka.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" />
</td>
</tr>
<tr>
<td valign="top" width="40%">
<label for="first_name">ПЪЛНЕНИ ЧУШКИ</label>
</td>
<td valign="top" width="30%">
<input type="number" placeholder="0" name="pulnenichushki" maxlength="5" size="5">
</td>
<td width="30%"><img class="fancybox" alt="" height="42" src="palneni_chushki26.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" />
</td>
</tr>
<tr>
<td valign="top" width="40%">
<label for="first_name">СВИНСКО СЪС ЗЕЛЕ</label>
</td>
<td valign="top" width="30%">
<input type="number" placeholder="0" name="svinskosuszele" maxlength="5" size="5">
</td>
<td width="30%"><img class="fancybox" alt="" height="42" src="zele-sus-svinsko.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" />
</td>
</tr>
<tr>
<td valign="top">
<label for="first_name">Name *</label>
</td>
<td valign="top">
<input type="text" name="name" maxlength="50" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="email">Email Address *</label>
</td>
<td valign="top">
<input type="text" name="email" maxlength="80" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Telephone Number *</label>
</td>
<td valign="top">
<input type="text" name="telephone" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Address *</label>
</td>
<td valign="top">
<textarea name="address" maxlength="1000" cols="45" rows="6"></textarea>
</td>
</tr>
<tr>
<td valign="top">
<label for="telephone">Postal Code *</label>
</td>
<td valign="top">
<input type="text" name="postalcode" maxlength="30" size="30">
</td>
</tr>
<tr>
<td valign="top">
<label for="comments">Comments</label>
</td>
<td valign="top">
<textarea name="comments" maxlength="1000" cols="45" rows="6"></textarea>
</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
</td>
</tr>
</table>
</form></td>
</tr>
<tr>
<td><span class="Header">FOOTER</span></td>
</tr>
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
$(function($){
var addToAll = false;
var gallery = false;
var titlePosition = 'inside';
$(addToAll ? 'img' : 'img.fancybox').each(function(){
var $this = $(this);
var title = $this.attr('title');
var src = $this.attr('data-big') || $this.attr('src');
var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title);
$this.wrap(a);
});
if (gallery)
$('a.fancybox').attr('rel', 'fancyboxgallery');
$('a.fancybox').fancybox({
titlePosition: titlePosition
});
});
$.noConflict();
</script>
</body>
</html>
and the PHP: PHP Code: <?php if(isset($_POST['email'])) { // EDIT THE 2 LINES BELOW AS REQUIRED $email_to = "georgi.pepelyankov@gmail.com"; $email_subject = "COMIDA GREGA ORDER"; function died($error) { // your error code can go here echo "We are very sorry, but there were error(s) found with the form you submitted. "; echo "These errors appear below.<br /><br />"; echo $error."<br /><br />"; echo "Please go back and fix these errors.<br /><br />"; die(); } // validation expected data exists if(!isset($_POST['name']) || !isset($_POST['email']) || !isset($_POST['telephone']) || !isset($_POST['address']) || !isset($_POST['postalcode']) || !isset($_POST['gruckasalata']) || !isset($_POST['musaka']) || !isset($_POST['pulnenichushki']) || !isset($_POST['svinskosuszele']) || !isset($_POST['comments'])) { died('We are sorry, but there appears to be a problem with the form you submitted.'); } $name = $_POST['name']; // required $gruckasalata = $_POST['gruckasalata']; // not required $musaka = $_POST['musaka']; // not required $pulnenichushki = $_POST['pulnenichushki']; // not required $svinskosuszele = $_POST['svinskosuszele']; // not required $email_from = $_POST['email']; // required $telephone = $_POST['telephone']; // required $address = $_POST['address']; // required $postal_code = $_POST['postalcode']; // required $comments = $_POST['comments']; // not required $error_message = ""; $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/'; if(!preg_match($email_exp,$email_from)) { $error_message .= 'The Email Address you entered does not appear to be valid.<br />'; } if(strlen($error_message) > 0) { died($error_message); } $email_message = "Form details below.\n\n"; function clean_string($string) { $bad = array("content-type","bcc:","to:","cc:","href"); return str_replace($bad,"",$string); } $email_message .= "ГРЪЦКА САЛАТА: ".clean_string($gruckasalata)."\n"; $email_message .= "МУСАКА: ".clean_string($musaka)."\n"; $email_message .= "ПЪЛНЕНИ ЧУШКИ: ".clean_string($pulnenichushki)."\n"; $email_message .= "СВИНСКО СЪС ЗЕЛЕ: ".clean_string($svinskosuszele)."\n"; $email_message .= "Name: ".clean_string($name)."\n"; $email_message .= "Email: ".clean_string($email_from)."\n"; $email_message .= "Telephone: ".clean_string($telephone)."\n"; $email_message .= "Address: ".clean_string($address)."\n"; $email_message .= "Postal Code: ".clean_string($postalcode)."\n"; $email_message .= "Comments: ".clean_string($comments)."\n"; // create email headers $headers = 'From: '.$email_from."\r\n". 'Reply-To: '.$email_from."\r\n" . 'X-Mailer: PHP/' . phpversion(); @mail($email_to, $email_subject, $email_message, $headers); ?> <!-- include your own success html here --> Thank you for contacting us. We will be in touch with you very soon. <?php } ?> Please, can you help me integrate a total of all the selected prices to be displayed somewhere in the form? Thanks in advance! Regards, Georgi Hi all, im looking for some help with some javascript if thats ok. I am building a system for creating a booklet. I want the user to be able to select the quantity of booklets they require. (eg 50, 75, 100, 125) Then also select the number of pages each booklet will require. (eg. 4, 8, 12) both will be select drop down boxes. I would like the price to be calculated based on the selections and displayed on the page. It will be total price not price per booklet. This is how i have built up the prices in php. if($b_maxpages == '4' && $b_quantity == '50') { $amount = "95.00"; } elseif($b_maxpages == '4' && $b_quantity == '75') { $amount = "103.00"; } elseif($b_maxpages == '4' && $b_quantity == '100') { $amount = "115.00"; } elseif($b_maxpages == '4' && $b_quantity == '125') { $amount = "132.00"; } elseif($b_maxpages == '8' && $b_quantity == '50') { $amount = "147.00"; } elseif($b_maxpages == '8' && $b_quantity == '75') { $amount = "171.00"; } elseif($b_maxpages == '8' && $b_quantity == '100') { $amount = "194.00"; } elseif($b_maxpages == '8' && $b_quantity == '125') { $amount = "218.00"; } elseif($b_maxpages == '12' && $b_quantity == '50') { $amount = "190.00"; } elseif($b_maxpages == '12' && $b_quantity == '75') { $amount = "222.00"; } elseif($b_maxpages == '12' && $b_quantity == '100') { $amount = "255.00"; } elseif($b_maxpages == '12' && $b_quantity == '125') { $amount = "288.00"; } I will also need the selected data to be posted once the form is submitted. Cheers vince Hello I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page: http://www.watphotos.com/introductio...otography.html And here is the code in question: Code: <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
var initial = 0
var total = 0;
var services = 0;
function addServices()
{
initial = 150
total = initial
services = 0;
$("input:checked").each(function(){
value = $(this).attr("value");
services += parseInt(value);
});
}
$(function()
{
addServices();
total += services;
$("form").before('<p class="price"></p>')
$("p.price").text("Total Price: US$" + total);
});
$("input:radio, input:checkbox").click(function () {
addServices();
total += services
$("p.price").text("Total Price: US$" + total);
});
});
</script>
I have two questions... Question 1 How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky. I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this? Question 2 The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document? Thanks in advance! Anyone have any issues with Safari in relation to javascript compatibility? I have a page that loads dynamically through user selections as follows: There is a set of three radio buttons. The user selects one and a div opens revealing a select box populated with entries related to the radio button selection. When the user makes a selection from the select box, one of two things happen. 1) If there are child records relating to their selection, a second div opens revealing another select box containing the child entries relating to the first select box choice. Or 2) if there are no child entries relating to the selection in the first select box, a div opens displaying a description relating to the selection they made in the first select box. The data is all coming from prepopulated javascript arrays. This works like a dream in IE and Chrome. Unfortunately, when we were in the final stages of testing before release to a live environment, we discovered it works in Safari only as far as the user makes a selection from the three radio buttons driving the opening of the first div layer containing the first select. At this point it stops working completely. On top of that, I can not find where in the latest release of Safari, that I can see any javascript errors (or if I even can). I am REALLY in need of help. Anything you can offer? Thanks!! Dmxsmith I have two drop down lists , list1, list 2. I want it to change according to the radio button selected by the user. If the user selects radio button1, lists1 should be displayed. If the user selects radio button2, lists2 should be displayed. How can i achieve this using javascript. Please somebody help me. Hi, could someone please help. I have this code, and it currently outputs:"name-category" but I need it to output "category-name". Sorry if this is easy, I just keep getting errors! Code: highlightWork : function(workType) {
// remove all active classes
$(".work").removeClass("active");
for (var x=0;x<workTypes.length;x++) {
if (workType.toLowerCase()==workTypes[x][0].toLowerCase()) {
$("."+workTypes[x][0]+"-category").addClass("active");
// set current highlight
$("."+workTypes[x][0]).addClass("highlight");
} else {
// remove current highlights
$("."+workTypes[x]).removeClass("highlight");
if (workType.length!=0) {
$("."+workTypes[x][0].split(" ")[0]+"-category").addClass("inactive");
}
}
}
},
I use this code to clone an object. At the end I test the properties: Code: //cloning codes
function Clone(){}
function clone(obj) {
Clone.prototype = obj;
return new Clone();
}
//
var Orange={natu 'fruit',color:'orange'}
var Banana=clone(Orange);
for(a in Banana){
alert(a)
}
So far so good. I see: nature - > color But now I want to change a property of the Banana object, the color, then test again the properties: Code: Banana.color='green';
for(a in Banana){
alert(a)
}
Surprisingly, the changed property becomes the first in the loop, which is curious. I see now: color - > nature Can anyone explain me why? I understand that the last new created property comes always first (which I don't like, but I take it as it is), but I suppose that, in the case above, the property was already defined, and I did nothing but changing its value. Is there a way to keep the order within the prototype? Hi folks! I know this is a really simple script, but I'm still a beginner, still learning and struggling..haha thanks for sticking with me Anyway my aim here is to have x,y, or z Div come to the front onClick. I've figured out how to do it with two Div's (using the code below) but not with 3 or more. I'm not attached to the code, so if you want to suggest something totally different I am all ears! Thank you greatly! ian Code: <script>
function changeZunder() {
layer1.style.zIndex = 1;
layer2.style.zIndex = 2;
}
function changeZover() {
layer1.style.zIndex = 2;
layer2.style.zIndex = 1;
}
</script>
----
<body>
<div id="layer1" style="z-index: 1; position: absolute;" onClick="changeZover()">
FIRST BOX
</div>
<div id="layer2" style="z-index: 1; position: absolute;" onClick="changeZunder()">
SECOND BOX
</div>
</body>
Hi All, i know how to create a dynamic form or DIv ..but what i do not know is how to create a dynamic form/ or div into a previous dynamic one.. i need basically to see 5 dynamic forms / DIV in cascade where each one trigger the one coming after.. For what i need that : i have my user inserting information on the level 1. let say Copagny info 2- then he will be asked if he wants to add a sub level information ( subform) for that compagny or even many subforms at the same level .. and so on... 3- those sub level ( subforms ) can also call their respective subforms.. Any idea how to design this ? thanks Need help please asap. It might be simple but i couldn't work out the script. help! ---------------- Formfield.anzahl1 = number entered by customer Formfield.Price1 = Ergebnisfeld1 e.g. Anzahl1= 1 Price = 270 *if Anzahl1 = 2 then Price = 270*2 I need to do this for two form option. 2nd field would be as follows Formfield.Anzahl2= number entered by customer Formfield.Price2 = Ergebnisfeld2 Then Formfield.Total = Ergebnisfeld1 + Ergebnisfeld2 ------------------- How can I convert these above to javascript? For various reasons, I need the value of my drop down box options to contain size information rather than price. However I would like to be able to calculate a price for the items based on what size the user selects as well as the quantity. Below is the code I came up with (which doesn't work obviously) What can I do to get this to work for me? Thanks in advance for any help! Code: <head>
<script type="text/javascript">
<!--
function calc(A,B,SUM) {
var price = document.getElementById(A).extrainfo;
var quantity = document.getElementById(B).value;
document.getElementById(SUM).value = price * quantity;
}
//-->
</script>
</head>
<body>
<label>T-Shirt:
<select name="T_SHIRT" id="T_SHIRT" onchange="calc('T_SHIRT','Tshirt_QTY','total');">
<option selected="selected">CHOOSE A SIZE </option>
<option value="SIZE: SMALL" extrainfo="10.99">Small, 34/36 (S) </option>
<option value="SIZE: MEDIUM" extrainfo="11.99">Medium, 38/40 (M) </option>
<option value="SIZE LARGE" extrainfo="12.99">Large, 42/44 (L) </option>
</select>
</label>
<label>QTY:
<input type="text" id="Tshirt_QTY" name="Tshirt_QTY" onchange="calc('T_SHIRT','Tshirt_QTY','total')" />
</label>
<label>Price:
<input type="text" readonly="readonly" name="total" id="total"/>
</label>
</body>
I have a order form page and on submitting it opens a new web page that displays the order totals. Below is my code and most probably wrong but for me it seems logic. Please assist. Order Form: Code: <td colspan="1" height="120" align="left"> <select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359" onchange="calculateValue(this.form)"> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> </select> R359</td></tr> New page I called a unction to print: Code: function itemsOrdered() {
var beds = document.forms[2].prod_bed_359.value;
document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>");
document.write("<pre>Doggie Bed\t\t" + beds + "</pre>");
}
This is still basic as I need to get this right before adding the prices and totals which is also extracted from the order page. I have made a script where you can add extra fields, and next to the row is a span that automatically displays the outcome from a calculation of three fields in that row. i.e. Q x (B - A) = total. Here is the bit that does the calculation: Code: function advCalc(selected) {
var result = Number(document.formmain.elements["quantity"+selected].value) * (Number(document.formmain.elements["provideamount"+selected].value) - Number(document.formmain.elements["supplyamount"+selected].value)) ;
result = result.toFixed(2) ;
result = addCommas(result) ;
document.getElementById("total"+selected).innerHTML = result ;
}
The bit that adds a new row of fields is: Code: function addPart(divName){
var newdiv = document.createElement('div') ;
newdiv.setAttribute('id', 'partrow' + counter) ;
newdiv.setAttribute('style', 'clear:both;') ;
newdiv.innerHTML = "<div style='float:left;width:40px;text-align:center;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc('" + counter + "')\" id=' quantity " + counter + "' type='text' value='1' size='1'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 0px 0px 0px;'>\r<input id='manufacturer" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:95px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='partnumber" + counter + "'type='text' value='' size='9'/>\r</div>\r<div style='float:left;width:80px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='supplier" + counter + "'type='text' value='' size='4'/>\r</div>\r<div style='float:left;width:100px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='type" + counter + "'type='text' value='' size='6'/>\r</div>\r<div style='float:left;width:85px;text-align:left;margin:5px 5px 0px 0px;'>\r<input id='deliverytime" + counter + "'type='text' value='' size='13'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select id='supplyCurrency" + counter + "'>\r<option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\')\" id=' supplyamount " + counter + "'type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 0px 0px 45px;'>\r<select name='provideCurrency" + counter + "'><option value='pound' selected='selected'>£</option><option value='dol'>$</option><option value='euro'>€</option></select>\r</div>\r<div style='float:left;width:15px;text-align:left;margin:5px 5px 0px 0px;'>\r<input onkeyup=\"advCalc(\'" + counter + "\') id=' provideamount " + counter + "' type='text' value='' size='3'/>\r</div>\r<div style='float:left;width:20px;text-align:left;margin:5px 0px 0px 45px;'>\r<strong>£</strong>\r</div>\r<div style='float:left;width:40px;text-align:left;margin:5px 5px 0px 0px;'><span id=' total " + counter + "'></span></div> \r" ;
document.getElementById(divName).appendChild(newdiv) ;
counter++ ;
}
The problem I am having is that it works fine for the first row which is hardcoded as e.g. id="provideamount0" etc. It isn't working for any other fields added but I can't see what is wrong Hi, I am stumped. I have been trying unsuccesfully for three days to figure something out, and it has brought me here. I am a noob javascripter, so please bear with me. I have created a page with an input button that refers to a function: Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="generator" content="CoffeeCup HTML Editor (www.coffeecup.com)">
<meta name="created" content="Thu, 26 May 2011 03:39:57 GMT">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Meltmedia Web Intern Test</title>
<style type="text/css">
<!--
body {
color:#000000;
background-color:#FFFFFF;
}
a { color:#0000FF; }
a:visited { color:#800080; }
a:hover { color:#008000; }
a:active { color:#FF0000; }
-->
</style>
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<LINK REL=StyleSheet HREF="what.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript">
//function ChangeBackground()
<!--{
// document.getElementById("column2").style.backgroundColor="#ffbdaa";
// document.getElementById("row1").style.backgroundColor="#ffbdaa";
// document.getElementById("row3").style.backgroundColor="#ffbdaa";
// document.getElementById("row4").style.backgroundColor="#ffbdaa";
// document.getElementById("mainbody").style.backgroundColor="#f7d7cd";
// } -->
function ChangeBackground() {
var colors = document.getElementsByClassName("changeme");
//alert(colors.length);
for (var i = 0; i < colors.length; i++) {
if (colors[i].className="changeme") {
colors[i].style.backgroundColor="ffbdaa";
}
}
}
//if (document.getElementsByClassName('changeme')[5].style.backgroundColor="#e8e8e00") {
// document.getElementsByClassName('changeme')[5].style.backgroundColor="#ffbdaa";
// }
//div1 original color is #e8e8e8
//div2 original color is #e2ebe4
//tablerows original color is #ccddd0
</script>
</head>
<body>
<div id="mainbody" class="changeme">
<img id="header" src="osx_header.jpg">
<div id="inset">
<div id="column1" class="column1">
<p class="text0">Lorem Ipsum Dolor Sit Amet</p>
<p class="text1">Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Aenean sed est et mi varius
euismod sed nec neque. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Maecenas ultricies pulvinar lacinia.
<a href="http://www.google.com/" rel="nofollow" target="_blank" style="color:blue">This is a link.</a>
</p>
<p class="text1" style="font-size:16px;">Lorem Ipsum Dolor Sit Amet</p>
<p class="text1">Sed a felis et eros gravida dignissim.
Quisque lobortis magna non purus vulputate
pellentesque. Mauris sit amet felis felis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam molestie lacinia arcu vitae pretium.<sup>2.3</sup>
</p>
<div id="unordered_list">
<ul id="blue_bullets">
<li>Vestibulum ante erat, laoreet quis pellentesque quis,
tincidunt fermentum turpis.
<li>Maecenas in mollis massa.
<ul>
<li>Ut tempus tincidunt molestie. Phasellus eget nulla
id erat scelerisque porttitor vel pharetra nibh.
<li>Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos.
</ul>
<li>Aenean ligula massa, tempor sed pulvinar sit amet, imperdiet a nisi.
</ul>
</div><!--end of ordered list-->
<div id="button">
<!-- <img src="btn-click-here.gif"> -->
<input type="button" onClick="ChangeBackground()" value=" ">
</div><!--end of button-->
<table id="table1">
<tr id="firstrow">
<th id="row1" class="changeme"></th>
<th id="row2" class="changeme"><strong>header1</strong></th>
<th id="row3" class="changeme"><strong>header2</strong></th>
<th id="row4" class="changeme"><strong>header3</strong></th>
</tr>
<tr>
<td>one</td>
<td>1234</td>
<td>bears</td>
<td>abcd</td>
</tr>
<tr>
<td>two</td>
<td>5678</td>
<td>beets</td>
<td>efgh</td>
</tr>
<tr>
<td>three</td>
<td>9101</td>
<td>battlestar</td>
<td>ijkl</td>
</tr>
<tr>
<td>four</td>
<td>1121</td>
<td>galactica</td>
<td>mnop</td>
</tr>
</table>
<!--end of table-->
<ol class="ordered">
<li>Integer molestie sodales risus eu commodo. <i>Duis eget est
dapibus neque congue</i> accumsan id eu nibh.
</li>
<li>Proin malesuada hendrerit lobortis. Integer et erat leo.
Praesent nec justo nulla. <i>Sed in dolor id neque faucibus
consequat.</i>
</li>
<li>Vestibulum sit amet justo id <strong>risus tempus ornare.</strong> Etiam
faucibus urna volutpat lorem dictum imperdiet.
</li>
</ol>
</div> <!--end of column1-->
<div id="column2" class="changeme">
<p class="text00"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></p>
<p class="text2">Aenean sed est et mi varius euismod sed nec neque.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas
ultricies pulvinar lacinia. Sed a felis et eros gravida dignissim.
Quisque lobortis magna non purus vulputate pellentesque.</p>
<p class="text2">Mauris sit amet felis felis. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Nullam molestie lacinia arcu
vitae pretium. Vestibulum ante erat, laoreet quis pellentesque quis,
tincidunt fermentum turpis. Maecenas in mollis massa. Ut tempus
tincidunt molestie.</p>
<p class="text2">Phasellus eget nulla id erat scelerisque porttitor
vel pharetra nibh. Class aptent taciti sociosqu ad litora torquent
per conubia nostra, per inceptos himenaeos. Aenean ligula massa, tempor
sed pulvinar sit amet, imperdiet a nisi. Nulla ullamcorper posuere dolor,
ac rutrum velit sollicitudin ac. Ut felis leo, ultricies a bibendum ac,
luctus semper massa.</p>
</div> <!--end of column2-->
</div> <!--end of inset-->
</div>
</body>
</html>
i would like to change certain style elements of the array each time the button is clicked. I have 5 color sets i would like use for the page, so i would like the button to trigger the color change in a loop, ie when the last color group is reached, the next click returns to the original color set and it continues again. This is a demo page, not for actually publication. I am trying to teach myself javascript and this is an idea that came to me. The things i want to change are the background color of two div's and the top row of a table. My style sheet is seperate, and I will also do the same for the javascript once I can get it to work properly. Thank you in advance for any help. Hi, I'm creating web application that picks out a randomly chosen image from google, and displays it in the browser window every time it is refreshed. What I'm struggling with is that I want the browser window to resize automatically to exactly fit the image displayed. I know how to resize a browser window, but I want it done dynamically. Can anyone help me with this? Hello guys, please help me in building an order form, the details. The order form consist of text box product quantity, unit price, total price, sub total price, tax, discount, grand total quantity and grand total price. There are 8 products so there will be 8 product quantity, unit price, total price text boxes. When a user enter the product quantity and unit price, the total price column should be automatically calculated e.g. if product quantity is 8, unit price is 2 then the total price should come to 16. The sub total price will be automatically calculated which should be the addition of all total prices so as the product quantity. The user will enter the tax and discount amount which should be calculated as percentage. Tax will be added to sub total and discount will be subtracted from sub total and then the total price will be displayed in the grand total text box. Please help me to develop this form. Thank You Hi, I need help with my javascript codes to finish my order form. The first problem I am encountering is this: I need the quantity to appear automatically in the total quantity for sub total. how is this? I have assigned TotalQuantity.value for the quantity. Thank you. You can see the image here. http://img821.imageshack.us/i/oderform.jpg/ Hi their, i'm trying to create an online order page i'm having probelms calculating totals from the options not sure if i've designed it correctly i have 3 select options (with 4 different products in each) a single checkbox for another single product and a final select tag for amounts (500/1000/2500/5000) i need to assign each select option a value then * it by the amount select am i best using onchange/an array or ditching select tags for something easier any help greatly appreciated Marty I have been playing with two options but just dont seem to get the coding right. Can someone please assist. Using ie9 but same problem with all browsers. first snippets. HTML: Code: <!-- Row 3, Col 3 purchase boxes --> <td colspan="1" height="120" align="left"> <input style="margin-left: 60px" type="text" name="bed_359" size="3" maxlength="3" onchange="calculateValue(this.form)" /> R359</td></tr> <!-- Row 10, Col 2 Order Value Box--> <td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="total" size="10" onfocus="this.form.elements[0].focus()" /> </td></tr> javaScript: Code: // Function to calculate order value
function calculateValue(orders) {
var orderValue = 0;
var value = 0;
var itemPrice = 0;
var itemQuantity = 0;
// Run through all the product fields
for(var i = 0; i < orders.elements.length; ++i) {
// Get the current field
formField = orders.elements[i];
// Get the fields name
formName = formField.name;
// Items price extracted from name
itemPrice = parseFloat(formName.substring(formName.lastIndexOf("_") + 1));
// Get the Quantity
itemQuantity = parseInt(formField.value);
// Update the OrderValue
if(itemQuantity >= 0) {
value = itemQuantity * itemPrice;
orderValue += value;
}
}
// Display the total
orders.total.value = orderValue;
}
Second code: Code: <!-- Row 9, Col 3 purchase boxes --> <td colspan="1" height="120" align="left"> <select style="margin-left: 60px" name="shirt" value="215" onchange="calculateValue(this.form)" /> <option value="0">0</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option></select> R215</td></tr> Java Code: // Function to calculate order value
function calculateValue(orders) {
var orderValue = 0;
var value = 0;
var itemPrice = 0;
var itemQuantity = 0;
// Run through all the product fields
for(var i = 0; i < orders.elements.length; ++i) {
// Get the current field
formField = orders.elements[i];
// Get the fields name
formValue = formField;
// Items price extracted from name
itemPrice = formField;
// Get the Quantity
itemQuantity = formField.selectedIndex;
// Update the OrderValue
if(itemQuantity > 0) {
orderValue += itemQuantity * itemPrice
}
}
// Display the total
orders.total.value = orderValue.toLocaleString();;
}
Please help its probably something simple. |
|||||||