JavaScript - Multiplying Textbox Value by Radio Button Value

Asked By Máté Burján on 06-May-12 02:55 PM
Earn up to 10 extra points for answering this tough question.
Hi! I'm trying to make a simple calculator to multiply different radio button values with a user given textbox value, but I can't get the textbox value to work. It looks something like this:
the html form:
<form action="" id="calculate" onsubmit="return false;">
    <div>
      <div class="cont_order">
        <fieldset>
        Textbox value: <input type="text" id="val" name="val" value=""/>
        <br>
        <label class="radiolabel"><input type="radio" name="button" value="110">option 1</label>
        <br>
        <label class="radiolabel"><input type="radio" name="button" value="140">option 2</label>
        <br>
        <label class="radiolabel"><input type="radio" name="button" value="200">option 3</label>
        <br>
        <div id="result" style="display: block; ">Result:</div>
        </fieldset>
      </div>
      <input type="submit" id="submit" value="Submit" onclick="endresult()">
    </div> 
    </form>

the javascript:
vrbvalue rbvalues = new rbvalueray();
rbvalues["110"]=110;
rbvalues["140"]=140;
rbvalues["200"]=200;
 
function textboxvalue()
{
vrbvalue tavol = theForm.elements["val"].value;
}
 
function radiobuttonvalue()
{ 
  vrbvalue rbvalue=0;
  vrbvalue theForm = document.forms["calculate"];
  vrbvalue Button = theForm.elements["button"];
  for(vrbvalue i = 0; i < Button.length; i++)
  {
    if(Button[i].checked)
    {
      rbvalue = rbvalues[Button[i].value];
      break;
    }
  }
  return rbvalue;
}
 
function endresult()
{
  vrbvalue calculate = radiobuttonvalue()*textboxvalue();
  vrbvalue resbox = document.getElementById('result');
  cimke.style.display='block';
  cimke.innerHTML = "Result: "+calculate;
}
Note: the javascript is a separate file and the "function textboxvalue()" part is just a guess.
[)ia6l0 iii replied to Máté Burján on 07-May-12 12:32 PM
Lot's of changes to be done in your code.

Here's how I would rewrite:

<script type="text/javascript">
    function endresult(rb) 
    {
      var checkedValue = getCheckedValue(rb);
      var textboxValue = document.forms['calculate'].elements['val'].value;
      var result = checkedValue * textboxValue;
      document.getElementById('result').innerHTML = "Result:" + result;
    }
 
    //get checked radio button's value.
    function getCheckedValue(rb) {
      var rbl = rb.length;
 
      for (var counter = 0; counter < rbl; counter++) {
        if (rb[counter].checked) {
          return rb[counter].value;
        }
      }
    }
 
  </script>

And your html code as :

<form action="" id="calculate" onsubmit="return false;">
  <div>
    <div class="cont_order">
      <fieldset>
        Textbox value:
        <input type="text" id="val" name="val" value="" />
        <br>
        <label class="radiolabel">
          <input type="radio" name="button" value="110">option 1</label>
        <br>
        <label class="radiolabel">
          <input type="radio" name="button" value="140">option 2</label>
        <br>
        <label class="radiolabel">
          <input type="radio" name="button" value="200">option 3</label>
        <br>
        <div id="result" style="display: block;">
          Result:</div>
      </fieldset>
    </div>
    <input type="submit" id="submit" value="Submit" onclick="endresult(document.forms['calculate'].elements['button']);">
  </div>


Hope this helps.
Máté Burján replied to [)ia6l0 iii on 07-May-12 03:19 PM
Thank you! What is (rb) for?
Máté Burján replied to [)ia6l0 iii on 07-May-12 03:22 PM
Also, is it possible to mark your post helpful, or something that benefits you on this site?
Somesh Yadav replied to Máté Burján on 08-May-12 02:34 AM
All the radio buttons in a group must have the same name.

To find which of a group of radios has been checked:-

Code:

function getRad() {
for (var i =0; i <document.myformname.myradiogroupname.length; i++) {
if (document.myformname.myradiogroupname[i].checked) {
alert (document.myformname.myradiogroupname[i] + " was selected");
var val = document.myformname.myradiogroupname[i].value;
}
}
}

Make the values of your radios simply 1,2 and 3.
[)ia6l0 iii replied to Máté Burján on 08-May-12 02:37 AM

I used 'rb ' for the instance variable -  

document.forms['calculate'].elements['button']



You can mark the solution as helpful. That would do. :-;

Thank you.
Máté Burján replied to [)ia6l0 iii on 08-May-12 05:55 AM
Thank you.