Customize a SharePoint Survey

_SP2007

The requirement was to have:

  1. Multiple questions combined with a comment box. (several questions with 5 radio buttons), Yes/No questions (contain 2 radio buttons)
  2. When the survey taker selects “Disagree” or “Strongly Disagree” (select one of the last 2 radio buttons), or “No” (in a Yes/No question – select last radio button) the survey taker has to leave a comment in the comment box before he/she can proceed to the next question. I therefore set the “Next” button to hide.
  3. A pop-window should notify the survey taker to leave a comment.

Because most questions should include a comments text box – first add the ”# question and response elements” and then add a second question with “# Comment” and text box*. Place a “Page Separator” between each question set continue adding in this manner. The following script will remove the lines between the questions so they appear as one.

<style>.ms-formlabel{border-top: 0px solid;}</style>

*You will also add the question numbers to the comments fields so you will be able to identify which comment field response belongs to what question.

To make the Comment field a mandatory field when selecting Disagree or Strongly Disagree, or No on a Yes/No question, add the below script in a Content Editor WebPart on boththe NewForm.aspx ( question #1)  and the EditForm.aspx (for all continuous questions).

To do this start the survey and add &ToolpaneView=2  at the end of the URL of Question 1. This allows you to add the Content Editor Webpart to the NewForm.aspx.

Then on question 2 add &ToolpaneView=2  at the end of the URL. This allows you to add another Content Editor Webpart this time to the EditForm.aspx.

Here I found a a very good article on how to attach the “onclick” event to the radio button:

http://spforsquirrels.blogspot.com/2008/02/conditionally-hide-or-show-metadata.html

This is the script I used in the Content Editor Webpart:
It checks if the question has 5 buttons or 2 buttons. It will hide the “Next” button and draw a red line around the comments box if one of the last 2 of the 5 buttons were clicked or if the last of 2 buttons was clicked (Yes/No Question). It will show a pop-window to notify the survey taker that he/she has to leave a comment before the “Next” button will appear again to proceed to the next question. Of course, if the survey taker reconsiders the answer and selects one of the other buttons, the “Next” button needs to appear again as well.

<style>
.ms-formlabel{border-top: 0px solid;}
</style>
  
<script type="text/javascript">
if(typeof jQuery=="undefined"){
var jQPath="https://imcom.eep.army.mil/sites/SpecialStaff/eeo/JQuery";
document.write("<script src='",jQPath,"jquery-1.6.1.min.js' type='text/javascript'><\/script>");
}
</script>

<script>
// script for validation mechanism
window.attachEvent("onload",InitLoad);
function InitLoad() 
{

var findTextBox = document.getElementsByTagName("textarea");
        for (var x = 0; x < findTextBox.length; x++) { 
             if (findTextBox[x].type == 'textarea')   
            { 
               CommentfieldID = (findTextBox[x].id);
            } 
 }

if (findTextBox.length != 0)
{
// Count radio buttons
var RadioBtncount = 0;
var queryRadioButtons = document.getElementsByTagName("input");
        for (var x = 0; x < queryRadioButtons.length; x++) 
        { 
            if (queryRadioButtons[x].type == 'radio')
            {
              RadioBtncount++;
            }
        }

// validation for less then 2 radio buttons (Y/N questions)
if (RadioBtncount == 2)
{

var findRadioBtnNOT = document.getElementsByTagName("input");
        for (var x = 0; x < findRadioBtnNOT.length; x++) { 
            if (findRadioBtnNOT[x].type == 'radio' && findRadioBtnNOT[x].value=='ctl00')
            { 
               document.getElementById(findRadioBtnNOT[x].id).attachEvent("onclick",makeNotMandatory);
            } 
 }

var findRadioBtn = document.getElementsByTagName("input");
        for (var x = 0; x < findRadioBtn.length; x++) { 
            if (findRadioBtn[x].type == 'radio' && findRadioBtn[x].value=='ctl01')
            { 
               document.getElementById(findRadioBtn[x].id).attachEvent("onclick",makeMandatory);
            } 
 }


var TxtBx = document.getElementById(CommentfieldID);
TxtBx.attachEvent("onkeyup",checkTextBox);


function makeMandatory()
{
var TxtBox = document.getElementById(CommentfieldID);
TxtBox.style.border= "solid red 1.8px";

checkTextBox();

alert("Your selection requires you to leave a comment!");
}


function makeNotMandatory()
{
var TxtBox = document.getElementById(CommentfieldID);
TxtBox.style.border= "solid #d5d6d9 1.8px";

NextButtonVisible();
}


function NextButtonVisible()
{
var findNextBtn = document.getElementsByTagName("input");
        for (var x = 0; x < findNextBtn.length; x++) 
        { 
             if (findNextBtn[x].type == 'button' && findNextBtn[x].value=='Next')  
            { 
              
			var NextBtn = document.getElementById(findNextBtn[x].id);
			NextBtn.style.visibility= "visible";
            	
            } 
      }
}

function NextButtonHidden()
{
var findNextBtn = document.getElementsByTagName("input");
        for (var x = 0; x < findNextBtn.length; x++) 
        { 
             if (findNextBtn[x].type == 'button' && findNextBtn[x].value=='Next')  
            { 
              
			var NextBtn = document.getElementById(findNextBtn[x].id);
			NextBtn.style.visibility= "hidden";
            	
            } 
      }
}

function checkTextBox()
{
var control1 = document.getElementById(CommentfieldID);
var val1 = control1.value.length;
if (val1 >= 1)
{
NextButtonVisible();
}
else
{
NextButtonHidden();
}
}
}


// validation for more then 2 radio buttons
if (RadioBtncount >= 5)
{

var findRadioBtnNOT = document.getElementsByTagName("input");
        for (var x = 0; x < findRadioBtnNOT.length; x++) { 
            if (findRadioBtnNOT[x].type == 'radio' && findRadioBtnNOT[x].value=='ctl00' || findRadioBtnNOT[x].value=='ctl01' || findRadioBtnNOT[x].value=='ctl02' || findRadioBtnNOT[x].value=='ctl05')
            { 
               document.getElementById(findRadioBtnNOT[x].id).attachEvent("onclick",makeNotMandatory);
            } 
 }

var findRadioBtn = document.getElementsByTagName("input");
        for (var x = 0; x < findRadioBtn.length; x++) { 
            if (findRadioBtn[x].type == 'radio' && findRadioBtn[x].value=='ctl03' || findRadioBtn[x].value=='ctl04')
            { 
               document.getElementById(findRadioBtn[x].id).attachEvent("onclick",makeMandatory);
            } 
 }


var TxtBx = document.getElementById(CommentfieldID);
TxtBx.attachEvent("onkeyup",checkTextBox);

}


function makeMandatory()
{
var TxtBox = document.getElementById(CommentfieldID);
TxtBox.style.border= "solid red 1.8px";

checkTextBox();

alert("Your selection requires you to leave a comment!");
}


function makeNotMandatory()
{
var TxtBox = document.getElementById(CommentfieldID);
TxtBox.style.border= "solid #d5d6d9 1.8px";

NextButtonVisible();
}


function NextButtonVisible()
{
var findNextBtn = document.getElementsByTagName("input");
        for (var x = 0; x < findNextBtn.length; x++) 
        { 
             if (findNextBtn[x].type == 'button' && findNextBtn[x].value=='Next')  
            { 
              
			var NextBtn = document.getElementById(findNextBtn[x].id);
			NextBtn.style.visibility= "visible";
            	
            } 
      }
}

function NextButtonHidden()
{
var findNextBtn = document.getElementsByTagName("input");
        for (var x = 0; x < findNextBtn.length; x++) 
        { 
             if (findNextBtn[x].type == 'button' && findNextBtn[x].value=='Next')  
            { 
              
			var NextBtn = document.getElementById(findNextBtn[x].id);
			NextBtn.style.visibility= "hidden";
            	
            } 
      }
}

function checkTextBox()
{
var control1 = document.getElementById(CommentfieldID);
var val1 = control1.value.length;
if (val1 >= 1)
{
NextButtonVisible();
}
else
{
NextButtonHidden();
}
}
}
}
</script>

Is this Pages usefull? Usefull Useless 2 of 8 people say this Pages is usefull.