Neverside

Javascript funtion and show/hide form

Hello,

I struggled with where to post this, but I think it will be most relevant here in client side. I am writing a survey generator in PHP, and one aspect that the app has to handle is multiple choice questions. For example:

What is the 3rd planet from the sun?
a. mercury
b. venus
c. earth
d. pluto

Something like the above. When creating the format of the survey, I have to handle questions like this one. Right now I have the form setup so that on each question, the person can select a specific format for the question. There are various formats, but the one im having problems with is the multiple choice question. Currently I have all the question formats in a pull down menu, and I have some Javascript that will display extra form fields if multpile choice is selected.

Here is the javascript function I wrote to display the extra form fields if multiple choice is selected:

Code:

<script>
function ShowOptions(menu,options)
{

alert("hello");
if(document.getElementById(menu).value == 'multiple')
{
document.getElementById(options).style.visibility = 'visible';
}
else
{
document.getElementById(options).style.visibility = 'hidden';
}
}
</script>

And then I call the function within some php code like so:

PHP:

echo "<select name=\"q" . $number . "format\" size=1 ";
?>

onChange="javascript: ShowOptions(<?php echo "q" . $number . "format"; ?>,<?php echo "q" . $number . "options"; ?>);">;

<?php
echo "<option value=\"text\">Written (quantitative)</option>\n";
echo "<option value=\"number\">Number</option>\n";
echo "<option value=\"poll\">Poll Question (yes/no)</option>\n";
echo "<option value=\"multiple\">Multiple Choice (A-B-C)</option>\n";
echo "</select>\n";

Below that, here is the extra form information:

PHP:

<div id='<?php echo "q" . $number . "options"; ?>' style="visibility: hidden;">
                Multiple Choice Answer - Option 1: <input type="text" name=<?php echo "\"q" . $number . "option1\""; ?>><br>
                Multiple Choice Answer - Option 2: <input type="text" name=<?php echo "\"q" . $number . "option2\""; ?>><br>
                Multiple Choice Answer - Option 3: <input type="text" name=<?php echo "\"q" . $number . "option3\""; ?>><br>
                     Multiple Choice Answer - Option 4: <input type="text" name=<?php echo "\"q" . $number . "option4\""; ?>><br>
        </div>

When I run the file, I get no javascript errors in the console of my browser, but the extra form fields dont show up when I select multiple choice.

I hope I didn't overwelm anyone, but I'm really lost on this one, and could appreciate some help.

___________________

:: KellenHolt.com
:: KellenHolt.com Forums - No Frills Discussion
:: Need Small Hosting Plan? CLICK

Take the javascript: out of your onChange event handler.

Code:

onChange="ShowOptions(<?php echo "q" . $number . "format"; ?>,<?php echo "q" . $number . "options"; ?>);">;

___________________

Jon Culver Chia Pets

Although this may be irrelevant, but I wasn't aware 'visibility' was a valid style parameter. I suggest changing it to the following:

Code:

<script>
function ShowOptions(menu,options)
{

alert("hello");
if(document.getElementById(menu).value == 'multiple')
{
document.getElementById(options).style.display = 'block';
}
else
{
document.getElementById(options).style.display = 'none';
}
}
</script>

And in your HTML:

PHP:

<div id='<?php echo "q" . $number . "options"; ?>' style="display: none;">

___________________

I don't suffer from insanity; I enjoy every minute of it.
Unintended Theory | Cacrew v4

Visibility is a valid parameter, but it doesn't work the same way. Display 'none' would be better in this case anyway though.

also, you must put single quotes around the function parameters for valid syntax:

Code:

onChange="ShowOptions('<?php echo "q" . $number . "format"; ?>','<?php echo "q" . $number . "options"; ?>');"

___________________