How to make sure a radio button has been selected

Question

I am creating a conversion table that requires a user to input two numbers for example 5 and 9 and this will then produce a table from numbers 5 to 9 converting that from either miles to kilometres, or kilometres to miles. I have created two radio buttons one for miles to kilometres and another for kilometres to metres however when I type two numbers for example 2 and 5 and click convert it still shows the result, however I want it so that nothing happens until one of the radio button has been clicked.

<html>
<head>
<script>
function conversion(n)
{
<!--if(n<=1) return 1;-->
return n/0.62137;
}
function conversionTable(rangeStart, rangeEnd)
{
divStr="<table border=1><tr><td>Miles</td><td>Kilometres</td></tr>";
for(i=rangeStart;i<=rangeEnd;i++)
divStr+="<tr><td>" + i + "</td><td>" + conversion(i) + "</td></tr>";
document.getElementById("divResult").innerHTML=divStr;
}
function getnputValue()
{
return document.getElementById("rangeTxt").value;
}

 function check(){
 var radios = document.getElementsByName("choice");

 for (var i = 0, len = radios.length; i < len; i++) {
      if (radios[i].checked) {
          return true;
      }
 }

 return false;
 }

function atLeastOneRadio() {
return ($('input[type=radio]:checked').size() > 0);
}
</script>
</head>
<body>
<p>
Start : <input type=textbox id=rangeTxt value=""/>
Finish : <input type=textbox id=rangeTxt2 value=""/>
<input type=radio name="convert" id="mtokm" value ="Miles to Kilometre"/>    Miles to Kilometre
<input type=radio name="convert" id="kmtom" value ="Kilometre to Miles"/>  Kilometre to Miles
<br>
<br>
<button onClick="conversionTable(getnputValue(),    document.getElementById('rangeTxt2').value)">Convert</button>
</p>
<div id="divResult">
</div>
</body>
</html>

Answer 1

Your original code was pretty close, there's just two things to look into.

First, you'll want to change $('input[type=radio]:checked').size() to $('input[type=radio]:checked').length . Then add an if statement inside conversionTable() to make sure that a radio is checked.

Second, the text input values being passed to conversionTable() are being passed as strings , not integers . You can use parseInt() to convert them to integer values.

Something like this should work:

HTML

One small change to add parseInt() . You could consider removing the function parameters and instead getting the form values inside the function. It might clean up the code a little bit.

<button onClick="conversionTable(getnputValue(),parseInt(document.getElementById('rangeTxt2').value))">Convert</button>

JavaScript:

function conversion(n) {
    <!--if(n<=1) return 1;-->
    return n/0.62137;
}

function conversionTable(rangeStart, rangeEnd) {
    if(atLeastOneRadio()) {
        divStr="<table border=1><tr><td>Miles</td><td>Kilometres</td></tr>";
        for(i=rangeStart;i<=rangeEnd;i++) {
            divStr+="<tr><td>" + i + "</td><td>" + conversion(i) + "</td></tr>";
      }
        document.getElementById("divResult").innerHTML=divStr;
  }
}

function getnputValue() {
    return parseInt(document.getElementById("rangeTxt").value);
}

function atLeastOneRadio() {
    return ($('input[type=radio]:checked').length > 0);
}

You can see it working here: https://jsfiddle.net/oknh926a/

Hope that helps!

How to make sure a radio button has been selected

Question

1 answers

solution1
2 ACCPTED 2016-02-01 14:42:45

HTML

JavaScript:

How to make sure a radio button has been selected

Question

1 answers

solution1 2 ACCPTED 2016-02-01 14:42:45

HTML

JavaScript:

solution1
2 ACCPTED 2016-02-01 14:42:45