Question

I realize this isn’t a new topic and that it has been asked before. I have read through various answers and, although I am getting better at Javascript, am confused by most of the responses.

I am asking my users to give a rating, where they rate both a category and company. I want Javascript to validate that both sets of radio buttons have an answer marked, and if possible, give separate alerts depending on the one that isn’t marked.

My code (omitting the tables they are wrapped in)

<form action="blah.php" method="post" onsubmit="return validaterating()"
name="ratings">

<input type="radio" name="categoryrate" value="5">
<input type="radio" name="categoryrate" value="4">
<input type="radio" name="categoryrate" value="3">
<input type="radio" name="categoryrate" value="2">
<input type="radio" name="categoryrate" value="1">

<input type="radio" name="companyrate" value="5">
<input type="radio" name="companyrate" value="4">
<input type="radio" name="companyrate" value="3">
<input type="radio" name="companyrate" value="2">
<input type="radio" name="companyrate" value="1">

</form>

Javascript:

function validaterating() {

var rate1 = document.forms.ratings.categoryrate;
var rate2 = document.forms.ratings.companyrate;

function validaterating() {
for (var i=0; i < rate1.length; i++) {
if (rate1[i].checked)
return true;
}
alert("Please rate the category.");
return false;
}

Now, I know this works to validate the first rating as I have it and is the validation setup that I think makes the most sense to me. However, I can’t get the second question (rate2) to validate. I’ve tried another for loop, using the && operator, and it stops working when I try to get the second to validate. Using the code as I’m writing it, how is that possible?

Thanks for your time.

Answer 1

http://jsfiddle.net/R5M5Y/

HTML

<form onsubmit="return test();" action="blah.php" method="post" name="ratings">
category:
<input type="radio" name="categoryrate" value="5">
<input type="radio" name="categoryrate" value="4">
<input type="radio" name="categoryrate" value="3">
<input type="radio" name="categoryrate" value="2">
<input type="radio" name="categoryrate" value="1">
company:
<input type="radio" name="companyrate" value="5">
<input type="radio" name="companyrate" value="4">
<input type="radio" name="companyrate" value="3">
<input type="radio" name="companyrate" value="2">
<input type="radio" name="companyrate" value="1">
    <input type='submit' />
</form>

JavaScript

function test(){
  var category = document.getElementsByName("categoryrate");
  var check1 = 0;
  for(i=0;i<category.length;i++){
    if(category[i].checked){
      check1++;
      break;
    }
  }
  var company = document.getElementsByName("companyrate");
  var check2 = 0;
  for(i=0;i<company.length;i++){
    if(company[i].checked){
      check2++;
      break;
    }
  }
  if(check1 && check2){
  }else{
    alert("you must select ratings for both company and category");
    return false;
  }
}