Page 1 of 1

A lil bit of Java Script

Posted: Wed Feb 04, 2009 3:01 pm
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>
 

Re: A lil bit of Java Script

Posted: Wed Feb 04, 2009 3:03 pm
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.

Re: A lil bit of Java Script

Posted: Wed Feb 04, 2009 5:07 pm
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.

Re: A lil bit of Java Script

Posted: Wed Feb 04, 2009 5:15 pm
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

Re: A lil bit of Java Script

Posted: Wed Feb 04, 2009 5:19 pm
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.

Re: A lil bit of Java Script

Posted: Thu Feb 05, 2009 2:45 pm
by SheDesigns
Thank you guys so much, it works like a gem :)