1.11M Members

HTML Radio Buttons and JS

 
0
 

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!

 
1
 

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>
 
0
 

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

 
0
 

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.

 
0
 

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

 
0
 

Hi DW'ers,

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

M

 
0
 

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.

 
0
 

Hi pritaeas,

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

M

 
0
 

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

Isn't it about time forums rewarded their contributors?

Earn rewards points for helping others. Gain kudos. Cash out. Get better answers yourself.

It's as simple as contributing editorial or replying to discussions labeled or OP Kudos

You
This article has been dead for over six months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article