Page 1 of 1

JavaScript Selects a Radio Button?

Posted: Thu Feb 05, 2009 3:26 pm
by SheDesigns
Can this be done?

There are 4 advertising options: 2 are Per Issue, 2 are Annual.
If they select an Annual (ad_3) or (ad_4) option, I need it to check the 4 issue radio button (is_4), however not calculate it because if they purchase it annually, the price is majorly discounted.

However it does need to calculate the issues if they are using a Per Issue option.

Can it select (& would be nice, but not needed: make the buttons readonly - only if an annual option is selected) is_4 automatically when ad_3 or ad_4 is selected?
It has to show for the customers on this page, I have no other options.. :cry:

* Please note that I'm dealing with about 24 different advertising options (12 are Annual, 12 are Per Issue), I just cut down the code to 4 so it's understandable.

Code: Select all

 
<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;;
        }else { // Default is 1 issue
            numberofissues = document.getElementById('is_1').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>
 
& the HTML of it:

Code: Select all

 
Select your advertisement plan:
<input type="radio" name="advertise"  id="ad_1" onClick="price_form()" value="50"> Half Page - Single
<input type="radio" name="advertise"  id="ad_2" onClick="price_form()" value="100"> Full Page - Single
<input type="radio" name="advertise"  id="ad_3" onClick="price_form()" value="175"> Half Page - Annual
<input type="radio" name="advertise"  id="ad_4" onClick="price_form()" value="350"> Full Page - Annual
 
Select the number of issues:
<input type="radio" name="numberofissues" id="is_1" value="1" onClick="price_form()">
<input type="radio" name="numberofissues" id="is_2" value="2" onClick="price_form()">
<input type="radio" name="numberofissues" id="is_3" value="3" onClick="price_form()">
<input type="radio" name="numberofissues" id="is_4" value="4" onClick="price_form()">
 

Re: JavaScript Selects a Radio Button?

Posted: Fri Feb 06, 2009 11:57 am
by mickeyunderscore
You can modify the radio properties:

Code: Select all

<script type="text/javascript">    
    //disable radio
    document.getElementById('myRadio').disabled = true;
    //enable radio
    document.getElementById('myRadio').disabled = false;
    //check radio
    document.getElementById('myRadio').checked = true;
    //uncheck radio
    document.getElementById('myRadio').checked = false;    
</script>
Don't rely on this for input validation though, JavaScript can be turned off so make sure you double check all input using something server-side (PHP or whatever you are using).

Re: JavaScript Selects a Radio Button?

Posted: Sat Feb 07, 2009 1:58 pm
by JAB Creations
You can use the <noscript> element in an XHTML body though it's not really a desirable implementation. I would recommend having either an onload or onclick/onkeypress event that triggers the from to appear.

Also take advantage of Firefox's error console, if you fix any errors you encounter there you'll solidify your understanding of JavaScript while having a better idea of how to fix something if it breaks.