Radio button auto selected when text entered in textbox/textarea

Question

Please forgive me for the long post ahead of time.  Maybe I am making it too complicated or being too picky.  

I have a question, Q1, with the possible answers of no, yes.

Q1:
 Do you like dogs?

O No
O Yes, please list the dogs you like.
     =============
     |                         |
     =============

If they select yes, there is a text box where they can type a response.  

If they start typing in a response, the Yes radio button is selected as soon as they start typing in the text box.

Using the wizard to create the question is easy and everything works just fine.  However, the value of no needs to be 0 (zero) and the value of yes needs to be 1 (one).

So, I created the question using free format.  I used the code that was generated with the wizard for my free format and changed the values as needed.  The only thing that is not working is the Yes radio button is not selected when I start typing in the response box.

The survey takers are allowed to go back to previous questions.

The two variables declared for Q1 are Q1_r1 as Radio and Q1_other as Textarea.

Here is the html code I placed in the HTML section.

<table class="inner_table"><tr><td valign="top" align="left">
<table>
<tr class="clickable"><td class="input_cell">
<input name="Q1_r1" value="0" type="radio" id="Q1_r1_1" class="HideElement">
<div id="Q1_r1_1_graphical" class="graphical_select radiobox"></div></td><td class="option_cell"><div class="options"><label for="Q1_r1_1">No</label></div></td></tr><tr class="clickable"><td class="input_cell"><input name="Q1_r1" value="1" type="radio" id="Q1_r1_2" class="HideElement">
<div id="Q1_r1_2_graphical" class="graphical_select radiobox"></div></td><td class="option_cell multiline_other_cell"><div class="options"><label for="Q1_r1_2">Yes, please list the project(s)</label><br><textarea wrap="virtual" name="Q1_other" maxlength="500" id="Q1_other" style=" width: 400px;"></textarea><input type="hidden" name="hid_Q1_other" value="0,500,"></div></td></tr></table></td>
</tr></table>

<input type="hidden" name="hid_list_Q1_r1" value="0,1">

Any help or guidance is much appreciated.
Greg

Answer 1

I'm not a JavaScript expert so I can't help too much there.

I try to avoid using free format display questions as much as possible as you lose all of that  functionality such as code hi-lighting, the radio button automatically being answered when entering text in the text box, the exclusive code feature, etc.

You can use free format hidden questions which will store a 0 and 1 as you suggested. Instead of exporting out Q1, export out the 2 hidden questions. That should be an easy fix.

Another option is to capture Q1 as you normally would and then recode Q1 in your analysis software.

Comments

Thanks Paul for your reply.  I agree about avoiding free format questions.  I prefer to avoid them myself.  

The first thing I asked is could the analysis recode the value later.  They said they could do it but would rather have the correct value output in the data set.

I’ll look into the idea of using JavaScript to set a hidden variable and output that one instead.  That is one idea that I had not thought of and will try.

---

You won't need JavaScript. You can use Perl in a hidden question.

Here's an example of a hidden question called HdQ1_RECODE. This will need to be inserted into your program after Q1. Export Q1 instead of the source Q1 that was displayed to the respondent.

<input name="HdQ1_RECODE" type="hidden" value="
[%
Begin Unverified Perl

 my $Q1_recode=0;
 
if ((VALUE("Q1")==1)
 {
  $Q1_recode=0;
 }

elsif ((VALUE("Q1")==2)
 {
  $Q1_recode=1;
 }

return $Q1_recode;
 
End Unverified
%]
">

---

I’ve never used Unverified Perl before but I follow the idea of the code.  When I tried this I get a Sawtooth error #132. Script error. Please check the error log for details.

When I looked at the error log, here is what it said:
Server Error: syntax error at (eval 32) line 5, near ")


Just to make sure I have done things correctly, here is what I have:
•    I have question Q1 (question type select)
•    then a page break
•    question HdQ1 (question type free format {I didn’t see the option for hidden question}).

In the HdQ1 question I define a hidden variable named HdQ1_RECODE (variable type hidden).
In the HTML section I have the input statement with the Unverified Perl (your code).

I’m using version 7.0.26.

---

I got it working.  I was missing a “)”.  I also moved the hidden question to the next page on the question after Q1 like you said.  I understand what you are taking about now.  

Thanks Paul!  I hope someday I may be able to return the help.

---

The Sawtooth help has some good information on Unverified Perl. Check it out. It's fairly easy to follow and will be helpful for future surveys.

Yes, you need to pop the free format hidden question on a page AFTER Q1 is answered but make sure it is a question the has the correct base. No good putting the hidden question on a question that is being skipped differently to Q1.

Answer 2

I'll add a plug for upgrading to V8, though as Paul's answer states it's definitely possible to make a free format question with hidden variables, and then use an if/then statement using some Perl to save a 0 or 1 based on their input.

V8 has the capabilities to recode answers at the time of data export, as well as a handy SetValue() function you can use in place of times where you would go the hidden variable route.

Comments

I agree it's a good idea to move to v8. We are about to move across ourselves. Tons of handy features including the recode facility.

Answer 3

What you want to do should be possible with something like:

var myTxtBox = document.getElementById("txtBox"); // your question name here
myTxtBox.addEventListener("onkeydown", textclick, false);

function textclick()
{
// SSI code to set radio button. 
}

Comments

Thanks Bahadir and anonymous.  When I get time I’ll try the code from Bahadir just for learning sake.  Then move to version 8.

---

Bahadir, I was curious about this code so I was playing with it myself and keep getting an error when I test the question telling me the object doesn't support the property or method.  I don't see a problem so I'm not sure what to change.  Here is the script I've got:

<script type="text/javascript">

var myTxtBox = document.getElementById("Q1_other");

myTxtBox.addEventListener("onkeydown", textclick, false);

function textclick()
{
document.mainform["Q1_r1"][1].checked = true;
}

</script>

From what I can see the error points to the line with the addEventListener code, so that seems to be where the problem lies but I don't know why.

---

Hi Jay, a bit overloaded with work at the moment. will try to look into this later. but no promises :)

might be due to the fact that the browsers have varying events that they support.

---

No worries, if you get a chance.  Just trying to build up my javascript abilities. :)
I wound up using the function but assigning it to the event listener in the actual textbox html (onkeyup="textclick()").  It isn't showing the 'yes' as clicked on the screen but it is registering it because it will let you move the the next screen (it is set as required response) and if you back up to that question it does show the yes clicked.  So, still not sure what to change to make it show up directly.

---

Helo,

If you still need to check / uncheck radiobox when text is entered I have a solution. But you have to copy javascript in footer or somwhere inside freeformat (it won`t work in Htm Head Tag).

<script type="text/javascript">

function vnos()
{
if(document.getElementById("Q1_other").value.length>=1)
{
SSI_SetSelect("Q1_r1_2", true);
}
}
document.getElementById("Q1_other").onkeydown = vnos;


</script>