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

Status
Not open for further replies.
victor_rambo

victor_rambo

हॉर्न ओके प्लीज़
source: Myself :D

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:
Code: 
<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
 
RCuber

RCuber

The Mighty Unkel!!!
Staff member
@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..
 
Last edited:
gaurav_indian

gaurav_indian

CG Artist
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 :) ...

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..
Click to expand...
Yeah i know.But i havent used javascript much.
 
RCuber

RCuber

The Mighty Unkel!!!
Staff member
rohan_shenoy said:
But I think it has better visbility in this section :oops:
Click to expand...
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

gaurav_indian

CG Artist
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..
Click to expand...
Yeah sure i will.
 
V

vaibhavtek

Guest
I think tum javascript ke scientist ho.
Cool trick buddy.
 
Status
Not open for further replies.
Top Bottom