Question

Declaration: I am not sure if that is a parameter. Please enlighten.

I have a medical questionnaire form with almost 19 yes and no radio buttons.Each question’s radio buttons must have a unique input name in order to make it work. I manage to find a suitable code to toggle an text area if the yes radio button is selected however, it can only work in one of the input name and there are 18 more which needs it to be working as well.

My main question is:

function displayTextBox()
    {
        var objElement = document.getElementById('addmed');
        addmed.style.display = 'block';
        addmed.style.visibility = 'visible';
    }

    function hideTextBox()
    {
        var objElement = document.getElementById('addmed');
        addmed.style.display = 'none';
        addmed.style.visibility = 'hidden';
    }

    function validate()
    {
        var arrElements = document.getElementsByName('medq');
        var objElement;
        var boolContinue = false;
        var objaddmedtext;

        for(var i=0, _length=arrElements.length; i<_length; i++)
        {
            objElement = arrElements[i];

            if(objElement.checked)
            {
                if(objElement.id == 'yes')
                {
                    objaddmedtext = document.getElementById('addmedtext');

                    if(strTrim(objaddmedtext.value).length>0)
                    {
                        boolContinue = true;
                        break;
                    }
                }
                else
                {
                    boolContinue = true;
                    break;
                }
            }
        }

        if(boolContinue)
        {
            alert('Continue, user completed the information.')
        }
        else
        {
            alert('Ask user to complete the data.')
        }
    }

    /**
     * Removes all white space characters from the string.
     * 
     * @param: {String} String to trim.
     * 
     * @return {String} Trimed string.
    */
    function strTrim(strTrim) 
    {
        return strTrim.replace(/^\s+|\s+$/g, '');
    }

Looking at this javascript,a textarea

<div id="addmed" style="display:none;visibility:hidden; margin-left:10px; width:110px;">
        <textarea id="addmedtext" cols="60" rows="6" placeholder="Please give details with dates"></textarea>
</div> 

will only appear if the yes radio button is selected for

<tr>
<td width="33">1.</td>
<td width="491">Heart or circulatory problems including: high blood pressure, heart attack, angina, heart murmur, heart failure, palpitations, circulatory problemseg. whitefinger, blocked arteries, stroke aneurysm.</td>
<td width="68"><input name="medq" id="yes" type="radio" value="yes" onclick="displayTextBox()"/><label for="yes"> Yes </label></td>
<td width="78"><input name="medq" id="no" type="radio" value="no" onclick="hideTextBox()"/><label for="no"> No </label></td>

However, this is only 1 question…I have 18 more question with name="medq 1 to 18 ".

Any ideas how to edit the javascript to add the parameters??

Answer 1

First, you need to have unique ID on every radio button. But you need the same NAME on each pair of YES/NO button to process the selected one of the pair. So you can have

<input type="radio" name="foo" id="foo_y" value="yes" /><label for="foo_y">Yes</label>
<input type="radio" name="foo" id="foo_n" value="no" /><label for="foo_y">Yes</label>
<textarea id="foo_text" name="foo_text"><textarea>

Now, for the “yes” radio buttons, you can add onclick=”displayTextBox( this )”. “this” is a pointer to the current radio button.

You can then update the function like so:

function displayTextBox( f ) { // f is the field that was clicked
    f.style.display = 'block';
    f.style.visibility = 'visible';
}

Now it’s a generic function. Do the same for the “hide” function.

Finally, you can update your validate function to loop over the array of form input fields instead of looking at the one field.

1. var arrElements = document.getElementsByTagName("input");.
2. Inside your loop: if( (objElement.type === "radio") && (objElement.checked) ) {.
3. Don’t use if(objElement.id == 'yes'), check for the value of the current field: if(objElement.value == 'yes')
4. Finally, you can grab the text from the related textarea: objTextArea = document.getElementByName( objElement.name + "_text" );

So, you’re just making each of the existing functions generic and looking for the meta data of each field, rather than trying to code for each field.