|
JavaScript - Multiple Selects To Update The Price.
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 Similar TutorialsI have a script which allows me to select random users from one select field to another and works like a charm, but... I want to be able to get random users from one select field to multiple (lets say 2) other select fields... So lets say that I have 5 users in the first field (select1): James Bill Jennifer Bob Karen Now when I press a button: <input value="" type="button" onClick="randomusers();" /> 2 users should be moved to select2 and other 2 users moved to select3. My current script is as follows: Code: function randomusers(){
var given = 2, used = {}, randnum, opts = $('#select1 option'), olen = opts.length, hiddiv = $('#hiddendiv');
function ran() { // generate a unique random number
randnum = Math.floor(Math.random() * olen);
return used['u'+randnum] ? ran() : randnum;
}
for (var i = 0; i < given; i++) { // get the correct quantity of randoms
used['u'+ran()] = true;
}
var players = opts.filter(function(index) { // remove all options that are not one of the randoms
return !!used['u'+index];
}).appendTo('#select2');
}
Hoping for help... Thanks 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 />
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 Let me start by saying I am not the best in JavaScript, so any help would be much appreciated. What i am trying to do is allow a user to get a quote on how much an item would be if they wanted to sell it. all the data is being generated dynamically on the item and passed to this JavaScript correctly. The issue is when a user changes his mind and switches his options a few times the price goes out of wack and some times will actually be more then the original price. For example. If the item was in mint condition it would be 100 dollars. If it is " good condition" then it would loose lets say 20 percent, so it would be worth 80 dollars. Now each item has 3 sections of questions, what is the condition of the item, any "modifiers" like water damage or functional issues, and then third section is if its missing any parts or cables. All of this is being asked on 1 page, and when a user changes any of the options it should update the price on that page with out the user needing to press update. So condition goes, 100%, 70%, 40%, 20%. Modifiers are 50 percent of current price of item, so if it was "perfect (yes I know an item cant be perfect and have water damage but this is just an example) thus being 100 dollars, and has water damage, that would make it now worth 50 dollars, and has functional issues, now worth 25 dollars. If it was missing cables, it would loose lets say 5 dollars so now its worth 20 dollars. Thats an example on how i calculate the value of the items. So once again, the actual amount is being passed correctly to this script, but when you make to many changes its not happy. Here is the java code I have. Code:
function calculateTotal(inputItem,amount1,percent1) {
with (inputItem.form) {
// Process each of the different input types in the form.
if (inputItem.type == "radio") { // Process radio buttons.
// Subtract the previously selected radio button value from the total.
if (inputItem.name =="conditions")
{
if (percent1 ==100)
{
amount2= (amount1*percent1/100)-1;
}
if (percent1 ==70)
{
amount2 = (amount1*percent1/100)-2;
}
if (percent1 ==40)
{
amount2 = (amount1*percent1/100)-3;
}
if (percent1 ==20)
{
amount2 = (amount1*percent1/100)-4;
}
calculatedTotal.value = eval(amount2) ;
}
// Save the current radio selection value.
previouslySelectedRadioButton.value = eval(inputItem.value);
// Add the current radio button selection value to the total.
calculatedTotal.value = eval(calculatedTotal.value) + eval(inputItem.value);
} else { // Process check boxes.
if (inputItem.checked == false) { // Item was unchecked. Subtract item value from total.
if (inputItem.name =="modifiers1")
calculatedTotal.value = eval(calculatedTotal.value) / eval(percent1/100);
if (inputItem.name =="modifiers2")
calculatedTotal.value = eval(calculatedTotal.value) / eval(percent1/100);
if (inputItem.name =="extra1")
calculatedTotal.value = eval(calculatedTotal.value) + eval(percent1) ;
if (inputItem.name =="extra2")
calculatedTotal.value = eval(calculatedTotal.value) + eval(percent1) ;
if (inputItem.name =="extra3")
calculatedTotal.value = eval(calculatedTotal.value) + eval(percent1);
if (inputItem.name =="extra4")
calculatedTotal.value = eval(calculatedTotal.value) + eval(percent1) ;
} else { // Item was checked. Add the item value to the total.
if (inputItem.name =="modifiers1")
calculatedTotal.value = eval(calculatedTotal.value) * eval(percent1/100);
if (inputItem.name =="modifiers2")
calculatedTotal.value = eval(calculatedTotal.value) * eval(percent1/100);
if (inputItem.name =="extra1")
calculatedTotal.value = eval(calculatedTotal.value) - eval(percent1);
if (inputItem.name =="extra2")
calculatedTotal.value = eval(calculatedTotal.value) - eval(percent1);
if (inputItem.name =="extra3")
calculatedTotal.value = eval(calculatedTotal.value) - eval(percent1);
if (inputItem.name =="extra4")
calculatedTotal.value = eval(calculatedTotal.value) - eval(percent1);
}
}
// Total value should never be less than 0.
if (calculatedTotal.value < 0) {
InitForm();
}
// Return total value.
return(formatCurrency(calculatedTotal.value));
}
}
// Format a value as currency.
function formatCurrency(num) {
num = num.toString().replace(/\$|\,/g,'');
if(isNaN(num))
num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num*100+0.50000000001);
cents = num%100;
num = Math.floor(num/100).toString();
if(cents<10)
cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length-(1+i))/3); i++)
num = num.substring(0,num.length-(4*i+3)) + ',' + num.substring(num.length-(4*i+3));
return (((sign)?'':'-') + '$' + num + '.' + cents);
}
// This function initialzes all the form elements to default values.
function InitForm() {
// Reset values on form.
document.selectionForm.total.value='$0';
document.selectionForm.calculatedTotal.value=0;
document.selectionForm.previouslySelectedRadioButton.value=0;
// Set all checkboxes and radio buttons on form to unchecked.
for (i=0; i < document.selectionForm.elements.length; i++) {
if (document.selectionForm.elements[i].type == 'checkbox' | document.selectionForm.elements[i].type == 'radio') {
document.selectionForm.elements[i].checked = false;
}
}
}
<!-- Paste this code into the HEAD section of your HTML document
</script>
Any help would be greatly appreciated. this is my table: --------------------------------- Request| Project name| Quantity| --------------------------------- 1 | ABC | 20 | 2 | ABC | 4 | 3 | ABC | 11 | ---------------------------------- quantity is the column which i want to update, this value is displayed in text field. user can edit the quantity of all the request and update all the text field together. this is my update sql: <cfquery datasource="DB"> UPDATE tablename SET quantity = #Form.quantity# WHERE projectName = #projectName# I am getting error from WHERE clause. any idea how to solve it? thanks in advance The following code works find in firefox and chrome. In IE, it only works the first time I click on a link. Any ideas? Thanks in advance, // I have some div's where help is, which I make non-viewable <div id='help_guides'> <div id='issue1'>Help with issue 1</div> <div id='issue2'>Help with issue 2</div> </div> <a href="#" id="issue_1_link">Help with issue #1</a> <a href="#" id="issue_2_link">Help with issue #2</a> <div id='help'></div> // I grab the help guide div into a variable var issue_1_help = $('issue_1').remove(); var issue_2_help = $('issue_2').remove(); // When the help link is clicked, the help DIV displays the help guide Event.observe( $('issue_1_link'), 'click', function() { $('help').update( issue_1_help ); }); Event.observe( $('issue_2_link'), 'click', function() { $('help').update( issue_2_help ); }); Hi there, I am new to Java Script but had to delve into it to create the options for a form I wish to create. I downloaded chainedseletmenu from the following; http://www.dynamicdrive.com/dynamici...menu/index.htm I have the script working, so that you select a first option and a new box appears, then you select the next option and an aditional box appears and so on... This is fine, but I wish to only make additional selection boxes appear if certain options from the drop down lists are selected, but not for others. Also, I wish for users of my forms to be able to add options that are not yet available, I will give an example, lets say cars; if a user selects a make from the list, eg "Honda", a drop down selection list apears, the user then has the option to choose the "Type" of Honda, eg "Prelude", "Civic", "NSR" etc. I would like to be able to add an additional here; = "Not listed". When the "Not listed" is clicked, I would like to give my users the choice to enter the type (in this example, it could be "CRX") into an auto-appearing text box, after form submission, this could then be added the existing selection list for future users. I am aware that this requires use of a database and conection to tit, but for a start, can anyone guide me in the right direction, or does anyone have examples of such code that I can study and get an idea of what to do? This is for a non-profit educational site that I am trying to create for my learners! So would apprieciate any help I can get! Kind regards, Luke Hello, I have this search box form with 2 select boxes : Code: <form action="search.php" method="get"> <select name="RingType"> <option value="Nose">Nose</option> <option value="Toe">Toe</option> <option value="Belly">Belly</option> </select> <select name="NecklaceType"> <option value="gold">Gold</option> <option value="diamond">diamond</option> <option value="pearl">pearl</option> </select> <input type="text" size="60" name="keywords" /> <input class="submit" type="submit" value="Search" /> </form> For example, when a visitor selects "Belly" RingType, I want "Belly Ring" to appear in the search box. and when the visitor selects "pearl" NecklaceType, I want "pearl necklace" to appear in the search box. if the visitor first selects "Belly" RingType, and then selects "pearl" NecklaceType, I want "Belly Ring pearl necklace" to appear in the search box. After making his selections in the search box, if he types something in the search box, it should add to what is already there in the search box. Or, if he first types something in the search box for example, "jewelry" and then selects "pearl" in the necklacetype select box, the search box should show : "jewelry pearl necklace" Can you please show how to do this ? Thanks a lot. I currently have two html select list boxes side by side on a form, two buttons in between the boxes to move items from list box to the other, and a javascript function to control the movement of the items from one box to the other. Here is the javascript: Code:
function MoveSelected(from, to) {
var lstFrom = $(from);
var lstTo = $(to);
for (var i = 0; i<lstFrom.length;i++) {
if ( lstFrom[i].selected ) {
var elOptNew = document.createElement('option');
elOptNew.text = lstFrom[i].text;
elOptNew.value = lstFrom[i].value;
try {
lstTo.add(elOptNew, null); // standards compliant; doesn't work in IE
} catch(ex) {
lstTo.add(elOptNew); // IE only
}
}
}
for (var i = lstFrom.length-1; i>=0;i--) {
if ( lstFrom[i].selected ) {
lstFrom.options[i] = null;
}
}
}
Here are the two html form select list boxes (lstAvailProd is the starting list box that lists the initial data and lstSelectProd is the destination list box): Code:
<td width="10%" valign="center">
<a href="javascript: MoveSelected('lstAvailProd','lstSelectProd');"><IMG SRC="buttons/right_arrow.gif" style="padding-bottom: 2px;" /></a><br /><br />
<a href="javascript: MoveSelected('lstSelectProd','lstAvailProd');"><IMG SRC="buttons/left_arrow.gif" /></a>
</td>
I was wondering if anyone could tell me how I could modify my code to allow for the selection of all the data in the starting list box by only selecting and moving the first item in the list to the destination list box? The first item is called "All Products", so instead of actually selecting every product in the starting list and moving them to the destination list, I would like the code to see that if the "All Products" list item is moved to the destination list, move all the other list items in the destination list back to the starting list. Here's an example of what the code for each list box looks like: Starting List Box: Code:
<select name="lstAvailProd" id="lstAvailProd" multiple="true" size="8" style="width: 250px;">
<option value="-1">{All Products}</option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
<option value="4">Product 4</option>
<option value="5">Product 5</option>
</select>
Destination List Box: Code: <select name="lstSelectProd" id="lstSelectProd" multiple="true" size="8" style="width: 250px;"> </select> Any help would be appreciated, thanks!! 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 there, this is our first post, just stubmled across this awesome site. Need some help if anyone is able (and willing ). We are trying to make the best possible shopping experience for our customers. Objective: to give the customer a running total of what they're about to order, before they add to basket (kind of a quick quote). if you go to our test page: http://www.gatewrights.co.uk/page87.html we have got a form (boxed in red) which does indeed put the totals (of that form) in the totals box (on our form). As you should see if you test it. Now, I need to try and work out (but am really struggling) how to get it to work with the items on our form. Objective: to give the customer a running total of what they're about to order, before they add to basket (kind of a quick quote). I'll post the head js code and the body js code below. I have tried renaning the formID to 'frmOrder' (the same as the one boxed in red, and then moved that boxed one off page but it doesn't work. I suspect there is a little work to do (possibly in the value fields of our form). Hope it is clear, and I thank you for your time so far. -------------------------- js head code: Code: </script><script type="text/javascript" src="orderform04.js"></script> (plus) Code: <script type="text/javascript">
//<![CDATA[
window.onload = setupScripts;
function setupScripts()
{
var anOrder1 = new OrderForm();
}
//]]>
</script>
-------------------- js file uploaded to root directory (orderform04.js): Code: // mredkj.com
// OrderForm.js - v0.4
// v0.4 - 2007-02-01
// v0.3 - 2006-04-09
// v0.2 - 2006-04-08
// v0.1 - 2006-04-06
function OrderForm(prefix, precision, firstChoice) {
this.prefix = prefix ? prefix : '';
// ****************************
// Configure here
// ****************************
// names - Set these according to how the html ids are set
this.FORM_NAME = this.prefix + 'frmOrder';
this.BTN_TOTAL = this.prefix + 'btnTotal';
this.TXT_OUT = this.prefix + 'txtTotal';
// partial names - Set these according to how the html ids are set
this.CHK = this.prefix + 'chk';
this.SEL = this.prefix + 'sel';
this.PRICE = this.prefix + 'txtPrice';
// precision for the decimal places
// If not set, then no decimal adjustment is made
this.precision = precision ? precision : -1;
// if the drop down has the first choice after index 1
// this is used when checking or unchecking a checkbox
this.firstChoice = firstChoice ? firstChoice : 1;
// ****************************
// form
this.frm = document.getElementById(this.FORM_NAME);
// checkboxes
this.chkReg = new RegExp(this.CHK + '([0-9]+)');
this.getCheck = function(chkId) {
return document.getElementById(this.CHK + chkId);
};
// selects
this.selReg = new RegExp(this.SEL + '([0-9]+)');
this.getSelect = function(selId) {
return document.getElementById(this.SEL + selId);
};
// price spans
this.priceReg = new RegExp(this.PRICE + '([0-9]+)');
// text output
this.txtOut = document.getElementById(this.TXT_OUT);
// button
this.btnTotal = document.getElementById(this.BTN_TOTAL);
// price array
this.prices = new Array();
var o = this;
this.getCheckEvent = function() {
return function() {
o.checkRetotal(o, this);
};
};
this.getSelectEvent = function() {
return function() {
o.totalCost(o);
};
};
this.getBtnEvent = function() {
return function() {
o.totalCost(o);
};
};
/*
* Calculate the cost
*
* Required:
* Span tags around the prices with IDs formatted
* so each item's numbers correspond its select elements and input checkboxes.
*/
this.totalCost = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
var total = 0.0;
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
var price = orderObj.prices[itemNum];
var quantity = 0;
if (selObj) {
quantity = parseFloat(selObj.options[selObj.selectedIndex].text);
quantity = isNaN(quantity) ? 0 : quantity;
if (chkObj) chkObj.checked = quantity;
} else if (chkObj) {
quantity = chkObj.checked ? 1 : 0;
}
total += quantity * price;
}
}
if (this.precision == -1) {
orderObj.txtOut.value = total
} else {
orderObj.txtOut.value = total.toFixed(this.precision);
}
};
/*
* Handle clicks on the checkboxes
*
* Required:
* The corresponding select elements and input checkboxes need to be numbered the same
*
*/
this.checkRetotal = function(orderObj, obj) {
var regResult = orderObj.chkReg.exec(obj.id);
if (regResult) {
var optObj = orderObj.getSelect(regResult[1]);
if (optObj) {
if (obj.checked) {
optObj.selectedIndex = orderObj.firstChoice;
} else {
optObj.selectedIndex = 0;
}
}
orderObj.totalCost(orderObj);
}
};
/*
* Set up events
*/
this.setEvents = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
var itemNum = regResult[1];
var chkObj = orderObj.getCheck(itemNum);
var selObj = orderObj.getSelect(itemNum);
if (chkObj) {
chkObj.onclick = orderObj.getCheckEvent();
}
if (selObj) {
selObj.onchange = orderObj.getSelectEvent();
}
if (orderObj.btnTotal) {
orderObj.btnTotal.onclick = orderObj.getBtnEvent();
}
}
}
};
this.setEvents(this);
/*
*
* Grab the prices from the html
* Required:
* Prices should be wrapped in span tags, numbers only.
*/
this.grabPrices = function(orderObj) {
var spanObj = orderObj.frm.getElementsByTagName('span');
for (var i=0; i<spanObj.length; i++) {
if (orderObj.priceReg.test(spanObj.id)) {
var regResult = orderObj.priceReg.exec(spanObj.id);
if (regResult) {
orderObj.prices[regResult[1]] = parseFloat(spanObj.innerHTML);
}
}
}
};
this.grabPrices(this);
}
--- Now I hope this makes sense, and really appreciate any help you can offer. If anything is unclear, please let me know. ps is it something to do with "* Prices should be wrapped in span tags, numbers only."?? 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 a form where users will be making a selection in a drop down box. I need, essentially, to store two values: the first value is the actual value assigned with each drop down item (their label, basically), and the second value being a completely separate value that will change based on what they chose from the drop down box to begin with. Example: Drop down box contains selections A, B, C, D. User selects A, I need to keep the original dropdown box's A value in tact for the dropdown box's value, and then store a 1 in a hidden textbox. User selects B, a 2 is stored, etc. Both of these values will be e-mailed, hence the reason I chose a hidden textbox to store the second value. Additionally, I don't want the user to see the second value on the form itself. If there's a better way to accomplish this, please let me know. 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 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 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 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. |
|||||||