|
JavaScript - Total Price Using Jquery
Hello guys,
I'm having some problems with jquery.. What I'm trying to do is, a jquery script to show in real time the total price. I got this: Code: <li>Users</li>
<li>
<select name="users" id="users">
<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>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>
</li>
<li>Months</li>
<li>
<select name="months" id="months">
<option value='1'>1 Month</option>
<option value='2'>2 Months</option>
<option value='3'>3 Months</option>
<option value='4'>4 Months</option>
<option value='5'>5 Months</option>
<option value='6'>6 Months</option>
<option value='7'>7 Months</option>
<option value='8'>8 Months </option>
<option value='9'>9 Months</option>
<option value='10'>10 Months</option>
<option value="11">11 Months</option>
<option value="12">12 Months</option>
</select>
</li>
<div class="grand_total">
<h4 class="colr">Price</h4>
<ul>
<li class="price">$0.50</li>
</ul>
</div>
1 Month and 1 User price should be 0.50 USD +1 Month = + 0.50 USD + 1 User = + 0.50 USD Example: 5 Users + 2 Months = 3.50 USD I wanna make the jquery to show the total price at li class="price" Sorry, I'm newbie at jquery. Anyone could help me please? Thank you. 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 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>
Good day! I am new in javascript function. I have Javascript code for auto calculate here is the code: Code: <script type="text/javascript" language="javascript">
function autocalearn(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, TotEarn = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
TotEarn += val; //accumulate
}
}
var tot=Number(TotEarn) + Number(document.getElementById('Amount').value);
oForm.TotEarn.value = tot.toFixed(2);
//oForm.TotEarn.value = TotEarn.toFixed(2); //out
}
</script>
<!--Total Deduction AutoCompute-->
<script type="text/javascript" language="javascript">
function autocalded(oText)
{
if (isNaN(oText.value)) //filter input
{
alert('Numbers only!');
oText.value = '';
}
var field, val, oForm = oText.form, TotalDed = a = 0;
for (a; a < arguments.length; ++a) //loop through text elements
{
field = arguments[a];
val = parseFloat(field.value); //get value
if (!isNaN(val)) //number?
{
TotalDed += val; //accumulate
}
}
//oForm.TotalDed.value = TotalDed.toFixed(2); //out
var totded=Number(TotalDed) + Number(document.getElementById('Deductions').value);
oForm.TotalDed.value = totded.toFixed(2);
}
</script>
and now my problem is...I have a textbox for the overall total, and i want it automatic subtract the total earn and total deduction.. I will attach my codes for further understanding. Thank you in advance So, i have this code which retrieves php files for me using jquery and id love to get it working with Jquery history plugin. I tried modifying the code i got from the ajax demo to work for me, but i just couldnt do it as i do not know any javascript really.. ( actually what i tried was simply to change "#ajax-links a" to "#menu li a" and .html to .php ..but nothing.. :rolleyes: Id be very gratefull if someone would help me out with this one. All related code can be found bellow (the ones that should be needed anyways): This is the code that retrieves php files inside "#content" when item from "#menu li a" with the specified id is clicked Code: $(document).ready(function(){
//References
var change = $("#menu li a");
var loading = $("#loading");
var content = $("#content");
//Manage click events
change.click(function(){
//show the loading bar
showLoading();
//load selected section
if(this.id == "home")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/index.php", hideLoading);
content.slideDown();
}
else if(this.id == "secondpage")
{
change.load(this.className='current-page');
content.slideUp();
content.load("pages/secondpage.php", hideLoading);
content.slideDown();
}
else
{
//hide loading bar if there is no selected section
hideLoading();
}
});
//show loading bar
function showLoading(){
loading
.css({visibility:"visible"})
.css({opacity:"1"})
.css({display:"block"})
;
}
//hide loading bar
function hideLoading(){
loading.fadeTo(1000, 0);
};
});
Heres the structure of the menu/content Code: <ul id="menu"> <li><a id="home" class="normal" href="#Home"></a></li> <li><a id="secondpage" class="normal" href="#Secondpage"></a></li> </ul> <div id="content"> <ul id="sec-menu"> <li><a id="link1" class="normal" href="#">Link1</a></li> <li><a id="link2" class="normal" href="#">Link2</a></li> </ul> </div> Heres the code that jquery history plugin uses in demo for ajax Code: jQuery(document).ready(function($) {
function load(num) {
$('#content').load(num +".html");
}
$.history.init(function(url) {
load(url == "" ? "1" : url);
});
$('#ajax-links a').live('click', function(e) {
var url = $(this).attr('href');
url = url.replace(/^.*#/, '');
$.history.load(url);
return false;
});
});
hi, i have a jquery problem... this script is not working with jquery-1.4.2.min, but it works with jquery-1.2.6.min.js, can anyone help me???the script is the above: (it is not working the tab actions, the slideout works...) http://www.benjaminsterling.com/wp-c...es/sidetab.htm the javascript code is the above: PHP Code: var jqsideTabs; var tabs, h = 50, r = 0,ra = 0; $(document) .ready(function(){ jqsideTabs = $('#sideTabs').addClass('closed'); tabs = jqsideTabs .find('.tab h3') .clone() .appendTo(jqsideTabs) .each(function(i){ var that = $(this), cls = '',ow,newThis, newEl; if( i == 0 ) cls = ' active'; newEl = $('<a href="#" class="tabLinks'+cls+'">' + that.text() + '</a>'); that.replaceWith(newEl); ow = newEl.outerWidth(); if( i == 0 ) ra = ow; else r = ow; h = newEl.css({'top':h , 'right': -ow }).height() + h; newThis = newEl.get(0); newThis.jq = newEl; newThis.i = i; newEl.click(function(){ var el = this.jq; if( jqsideTabs.hasClass( 'closed' ) ){ jqsideTabs.removeClass('closed'); } else if( !jqsideTabs.hasClass( 'closed' ) && el.hasClass('active') ){ jqsideTabs.addClass('closed'); } el .siblings() .removeClass('active') .css({'right': -r }) .end() .addClass('active') .css({'right': -ra }); tabs.eq( this.i ).show().siblings('.tab').hide(); return false; }); }) .end() .parent() .eq(0) .addClass('active') .end() .filter(':not(:eq(0))') .hide() .end(); jqsideTabs.bind("mouseleave",function(){ jqsideTabs .animate({left:-310}, 'fast', function(){ jqsideTabs.addClass('closed').removeAttr('style'); }); }); }); and the html file is: [HTML] <div id="sideTabs"> <div class="tab"> <h3>Tab 1</h3> <div class="gut"> <p>Some text</p> </div> </div> <div class="tab"> <h3>Tab 2</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> <div class="tab"> <h3>Tab 3</h3> <div class="gut"> <ul> <li>link</li> </ul> </div> </div> </div> [/HTML] the problem is that the tab button works, but the content doesnt change...in all of tabs showing the same text(showing all tbas content).... can anyone help...please..... i keep getting the error GET http://code.jquery.com/jquery.min.map net::ERR_TOO_MANY_REDIRECTS & Failed to load resource: net::ERR_TOO_MANY_REDIRECTS when i load my page...and the havascript doesn't work properly on ym page...how do i resolve this. thanx in advance I know im not supposed to use this for someone to write my codes for me but i need help with something the page AtreusComputers is what im working on at the bottom of the page is a price box which i might move to the side or the top later but right now just trying to get it to work here is my html page code Code: <html>
<head>
<title>ACS - Custom Computers</title>
<link rel="stylesheet" href="script.css" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19288524-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<script type="text/javascript" src="scripttest.js">
</script>
</head>
<body bgcolor="#000000" text="#ffffff">
<center>
<P align=center ><a href="http://www.atreuscomputerservices.com"><img src="webACSlogofinal.bmp" border="0"></a></P>
<P align=center ><FONT color="#ffffff" size=6 face="Palatino Linotype" ><STRONG><EM>Computer Customization</EM></STRONG></FONT></P>
</center>
<table width="100%" border="0">
<tr>
<td width="10%"></td>
<td width="457px"><center><img src="ACSbanner.bmp" width="457px" height="100%" /></center></td>
<td width="40%"></td>
<td width="20%">
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
</style>
<div class="cse-branding-right" style="background-color:#000000;color:#FFFFFF">
<div class="cse-branding-form">
<form action="http://atreuscomputers.99k.org/google.html" id="cse-search-box">
<div>
<input type="hidden" name="cx" value="partner-pub-3415227737255042:y4oouh-9ccq" />
<input type="hidden" name="cof" value="FORID:11" />
<input type="hidden" name="ie" value="ISO-8859-1" />
<input type="text" name="q" size="31" />
<input type="submit" name="sa" value="Search" />
</div>
</form>
</div>
<div class="cse-branding-logo">
<img src="http://www.google.com/images/poweredby_transparent/poweredby_000000.gif" alt="Google" />
</div>
<div class="cse-branding-text">
Custom Search
</div>
</div>
</td>
</tr>
<tr>
<td align="center" valign="top">
<script type="text/javascript"><!--
google_ad_client = "pub-3415227737255042";
/* 160x600, created 10/24/10 */
google_ad_slot = "6248958700";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</td>
<td width="457px" valign="top" bgcolor="#FFFFFF"><div id="header"><center>
<img id="caseimg" src="start.jpg" /></div>
</td>
<td>
<center>
<form action="#">
<h1>COMPONENTS</h1>
<select id="caseselect" style="width:625px" name="Items" class="select" onchange="swapImage()"; "priceUpdate()";>
<option id="49.99" value="start.jpg">Case</option>
<option id="49.99" value="COOLER MASTER Elite 310red.jpg">COOLER MASTER Elite 310 Red ($49.99)</option>
<option id="49.99" value="COOLER MASTER Elite 310blue.jpg">COOLER MASTER Elite 310 Blue ($49.99)</option>
<option id="49.99" value="COOLER MASTER Elite 310orange.jpg">COOLER MASTER Elite 310 Orange ($49.99)</option>
<option id="49.99" value="COOLER MASTER Elite 310silver.jpg">COOLER MASTER Elite 310 Silver ($49.99)</option>
</select> <br /><br />
<select id="powersupply" style="width:625px">
<option id="0" value="">Power Supply</option>
</select><br /><br />
<select id="motherboard" style="width:625px">
<option id="0" value="">Motherboard</option>
</select><br /><br />
<select id="cpu" style="width:625px">
<option id="0" value="">CPU</option>
</select><br /><br />
<select id="cooling" style="width:625px">
<option id="0" value="">Cooling</option>
</select><br /><br />
<select id="memory" style="width:625px">
<option id="0" value="">Memory</option>
</select><br /><br />
<h1>AUDIO & VIDEO</h1>
<select id="gpu" style="width:625px">
<option id="0" value="">Video</option>
</select><br /><br />
<select id="monitor" style="width:625px">
<option id="0" value="">Monitor</option>
</select><br /><br />
<select id="audio" style="width:625px">
<option id="0" value="">Audio</option>
</select><br /><br />
<select id="cooling" style="width:625px">
<option id="0" value="">Speakers</option>
</select><br /><br />
<h1>STORAGE & MEDIA</h1>
<select id="hd1" style="width:625px">
<option id="0" value="">Hard Drive 1</option>
</select><br /><br />
<select id="hd2" style="width:625px">
<option id="0" value="">Hard Drive 2</option>
</select><br /><br />
<select id="od1" style="width:625px">
<option id="0" value="">Optical Drive 1</option>
</select><br /><br />
<select id="od2" style="width:625px">
<option id="0" value="">Optical Drive 2</option>
</select><br /><br />
<select id="mediaread" style="width:625px">
<option id="0" value="">Media Reader</option>
</select><br /><br />
<h1>COMMUNICATION & NETWORKING</h1>
<select id="netadapt" style="width:625px">
<option id="0" value="">Network Adapter</option>
</select><br /><br />
<select id="wifi" style="width:625px">
<option id="0" value="">WiFi Adapter</option>
</select><br /><br />
<select id="router" style="width:625px">
<option id="0" value="">Router</option>
</select><br /><br />
<select id="modem" style="width:625px">
<option id="0" value="">Modem</option>
</select><br /><br />
<select id="usb" style="width:625px">
<option id="0" value="">USB Ports</option>
</select><br /><br />
<select id="bt" style="width:625px">
<option id="0" value="">Bluetooth</option>
</select><br /><br />
<h1>SOFTWARE</h1>
<select id="os" style="width:625px">
<option id="0" value="">Operating System</option>
</select><br /><br />
<select id="productsoftware" style="width:625px">
<option id="0" value="">Productivity Software</option>
</select><br /><br />
<select id="Secure" style="width:625px">
<option id="0" value="">Security Software</option>
</select><br /><br />
<h1>ACCESORIES</h1>
<select id="keyboard" style="width:625px">
<option id="0" value="">Keyboard</option>
</select><br /><br />
<select id="mouse" style="width:625px">
<option id="0" value="">Mouse</option>
</select><br /><br />
<select id="netcable" style="width:625px">
<option id="0" value="">Network Cable</option>
</select><br /><br />
<select id="cam" style="width:625px">
<option id="0" value="">Web Cam</option>
</select><br /><br />
<select id="surge" style="width:625px">
<option id="0" value="">Surge Protector</option>
</select><br /><br />
</form><br /><br />
<input type="text" id="total" value="?" width="625px"></input>
</center>
</td>
<td valign="top" align="center">
<script type="text/javascript"><!--
google_ad_client = "pub-3415227737255042";
/* 300x250, created 10/24/10 */
google_ad_slot = "4027168799";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script></td>
</tr>
</table>
</body>
</html>
and here is my js code Code: window.onload = initForm;
function swapImage(){
var image = document.getElementById("caseimg");
var dropd = document.getElementById("caseselect");
image.src = dropd.value;
}
function priceUpdate() {
var itemprice = document.getElementById("caseselect");
var box = document.getElementById("total")
box.value = itemprice.id;
}
*PARTS IN RED ARE WHAT IM WORKING ON Hello, I am having a little issue with creating an updating price script for my website. I tried to look at examples like those at Apple, Hp, Dell, and other sites that have the kind of script I am looking to create. The way I have my page is that it grabs data from my database when someone clicks my product, after that they go to the customize the product page. The price is supposed to change as they click and remove options. I just need a little help on where to start and how to update the price. I know Javascript is the coding but I have been struggling with it. Examples of the script can be found on the link below. There is also a snippet of my code I am working with.. Thanks in advance for some help. http://configure.us.dell.com/dellsto...en&s=dhs&cs=19 Code: <script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm();
}
//]]>
</script>
<form id="Options">
<div style="color:#F00"><?=$msg?></div>
<?php
if(is_array($_SESSION['cart'])){
$max=count($_SESSION['cart']);
for($i=0;$i<$max;$i++){
$pid=$_SESSION['cart'][$i]['productid'];
$pname=get_product_name($pid);
$price=get_price($pid);
$pdes=get_desc($pid);
$pdim=get_dimen($pid);
$pweight=get_weight($pid);
$pcode=get_code($pid);
$picture=get_pic($pid);
}
}
?>
<table width="850" border="0" cellpadding="8">
<tr>
<td width="50" align="left" colspan="2"><font color="#FF9933" size="+5" style="letter-spacing:20px;" ><?=$pname?></font><br />
<img src="<?=$picture?>" border="2" height="300" width="300"/>
</td>
<td width="275" align="left" colspan="2"><b>Description:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pdes?></font><br /><br />
<b>Product Code:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pcode?></font><br /><br />
<b>Dimensions:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pdim?></font><br /><br />
<b>Weight:</b> <font style="letter-spacing:4px; word-spacing:7px;"><?=$pweight?></font><br /><br />
<b>Price:</b> <big style="color:green">$</big><font style="letter-spacing:4px; word-spacing:7px;"><?=$price?></font><br /><br />
</td>
</tr>
<tr>
<td align="left" colspan="2"><img src="<?=$picture?>" border="2" height="50" width="50"/>
<img src="<?=$picture?>" border="2" height="50" width="50"/>
</td>
</tr>
<tr>
<td colspan="2" align="left"><font color="#FF9900" size="+4" style="letter-spacing:10px;">Fabric</font><hr color="#999999" size="5" width="400" align="left"/>
(Please describe the type of fabric you would like and we will try and match it. If you have a picture or link of a fabric style, please send along with item request.)
</td>
<td colspan="2" align="left"><font color="#FF9900" size="+4" style="letter-spacing:10px;">Handles</font><hr color="#999999" size="5" width="400" align="left"/>
(These handles are great for the children and adult type products)
</td>
</tr>
<tr>
<td colspan="2" align="left">
Check this box if you have your own fabric and would like to send to us.
<input name="own" type="checkbox" value="Own" id="chk0" /> <span id="txtPrice0">-5</span>
<input type="text" id="txtTotal" size="8" value="<?=$price?>"/>
<br />
Hi friends, I am collecting and selling football stickers. Yes, World Cup 2010 stickers. The album have 640 distinct numbers. Everytime I receive a list of that stickers to buy by the user I would need ckeck out the price list because some stickers have different price from another. For example Stickers numbers: 00, 000, 1, 2, 3, 4, 5 and 29 costs 3,00. The stickers number 31, 50, 69, 88, 107, 126, 202, 411, 392, 544 and 637 costs = 1,00. The stickers 30, 49, 68, 87, 106, 125 costs 0,25 The sticker from 32 to 48 51 to 67 70 to 86 89 to 105 (and so on) costs 0,25 I would be glad if someone could help me for building a script which read from a textarea numbers contents and create a "short report" with the stickers numbers followed by its price and total sum. Bob Kuspe Hallo. I am a total newbie to JavaScript coding, but I would like to have a price calculator on our internal website. It should calculate the square meter of the product and then multiply it with the square meter price, multiply it with quantity and then plus it with the startup cost. But... if the square meter extend 20 m2 the square meter price should be lower, and also lower when it hit 50 m2. And at 100 m2 it should write that you have to contact sales department. Can this be done with JavaScript? Here is an example: 6 pieces of 2 x 4 meter. 2x4 = 8 m2 6x8 = 48 total m2 48 m2 x price2 x startup = total price I really hope that someone can help me... //Daniel I am currently using a price calculator - although it's really not a calculator; I have to enter every price manually. Currently, it works in half inch increments. I need it to do two things that it doesn't do currently: 1) Allow the customer to enter a dimension in 1/4 inch increments (1/8 would be even better, but I'm not requesting a miracle) 2) Make the result automatically round up to the nearest 1/2 inch Page containing calculator External file: sizecalc.js I have a form that is working just fine the only thing is that I need to add a quantity field that will update the price. Can anyone help me with this please. I am not that good at javascript as you can see. I have gotten snippet from here and there to be able to create this form. Here is the code that I have at he moment: Code: <script type="text/javascript">
florida_tax_rate = .07;
function update_price(radio) {
price = parseFloat(radio.getAttribute("price"));
shipping = parseFloat(document.getElementById("shipping").innerHTML);
subtotal = document.getElementById("subtotal");
grand_total = document.getElementById("grand_total");
subtotal.innerHTML = price;
grand_total.innerHTML = (shipping + price).toFixed(2);
update_tax();
}
function update_tax() {
menu = document.getElementsByName("ShippingState")[0];
state = menu.value;
is_florida = state.match(/^(florida|fl)$/i);
price = parseFloat(document.getElementById("subtotal").innerHTML);
shipping = parseFloat(document.getElementById("shipping").innerHTML);
real_subtotal = price + shipping;
taxes = 0.00;
if (is_florida) {
taxes = real_subtotal * florida_tax_rate;
}
grand_total = document.getElementById("grand_total");
document.getElementById("taxes").innerHTML = taxes.toFixed(2);
grand_total.innerHTML = (real_subtotal + taxes).toFixed(2);
}
</script>
<form>
<input onchange="update_price(this);" type="radio" name="package" value="non-chamber" price="450.00" />
Non-Chamber Member (Qty: 0-5)<br />
<input name="non-chamber qty" type="text" id="non-chamber qty" value="" size="5" maxlength="999" />
Please Enter Your Quantity
<br />
<input onchange="update_price(this);" type="radio" name="package" value="chamber" price="425.00" />
Chamber Member (Qty: 0-5)<br />
<input name="chamber qty" type="text" id="chamber qty" value="" size="5" maxlength="999" />
Please Enter Your Quantity
<br />
<input onchange="update_price(this);" type="radio" name="package" value="standard" price="400.00" />
Bulk Orders (Qty: Over 5)<br />
<input name="bulk qty" type="text" id="bulk qty" value="" size="5" maxlength="999" />
Please Enter Your Quantity
<br />
<br /><br />
<div style="display:none;"><select onchange="update_tax();" name="ShippingState">
<option value="Florida" selected="selected">Florida</option>
</select></div>
<br />
Subtotal: $<span id="subtotal">0.00</span><br />
<div style="display:none;">Shipping: $<span id="shipping">0.00</span><br /></div>
Taxes: $<span id="taxes">0.00</span><br />
Grand Total: $<span id="grand_total">0.00</span><br />
<br />
<img src="http://www.paypal.com/en_US/i/btn/btn_paynowCC_LG.gif" onClick="document.paypalPayment.submit();" />
<input type="hidden" name="process" id="process" value="1" />
</form>
Thanks var s="attr" var i=$(s) // jQuery(elem).attr(attr,eval("elm"+attr)); jQuery(elem).$(s)(attr,eval("elm"+attr));//i tried this. how to assign a variable name in the above code(in place of s) so that i need to add an attribute to the element "elem". Hi all again, Firstly thanks to Philip M for getting me this far but i still have a few quirks that i'd like to get around. Its a price generator with 3 options. User selects an option from a drop down, inputs "number of words" and hey-presto the price appears. That works superbly well but what would be really cool is if after someone gets a price they then would like to select a different option in order to see a new price. At the moment it means selecting another option and re-entering the number of words and then clicking in the price box to get the new result. Is there anyway to make that price change automatically (as if by magic even) if either the "option" or "number of words" is changed I have a sneaky suspicion that Philip M will come to the rescue again but should anyone else have a view that would be great also. Thanks as always in advance, Phil Code: <head>
<!--quote generator -->
<script type="text/javascript">
function update(){
var price = document.getElementById("Package").value;
var words = document.getElementById("words").value;
var wordsOver2000 = words-2000;
if (wordsOver2000 <0) {wordsOver2000 = 0}
words = words - wordsOver2000;
var Tprice = ((price * words) + (price * .80 * wordsOver2000)).toFixed(2) ;document.getElementById("Totprice").value = Tprice;
document.getElementById("Totprice2").innerHTML = "Your Quote Total Is: MYR" + Tprice
}
</script>
<!--end quote generator -->
</head>
Code: <body>
<!--quote generator -->
<div align="center" class="generator">
PACKAGE - <select name="Package" id = "Package">
<option value="0.027">Economy</option>
<option value="0.038">Standard</option>
<option value="0.049">Express</option>
</select>
No. of Words -
<input type="text" id="words" onchange="update()" value="" />
---> MYR
<input type = "text" id = "Totprice" value="...then click here" /><br />
<br /><strong>(NB - To see a quote for a different package, please select package and re-enter the number of words)</strong>
</div>
<!--end quote generator -->
</body>
I'm trying to find a regular expression that will reject leading zeroes in a price unless the zero is the only digit before the decimal. So it will accept 0.03 but not 00.03 or 01.03. This is the best price validation I've been able to find so far /^\d+\.\d{2}$/ How do I modify it? Also, how do I use regex replace to trim all leading zeroes from a price except for the the one next to the decimal? |
|||||||