A lil bit of Java Script

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
SheDesigns
Forum Commoner
Posts: 42
Joined: Tue Nov 18, 2008 9:51 am
Location: Buffalo, NY

A lil bit of Java Script

Post by SheDesigns »

I know this board is for PHP .. I know, but my boss is requiring me to use it... so anyone HELP? 8O

The total just keeps coming up 0.00 :banghead:

Here is the lovely HTML!

Code: Select all

 
Pick an ad:
<input type="radio" name="advertise" id="advertise" onChange="price_form()" value="250.00">  1/4 Page
<input type="radio" name="advertise" id="advertise" onChange="price_form()" value="500.00">  1/2 Page
<input type="radio" name="advertise" id="advertise" onChange="price_form()" value="750.00">  3/4 Page
<input type="radio" name="advertise" id="advertise" onChange="price_form()" value="1250.00">  Full Page
 
How many issues:
<input type="radio" name="numberofissues" id="numberofissues" value="1" onChange="price_form()"> 1
<input type="radio" name="numberofissues" id="numberofissues" value="2" onChange="price_form()"> 2
<input type="radio" name="numberofissues" id="numberofissues" value="3" onChange="price_form()"> 3
<input type="radio" name="numberofissues" id="numberofissues" value="4" onChange="price_form()"> 4
 
*A 3% online processing fee is added to the price of your order.
 
Subtotal: <input name="grandtotal" type="text" id="grandtotal" size="8" maxlength="8" readonly="true">
Grand Total: <input name="cctotal" type="text" id="cctotal" size="8" maxlength="8" readonly="true">
 
Here is the JavaScript:

Code: Select all

 
<script language="JavaScript">
function price_form() {
var grandtotal = 0;
var advertise = document.adform.advertise.value
var numberofissues = document.adform.numberofissues.value
if(numberofissues > 0){
    grandtotal = numberofissues * advertise
    grandtotal = formatCurrency(grandtotal);
    document.adform.grandtotal.value = grandtotal;
}else{
    document.adform.grandtotal.value = 0;
}
 
 
cctotal = grandtotal * 1.03; // add 3 % to all orders
cctotal = formatCurrency(cctotal);
document.adform.cctotal.value = cctotal;
 
grandtotal = formatCurrency(grandtotal);
document.adform.grandtotal.value = grandtotal;
 
}
 
function formatCurrency(num) {
   num = !isNaN(num) ? Math.round(num * 100) / 100 : 0;
   num.toString().indexOf(".") == -1 ? num += ".00" : void 0;
   while(/\.\d{0,1}$/.test(num)) num += "0";
  return num; }
</script>
 
Last edited by SheDesigns on Thu Feb 05, 2009 3:02 pm, edited 1 time in total.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Re: A lil bit of Java Script

Post by John Cartwright »

SheDesigns wrote:I know this board is for PHP .. I know, but my boss is requiring me to use it... so anyone HELP? 8O
Thats why we have a Client-Side forum :)

Moved to Client-Side.
mickeyunderscore
Forum Contributor
Posts: 129
Joined: Sat Jan 31, 2009 9:00 am
Location: UK

Re: A lil bit of Java Script

Post by mickeyunderscore »

Code: Select all

 
Pick an ad:
<form name="adform" id="adform">
    <input type="radio" name="advertise" id="ad_1" onChange="price_form()" value="250.00">  1/4 Page
    <input type="radio" name="advertise" id="ad_2" onChange="price_form()" value="500.00">  1/2 Page
    <input type="radio" name="advertise" id="ad_3" onChange="price_form()" value="750.00">  3/4 Page
    <input type="radio" name="advertise" id="ad_4" onChange="price_form()" value="1250.00">  Full Page
 
    How many issues:
 
    <input type="radio" name="numberofissues" id="is_1" value="1" onChange="price_form()"> 1
    <input type="radio" name="numberofissues" id="is_2" value="2" onChange="price_form()"> 2
    <input type="radio" name="numberofissues" id="is_3" value="3" onChange="price_form()"> 3
    <input type="radio" name="numberofissues" id="is_4" value="4" onChange="price_form()"> 4
 
    *A 3% online processing fee is added to the price of your order.
 
    Subtotal: <input name="grandtotal" type="text" id="grandtotal" size="8" maxlength="8" readonly="true">
    Grand Total: <input name="cctotal" type="text" id="cctotal" size="8" maxlength="8" readonly="true">
</form>
<script language="JavaScript">
    function price_form() {
        var grandtotal = 0;
        var numberofissues;
        var advertise;
        if(document.getElementById('ad_1').checked){
            advertise = document.getElementById('ad_1').value;
        }else if (document.getElementById('ad_2').checked){
            advertise = document.getElementById('ad_2').value;
        }else if(document.getElementById('ad_3').checked){
            advertise = document.getElementById('ad_3').value;
        }else if(document.getElementById('ad_4').checked){
            advertise = document.getElementById('ad_4').value;
        }
 
        if(document.getElementById('is_1').checked){
            numberofissues = document.getElementById('is_1').value;;
        }else if (document.getElementById('is_2').checked){
            numberofissues = document.getElementById('is_2').value;;
        }else if(document.getElementById('is_3').checked){
            numberofissues = document.getElementById('is_3').value;;
        }else if(document.getElementById('is_4').checked){
            numberofissues = document.getElementById('is_4').value;;
        }
 
        
        if(numberofissues > 0){
            grandtotal = numberofissues * advertise
            grandtotal = formatCurrency(grandtotal);
            document.adform.grandtotal.value = grandtotal;
        }else{
            document.adform.grandtotal.value = 0;
        }
 
 
        cctotal = grandtotal * 1.03; // add 3 % to all orders
        cctotal = formatCurrency(cctotal);
        document.adform.cctotal.value = cctotal;
 
        grandtotal = formatCurrency(grandtotal);
        document.adform.grandtotal.value = grandtotal;
 
    }
 
    function formatCurrency(num) {
        num = !isNaN(num) ? Math.round(num * 100) / 100 : 0;
        num.toString().indexOf(".") == -1 ? num += ".00" : void 0;
        while(/\.\d{0,1}$/.test(num)) num += "0";
        return num; }
</script>
That's one way to do it, give each radio a unique ID and then check each one after the other. If you are using a huge form with many radios though, you would be better off using a different technique such as looping through them to find which is checked.

Also, if you are going to do a lot of form stuff with JavaScript I'd recommend looking into using a JavaScript library (I use jQuery, but there are many others such as Dojo, scriptalicious) as they will save you a lot of time.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: A lil bit of Java Script

Post by pickle »

It's important to note 2 things:

1) Standards say you can't have multiple elements with the same ID. And ID is supposed to be unique throughout the entire document.
2) Make sure you do server-side verification of this. It wouldn't be too hard at all for me to submit a form that says I have a 4-issue full page advertisement for $0.00
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: A lil bit of Java Script

Post by kaszu »

Code: Select all

 
//Returns value of the input which is selected, if none is selected returns 0
function getSelectedValue(inp_list) {
    for(var i=0,j=inp_list.length; i<j; i++) {
        if (inp_list[i].checked) {
            return inp_list[i].value;
        }
    }
    
    return 0;
}
 
function price_form() {
    
    var grandtotal = 0;
 
    //PROBLEM WAS HERE, document.adform.advertise is returning list of items, not selected item
    var advertiseInputs = document.adform.advertise;
    var numberofissuesInputs = document.adform.numberofissues;
    
    //Get selected value for both radio button lists
    var advertise = getSelectedValue(advertiseInputs);
    var numberofissues = getSelectedValue(numberofissuesInputs);
    
    //Rest of the code is untouched
 
    if(numberofissues > 0){
        grandtotal = numberofissues * advertise
        grandtotal = formatCurrency(grandtotal);
        document.adform.grandtotal.value = grandtotal;
    }else{
        document.adform.grandtotal.value = 0;
    }
     
     
    cctotal = grandtotal * 1.03; // add 3 % to all orders
    cctotal = formatCurrency(cctotal);
    document.adform.cctotal.value = cctotal;
     
    grandtotal = formatCurrency(grandtotal);
    document.adform.grandtotal.value = grandtotal;
 
}
In IE onChange is fired only when input looses focus, not when value changes. Quick fix would be to add also onClick="price_form()" for each radio input.
Remove ids from the inputs, there is no need for them.
User avatar
SheDesigns
Forum Commoner
Posts: 42
Joined: Tue Nov 18, 2008 9:51 am
Location: Buffalo, NY

Re: A lil bit of Java Script

Post by SheDesigns »

Thank you guys so much, it works like a gem :)
Post Reply