1,105,363 Community Members

HTML Radio Buttons and JS

Member Avatar
mmcdonald
Posting Pro in Training
473 posts since Sep 2012
Reputation Points: 28 [?]
Q&As Helped to Solve: 32 [?]
Skill Endorsements: 12 [?]
 
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!

Member Avatar
urtrivedi
Posting Virtuoso
1,897 posts since Dec 2008
Reputation Points: 249 [?]
Q&As Helped to Solve: 408 [?]
Skill Endorsements: 27 [?]
 
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>
Member Avatar
mmcdonald
Posting Pro in Training
473 posts since Sep 2012
Reputation Points: 28 [?]
Q&As Helped to Solve: 32 [?]
Skill Endorsements: 12 [?]
 
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

Member Avatar
urtrivedi
Posting Virtuoso
1,897 posts since Dec 2008
Reputation Points: 249 [?]
Q&As Helped to Solve: 408 [?]
Skill Endorsements: 27 [?]
 
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.

Member Avatar
mmcdonald
Posting Pro in Training
473 posts since Sep 2012
Reputation Points: 28 [?]
Q&As Helped to Solve: 32 [?]
Skill Endorsements: 12 [?]
 
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

Member Avatar
mmcdonald
Posting Pro in Training
473 posts since Sep 2012
Reputation Points: 28 [?]
Q&As Helped to Solve: 32 [?]
Skill Endorsements: 12 [?]
 
0
 

Hi DW'ers,

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

M

Member Avatar
pritaeas
mod_pritaeas
11,292 posts since Jul 2006
Reputation Points: 1,420 [?]
Q&As Helped to Solve: 1,832 [?]
Skill Endorsements: 155 [?]
Moderator
Featured
Sponsor
 
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.

Member Avatar
mmcdonald
Posting Pro in Training
473 posts since Sep 2012
Reputation Points: 28 [?]
Q&As Helped to Solve: 32 [?]
Skill Endorsements: 12 [?]
 
0
 

Hi pritaeas,

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

M

Member Avatar
pritaeas
mod_pritaeas
11,292 posts since Jul 2006
Reputation Points: 1,420 [?]
Q&As Helped to Solve: 1,832 [?]
Skill Endorsements: 155 [?]
Moderator
Featured
Sponsor
 
0
 

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

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