HTML Radio Buttons and JS

[mmcdonald]

Hi all,

I'm currently building a questionnaire and I've run into a head scratcher. Some of the questions require the user to give a number to represent the importance of the answer. Example:

Instruction: Please select the radio buttons according to your preferred option, 
with 1 representing the most important down to 4 which for you is least important.

1) If you're worried or concerned about a health related issue - who are you more likely to consult first?
    a. Mum
    b. Dad
    c. Doctor
    d. Sibling(s)

The user must give a number to each answer, between 1 and 4, like the following:

1) If you're worried or concerned about a health related issue - who are you more likely to consult first?
    a. Mum = 1
    b. Dad = 3
    c. Doctor = 2
    d. Sibling(s) = 4

or

1) If you're worried or concerned about a health related issue - who are you more likely to consult first?
    a. Mum = 4
    b. Dad = 2
    c. Doctor = 1
    d. Sibling(s) = 3

The point is, they can't use the same number twice... so they're producing an order of importance to them.

What is the way to go about creating and validating this? I have grouped the radio buttons vertically which is great as it means the user can only choose 1, 2, 3 or 4 once in every question, but they're still able to stack 1, 2, 3 and 4 in to the same answer which is what I need to stop. It's almost as though I need to group the radio buttons vertically and horizontally.

Example dummy code:

    <form>
        <label>
            Question 1<br />
            If you're worried or concerned about a health related issue - who are you more likely to consult first?
        </label>
        <table>
            <tr>
                <td>Mum.</td>
                    <td><input type="radio" value="1" name="1.1" />1</td>
                    <td><input type="radio" value="2" name="1.2" />2</td>
                    <td><input type="radio" value="3" name="1.3" />3</td>
                    <td><input type="radio" value="4" name="1.4" />4</td>
            </tr>
            <tr>
                <td>Dad.</td>
                    <td><input type="radio" value="1" name="1.1" />1</td>
                    <td><input type="radio" value="2" name="1.2" />2</td>
                    <td><input type="radio" value="3" name="1.3" />3</td>
                    <td><input type="radio" value="4" name="1.4" />4</td>
            </tr>
            <tr>
                <td>Doctor.</td>
                    <td><input type="radio" value="1" name="1.1" />1</td>
                    <td><input type="radio" value="2" name="1.2" />2</td>
                    <td><input type="radio" value="3" name="1.3" />3</td>
                    <td><input type="radio" value="4" name="1.4" />4</td>
            </tr>
            <tr>
                <td>Sibling(s).</td>
                    <td><input type="radio" value="1" name="1.1" />1</td>
                    <td><input type="radio" value="2" name="1.2" />2</td>
                    <td><input type="radio" value="3" name="1.3" />3</td>
                    <td><input type="radio" value="4" name="1.4" />4</td>
            </tr>
        </table>
    </form>

Which still allows this: http://oi43.tinypic.com/2qn5i1g.jpg

Thanks in advance for any advice!

[urtrivedi]

I will go for dropdown instead of radio button

<script lang='javascript'>
function checkblank(drpid)
{
    if(document.getElementById(drpid).value=='')
    {
        alert('Select preference');
        document.getElementById(drpid).focus();
        return false;
    }
    return true;
}
function checkorder()
{
    if (!checkblank('mum'))
        return false;
    if (!checkblank('dad'))
        return false;
    if (!checkblank('doc'))
        return false;
    if (!checkblank('sib'))
        return false;

    if(parseInt(document.getElementById('mum').value)+ parseInt(document.getElementById('dad').value)+parseInt(document.getElementById('doc').value)+parseInt(document.getElementById('sib').value)!=10)
    {
        alert('Select unique preference');
        document.getElementById('mum').focus();
        return false;
    }
    return true;
}
</script>
    <form name=frm id=frm>
        <label>
            Question 1<br />
            If you`re worried or concerned about a health related issue - who are you more likely to consult first?
        </label>
        <table>
            <tr>
                <td>Mum.</td> 
                <td ><select name=mum id=mum>
                    <option value="">
                    <option value=1>1
                    <option value=2>2
                    <option value=3>3
                    <option value=4>4
                    </select> 
                </td>
            </tr>

            <tr>
                <td>Dad.</td>
                <td ><select name=dad id=dad>
                    <option value="">
                    <option value=1>1
                    <option value=2>2
                    <option value=3>3
                    <option value=4>4
                    </select> 
                </td>
            </tr>
            <tr>
                <td>Doctor.</td>
                <td ><select name=doc id=doc>
                    <option value="">
                    <option value=1>1
                    <option value=2>2
                    <option value=3>3
                    <option value=4>4
                    </select> 
                </td>
            </tr>
            <tr>
                <td>Sibling(s).</td>
                <td ><select name=sib id=sib>
                    <option value="">
                    <option value=1>1
                    <option value=2>2
                    <option value=3>3
                    <option value=4>4
                    </select> 
                </td>
            </tr>
        </table>
        <input type=button value='submit' onclick='checkorder()'>
    </form>

[mmcdonald]

Thanks urtrivedi, I really like your suggestion, especially the validation method of checking that the total value of answers for each question = 10. Simple yet effective.

One thing I would like to do to increase ease of use pre-validation is to remove a number from the other dropdowns when it's selected in a dropdown. So if they chose 4 for mum, it wouldn't be available as an option for dad, siblings or doctor.

How would I go about this? I'm struggling to even visualise the logic and I really do not know why.

+1 for your answer above

[urtrivedi]

You can do that by using jquery, But I guess it is not good choice to do, and its not userfriendly

if any how u do that, rest options goes out of user's reach, and if user want to change his preference then he has to reset whole form to change his preference.

So I suggest you to check in javascript only.

[mmcdonald]

I see what you mean. but what would be even better is if 4 is already set, if they choose 4 again it is removed from it's previous selection? same for all numbers. Then they can't repeat their entry

[mmcdonald]

Hi DW'ers,

Any other suggestions here? My research isn't going very well and I'm stumped

M

[pritaeas]

Other suggestions? Other than the dropdowns? A list you can reorder (dragging or up/down buttons), or rows/columns of checkboxes (4x4). Clicking a checkbox should disable the ones on the same row, and in the same column.

[mmcdonald]

Hi pritaeas,

I had 4x4 checkboxes but could only figure out how to disable them in one direction

M

[pritaeas]

Technically, one row down means 4 to the right, perhaps that's usable. I can't test here at work.