# [tutorial/javascript] Prevent users from submitting blank or incomplete ratings



## victor_rambo (Nov 5, 2007)

source: Myself 

This script will be particularly helpful to webmasters who have 'Rate products', or 'Rate articles', etc rating tasks on a page.

Sometimes an user may send bl;ank rating(that would just increase your server load, or if automated may be heavy on resources). Also if many features of a product(a) are asked to be rated, people may sometimes justsubmit blank ratings(by mistake or lazy to rate all features.

For them, I have made a javascript that would prevent users from submitting incomplete or blank ratings.

See the script in action at: *javascript.biologyformhtcet.com/prevent_blank_ratings.html

Just try this at the script. Purposely don't rate any 1 feature of any one product and try to submit the ratings. You will receive an message saying that atleast one rating field is un-marked. So you have to mark all field if you have to submit!

Source code of script:

```
<head>
<script>
//This script has been written by Rohan Shenoy. Copyright 2007 http//www.javascript.biologyformhtcet.com
//above lines must remain intact for legal use.
rVB=0
rVB2=0
rVB3=0
rVB4=0
rVB5=0

function radioVBchecked()
{
rVB=1
}
function radioVB2checked()
{
rVB2=1
}
function radioVB3checked()
{
rVB3=1
}
function radioVB4checked()
{
rVB4=1
}
function radioVB5checked()
{
rVB5=1
}

<!-- Start for SMF-->
rSMF=0
rSMF2=0
rSMF3=0
rSMF4=0
rSMF5=0

function radioSMFchecked()
{
rSMF=1
}
function radioSMF2checked()
{
rSMF2=1
}
function radioSMF3checked()
{
rSMF3=1
}
function radioSMF4checked()
{
rSMF4=1
}
function radioSMF5checked()
{
rSMF5=1
}
<!-- Endfor SMF -->
<!-- start for PHPBB -->
rPHPBB=0
rPHPBB2=0
rPHPBB3=0
rPHPBB4=0
rPHPBB5=0

function radioPHPBBchecked()
{
rPHPBB=1
}
function radioPHPBB2checked()
{
rPHPBB2=1
}
function radioPHPBB3checked()
{
rPHPBB3=1
}
function radioPHPBB4checked()
{
rPHPBB4=1
}
function radioPHPBB5checked()
{
rPHPBB5=1
}
<!-- End for PHPBB -->
<!-- Start for MYBB -->
rMYBB=0
rMYBB2=0
rMYBB3=0
rMYBB4=0
rMYBB5=0

function radioMYBBchecked()
{
rMYBB=1
}
function radioMYBB2checked()
{
rMYBB2=1
}
function radioMYBB3checked()
{
rMYBB3=1
}
function radioMYBB4checked()
{
rMYBB4=1
}
function radioMYBB5checked()
{
rMYBB5=1
}
<!-- End for MYBB -->

//Here, in below lines, 20 means rate a total of 20 featutes together of any no. of products. If you want that user must rate atleast one feature of anyone product, set that value to 1.
function checkGLOBALRadioButtons()
{
checkVBRadioButtonScore=rVB+rVB2+rVB3+rVB4+rVB5
{
checkSMFRadioButtonScore=rSMF+rSMF2+rSMF3+rSMF4+rSMF5
{
checkPHPBBRadioButtonScore=rPHPBB+rSMF2+rSMF3+rSMF4+rSMF5
{
checkPHPBBRadioButtonScore=rMYBB+rMYBB2+rMYBB3+rMYBB4+rMYBB5
{
checkGLOBALRadioButtonsScore=checkVBRadioButtonScore+checkSMFRadioButtonScore+checkPHPBBRadioButtonScore+checkPHPBBRadioButtonScore
{
if (checkGLOBALRadioButtonsScore<20)
{
alert("Atleast one rating field is blank. Please do not leave any field blank")
}
else
{
alert("Thank you for submiting your ratings")
}
}
}
}
}
}
}

//You can replace that alert("Thank you for submitting your ratings.") with function of your choice like submittimg ratings


</script>
</head>

<body>
<font color="#0080C0" size="2" face="Tahoma">This would prevent users from
giving out blank ratings. Here, the condition is that user must <b><u>rate every
feature of every product</u></b>. Only then ratings can be submitted. If you
want, you can set it atleast one feature of any one product or atleast 1 feature
of every product. Give it a try here!</font>
<p>&nbsp;</p>
<table border="0" cellpadding="0" width="100%" cellspacing="0" bgcolor="#C2E7F9">
  <tr>
    <td width="20%"><b><font face="Tahoma" size="2" color="#000000">vBulletin</font></b></td>
    <td width="16%" valign="middle" align="center"><b><font face="Tahoma" size="2" color="#000000">1
      Sucks</font></b></td>
    <td width="16%" valign="middle" align="center"><b><font face="Tahoma" size="2" color="#000000">2
      Not so good</font></b></td>
    <td width="17%" valign="middle" align="center"><b><font face="Tahoma" size="2" color="#000000">3
      Will just do</font></b></td>
    <td width="17%" valign="middle" align="center"><b><font face="Tahoma" size="2" color="#000000">4
      Good enough</font></b></td>
    <td width="17%" valign="middle" align="center"><b><font face="Tahoma" size="2" color="#000000">5
      Outstanding</font></b></td>
  </tr>
  <tr>
    <td width="20%">Feature 1</td>
    <td width="16%" valign="middle" align="center">

<input type="radio" onclick="radioVBchecked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioVBchecked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVBchecked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVBchecked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVBchecked()"></td>
  </tr>
  <tr>
    <td width="20%">Feature 2</td>
    <td width="16%" valign="middle" align="center">
<input type="radio" onclick="radioVB2checked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioVB2checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVB2checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVB2checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVB2checked()"></td>
  </tr>
  <tr>
    <td width="20%">Feature 3</td>
    <td width="16%" valign="middle" align="center">
<input type="radio" onclick="radioVB3checked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioVB3checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVB3checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVB3checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVB3checked()"></td>
  </tr>
  <tr>
    <td width="20%">Feature 4</td>
    <td width="16%" valign="middle" align="center">
<input type="radio" onclick="radioVB4checked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioVB4checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVB4checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVB4checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVB4checked()"></td>
  </tr>
  <tr>
    <td width="20%">Feature 5</td>
    <td width="16%" valign="middle" align="center">
<input type="radio" onclick="radioVB5checked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioVB5checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVB5checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVB5checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioVB5checked()"></td>
  </tr>
</table>
<table border="0" cellpadding="0" width="100%" cellspacing="0" height="125" bgcolor="#DCF1FC">
  <tr>
    <td width="20%" height="21"><b><font face="Tahoma" size="2" color="#000000">Simple
      Machines Forum</font></b></td>
    <td width="16%" valign="middle" align="center" height="21"><b><font face="Tahoma" size="2" color="#000000">1
      Sucks</font></b></td>
    <td width="16%" valign="middle" align="center" height="21"><b><font face="Tahoma" size="2" color="#000000">2
      Not so good</font></b></td>
    <td width="17%" valign="middle" align="center" height="21"><b><font face="Tahoma" size="2" color="#000000">3
      Will just do</font></b></td>
    <td width="17%" valign="middle" align="center" height="21"><b><font face="Tahoma" size="2" color="#000000">4
      Good enough</font></b></td>
    <td width="17%" valign="middle" align="center" height="21"><b><font face="Tahoma" size="2" color="#000000">5
      Outstanding</font></b></td>
  </tr>
  <tr>
    <td width="20%" height="21">Feature 1</td>
    <td width="16%" valign="middle" align="center" height="21">

<input type="radio" onclick="radioSMFchecked()"></td>
    <td width="16%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMFchecked()"></td>
    <td width="17%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMFchecked()"></td>
    <td width="17%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMFchecked()"></td>
    <td width="17%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMFchecked()"></td>
  </tr>
  <tr>
    <td width="20%" height="21">Feature 2</td>
    <td width="16%" valign="middle" align="center" height="21">
<input type="radio" onclick="radioSMF2checked()"></td>
    <td width="16%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMF2checked()"></td>
    <td width="17%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMF2checked()"></td>
    <td width="17%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMF2checked()"></td>
    <td width="17%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMF2checked()"></td>
  </tr>
  <tr>
    <td width="20%" height="20">Feature 3</td>
    <td width="16%" valign="middle" align="center" height="20">
<input type="radio" onclick="radioSMF3checked()"></td>
    <td width="16%" valign="middle" align="center" height="20"><input type="radio" onclick="radioSMF3checked()"></td>
    <td width="17%" valign="middle" align="center" height="20"><input type="radio" onclick="radioSMF3checked()"></td>
    <td width="17%" valign="middle" align="center" height="20"><input type="radio" onclick="radioSMF3checked()"></td>
    <td width="17%" valign="middle" align="center" height="20"><input type="radio" onclick="radioSMF3checked()"></td>
  </tr>
  <tr>
    <td width="20%" height="21">Feature 4</td>
    <td width="16%" valign="middle" align="center" height="21">
<input type="radio" onclick="radioSMF4checked()"></td>
    <td width="16%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMF4checked()"></td>
    <td width="17%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMF4checked()"></td>
    <td width="17%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMF4checked()"></td>
    <td width="17%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMF4checked()"></td>
  </tr>
  <tr>
    <td width="20%" height="21">Feature 5</td>
    <td width="16%" valign="middle" align="center" height="21">
<input type="radio" onclick="radioSMF5checked()"></td>
    <td width="16%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMF5checked()"></td>
    <td width="17%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMF5checked()"></td>
    <td width="17%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMF5checked()"></td>
    <td width="17%" valign="middle" align="center" height="21"><input type="radio" onclick="radioSMF5checked()"></td>
  </tr>
</table>
<table border="0" cellpadding="0" width="100%" cellspacing="0" bgcolor="#C2E7F9">
  <tr>
    <td width="20%"><b><font size="2" face="Tahoma" color="#000000">phpBB</font></b></td>
    <td width="16%" valign="middle" align="center"><b><font size="2" face="Tahoma" color="#000000">1
      Sucks</font></b></td>
    <td width="16%" valign="middle" align="center"><b><font size="2" face="Tahoma" color="#000000">2
      Not so good</font></b></td>
    <td width="17%" valign="middle" align="center"><b><font size="2" face="Tahoma" color="#000000">3
      Will just do</font></b></td>
    <td width="17%" valign="middle" align="center"><b><font size="2" face="Tahoma" color="#000000">4
      Good enough</font></b></td>
    <td width="17%" valign="middle" align="center"><b><font size="2" face="Tahoma" color="#000000">5
      Outstanding</font></b></td>
  </tr>
  <tr>
    <td width="20%">Feature 1</td>
    <td width="16%" valign="middle" align="center">

<input type="radio" onclick="radioPHPBBchecked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioPHPBBchecked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBBchecked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBBchecked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBBchecked()"></td>
  </tr>
  <tr>
    <td width="20%">Feature 2</td>
    <td width="16%" valign="middle" align="center">
<input type="radio" onclick="radioPHPBB2checked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB2checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB2checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB2checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB2checked()"></td>
  </tr>
  <tr>
    <td width="20%">Feature 3</td>
    <td width="16%" valign="middle" align="center">
<input type="radio" onclick="radioPHPBB3checked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB3checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB3checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB3checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB3checked()"></td>
  </tr>
  <tr>
    <td width="20%">Feature 4</td>
    <td width="16%" valign="middle" align="center">
<input type="radio" onclick="radioPHPBB4checked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB4checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB4checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB4checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB4checked()"></td>
  </tr>
  <tr>
    <td width="20%">Feature 5</td>
    <td width="16%" valign="middle" align="center">
<input type="radio" onclick="radioPHPBB5checked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB5checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB5checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB5checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioPHPBB5checked()"></td>
  </tr>
</table>
<table border="0" cellpadding="0" width="100%" cellspacing="0" bgcolor="#DCF1FC">
  <tr>
    <td width="20%"><b><font size="2" face="Tahoma" color="#000000">MyBB</font></b></td>
    <td width="16%" valign="middle" align="center"><b><font size="2" face="Tahoma" color="#000000">1
      Sucks</font></b></td>
    <td width="16%" valign="middle" align="center"><b><font size="2" face="Tahoma" color="#000000">2
      Not so good</font></b></td>
    <td width="17%" valign="middle" align="center"><b><font size="2" face="Tahoma" color="#000000">3
      Will just do</font></b></td>
    <td width="17%" valign="middle" align="center"><b><font size="2" face="Tahoma" color="#000000">4
      Good enough</font></b></td>
    <td width="17%" valign="middle" align="center"><b><font size="2" face="Tahoma" color="#000000">5
      Outstanding</font></b></td>
  </tr>
  <tr>
    <td width="20%">Feature 1</td>
    <td width="16%" valign="middle" align="center">

<input type="radio" onclick="radioMYBBchecked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioMYBBchecked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBBchecked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBBchecked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBBchecked()"></td>
  </tr>
  <tr>
    <td width="20%">Feature 2</td>
    <td width="16%" valign="middle" align="center">
<input type="radio" onclick="radioMYBB2checked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioMYBB2checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBB2checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBB2checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBB2checked()"></td>
  </tr>
  <tr>
    <td width="20%">Feature 3</td>
    <td width="16%" valign="middle" align="center">
<input type="radio" onclick="radioMYBB3checked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioMYBB3checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBB3checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBB3checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBB3checked()"></td>
  </tr>
  <tr>
    <td width="20%">Feature 4</td>
    <td width="16%" valign="middle" align="center">
<input type="radio" onclick="radioMYBB4checked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioMYBB4checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBB4checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBB4checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBB4checked()"></td>
  </tr>
  <tr>
    <td width="20%">Feature 5</td>
    <td width="16%" valign="middle" align="center">
<input type="radio" onclick="radioMYBB5checked()"></td>
    <td width="16%" valign="middle" align="center"><input type="radio" onclick="radioMYBB5checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBB5checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBB5checked()"></td>
    <td width="17%" valign="middle" align="center"><input type="radio" onclick="radioMYBB5checked()"></td>
  </tr>
</table>
<p>
<br><br><br>
<input type="button" value="Submit ratings" onclick="checkGLOBALRadioButtons()">
</p>
</body>
```
Ofcourse,you will have to customize the submitting script according to your needs.

Following modifications are possible:

Instead of RATE ALL FEATURES OF ALL PRODUCTS, rate any feature of any product is also possible.
Rate atleast 1/2/3 features of any/1/2/3 products is also possible
It is also possible to have an option like 'I have no ratings for this product'. This helpful when you have multiple products to rate on a page. The blank fields will be accepted then.
Many other are possible


----------



## gaurav_indian (Nov 6, 2007)

Yeah i can do it in asp.net easily through validations.Thanx for the javascript one.


----------



## RCuber (Nov 6, 2007)

@rohan , thanks for the code.. and now for my second advice.. 

Please post all your JS/code tuts in Programming section, its more appropriate there  ... 

any way requesting mods to move this thread to programming section 

@gaurav... the validations in ASP.NET i.e., if you write C# or VB.NET code will be validated at the server... that means the page will do a round trip to the server.. where as JS is client side scripting and the code executes at the browser itself and hence avoiding server roundtrip. This is how AJAX works... and no site is complete without JS..


----------



## victor_rambo (Nov 6, 2007)

^Charan
Thanks bhai

But I think it has better visbility in this section


----------



## gaurav_indian (Nov 6, 2007)

Charan said:
			
		

> @rohan , thanks for the code.. and now for my second advice..
> 
> Please post all your JS/code tuts in Programming section, its more appropriate there  ...
> 
> ...


Yeah i know.But i havent used javascript much.


----------



## RCuber (Nov 6, 2007)

rohan_shenoy said:
			
		

> But I think it has better visbility in this section


We have a dedicated programming section, so people looking for JS will check that section..  The programming section is new and mods/admins are moving all programming related thread to that section .. so I believe even JS threads will be moved there..

@gaurav.... you better start looking into JS seriously.. cause just knowing server side scripting isnt enough.. Now a days any webapplication is incomplete without JS. If you know C/C++ syntax then that good enough to jumpinto JS..


----------



## gaurav_indian (Nov 6, 2007)

Charan said:
			
		

> We have a dedicated programming section, so people looking for JS will check that section..  The programming section is new and mods/admins are moving all programming related thread to that section .. so I believe even JS threads will be moved there..
> 
> @gaurav.... you better start looking into JS seriously.. cause just knowing server side scripting isnt enough.. Now a days any webapplication is incomplete without JS. If you know C/C++ syntax then that good enough to jumpinto JS..


Yeah sure i will.


----------



## vaibhavtek (Nov 6, 2007)

I think tum javascript ke scientist ho.
Cool trick buddy.


----------

