Adding values from radio button & select box

crayfiss

Hi, firstly I am a total freshie in all this. From what I have gathered on the web and this forum, I finally managed to get my form up.

I have a set of radio buttons with values to it and a select box with values too. Depending on the options selected from the two, the values will be calculated and displayed. everything worked fine with the calculation and im getting the right amount totalled up.

I only have one issue, whenever the radio button is clicked, the values gets updated but when a different option is selected from the select box it doesnt gets updated unless i click once more on the radio button.

Below is my code. Any kind of help is much appreciated. Thanks!

Expand|Select|Wrap|Line Numbers

 <!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 http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Untitled Document</title>

<style type="text/css">

<!--

.style1 {

    font-size: 18px;

    font-family: Arial, Helvetica, sans-serif;

}

.style8 {font-size: 11px; font-family: Arial, Helvetica, sans-serif; }

.style9 {font-size: 18px; font-family: Arial, Helvetica, sans-serif; color: #FF0000; }

.style10 {

    color: #CCCCCC

}

-->

</style>

<script type="text/javascript"> 

    function checkIt(el) { 

        var adType;

        if (el.value == 'hot_banner'){

            adType = 500

        }else if(el.value == 'hip_banner'){

            adType = 300

        }else if(el.value == 'cool_banner'){

            adType = 150

        }else if(el.value == 'top_text'){

            adType = 100

        }else if(el.value == 'tower_text'){

            adType = 80

        }else if(el.value == 'center_text'){

            adType = 150

        }
 
        var mths; 

        mths = document.getElementById("duration").value;

        document.getElementById("amount").value=parseInt(adType)*parseInt(mths);

    }

</script>

</head>
 
<body>

<table width="605" border="0" cellpadding="5" cellspacing="0" bgcolor="#F7F7F7">

  <tr>

    <td width="197" align="right" valign="top" class="style8">Select Advertising Location:</td>

    <td width="388" class="style8"><label>

      <input type="radio" name="type" id="hot_banner" value="hot_banner" onclick="checkIt(this)"/>

      Hot Cover Banner Package (S$500/month) <a href="#">See Location</a><br />

      <input type="radio" name="type" id="hip_banner" value="hip_banner" onclick="checkIt(this)"/>

      Hip Horizontal Banner Package (S$300/month) <a href="#">See Location</a><br />

      <input type="radio" name="type" id="cool_banner" value="cool_banner" onclick="checkIt(this)"/>

      Cool Tower Banner (Big) Package (S$150/month) <a href="#">See Location</a><br />

      <input type="radio" name="type" id="top_text" value="top_text" onclick="checkIt(this)"/>

      Happening Top Text Package (S$100/month) <a href="#">See Location</a><br />

      <input type="radio" name="type" id="tower_text" value="tower_text" onclick="checkIt(this)"/>

      Happening Tower Text Package (S$80/month) <a href="#">See Location</a><br />

      <input type="radio" name="type" id="center_text" value="center_text" onclick="checkIt(this)"/>

      Happening Center Text Package (S$150/month) <a href="#">See Location</a></label></td>

  </tr>

  <tr>

    <td align="right" class="style8">Select Advertisment Duration:</td>

    <td class="style8"><p>

      <select name="duration" id="duration">

        <option onchange="checkIt(this)" value="1" selected="selected">1 Month</option>

        <option onchange="checkIt(this)" value="2">2 Months</option>

        <option onchange="checkIt(this)" value="3">3 Months</option>

        <option onchange="checkIt(this)" value="4">4 Months</option>

        <option onchange="checkIt(this)" value="5">5 Months</option>

        <option onchange="checkIt(this)" value="6">6 Months</option>

        <option onchange="checkIt(this)" value="12">12 Months</option>

      </select>

    </p>

</td>

  </tr>

  <tr>

    <td colspan="2" align="center" class="style8"><span class="style9">S$<b>

    <input name="amount" type="text" id="amount" size="12" value="auto calculated" readonly="readonly"/>

    </b></span></td>

  </tr>

</table>

</body>

</html>

acoder

onchange should be added to the select element, not to each option.

crayfiss

Ahh.. thats where i went wrong. That really does the trick. Thanks so much.

But now, after selecting from the select box, I got a NaN but after clicking back on the radio button it outputs back the right calculation.

acoder

That's because you're using the same checkIt() function and passing it the select element as the argument (this) whereas it expects a radio button. What you should do is change checkIt to have no arguments (don't pass 'this' to it) and find the selected radio button using the checked property. Loop over the radio buttons until you find the checked one.

crayfiss

Hi acoder, once again thanks for pointing out my mistakes. I've tried to find out ways to do this but no matter what I tried I got myself lost further.

Could you assist me one last time by showing me how this can be done from amending my code. Thanks again.

crayfiss

Hi can anyone else help a newbie on this issue. I need to see a sample code. Thanks

acoder

Something like this would give you the checked radio button:

Expand|Select|Wrap|Line Numbers

 var checkedRadio;

var radios = document.getElementsByName("type");

for (var i = 0; i < radios.length; i++) {

  if (radios[i].checked) {

    checkedRadio = radios[i];

  }

}