www.webdeveloper.com
Results 1 to 4 of 4

Thread: [RESOLVED] Interesting Radio Button Situation

  1. #1
    Join Date
    Feb 2012
    Posts
    3

    resolved [RESOLVED] Interesting Radio Button Situation

    For all you guys itching for a challenge:

    I have an interesting radio button scenario. Basically, I am building a personality test. BUT Instead of just choosing one characteristic that fits them, the user chooses the MOST and LEAST applicable characteristic.

    For example, if the user was asked "What is your most and least favorite food?" There must be two radio buttons for each answer choice (one "Most" and one "Least").

    The Problem: I need to prevent the user from selecting Most AND Least for the same answer choice. I can get it to disable the "opposite" (Most or Least) radio button, but I cant figure out a good way to enable them again if the user changes their choice.

    An example: http://bidwage.com/images/MostAndLeast.png

    Heres what I have so far: http://bidwage.com/survey/index.php

    Heres the Javascript file: http://bidwage.com/js/answerChoiceSelect.js

    Thanks in advance. I appreciate it.
    Bobby

  2. #2
    Join Date
    Feb 2012
    Posts
    3
    This might help...

    Is this valid to reenable all radio buttons with a the name="M11" attribute?

    Code:
    document.getElementsByName("M11").disabled = false;

  3. #3
    Join Date
    Feb 2012
    Posts
    3
    SOLVED:

    getElementsByName() returns a collection. So naturally, you must iterate through the collection to change properties of the elements in the collection.

    Simply saying
    Code:
    document.getElementsByName(theName).disabled = false
    doesnt work.

    Iterate through each item in the collection:
    Code:
    var ElementsToEnable = document.getElementsByName(TheName);
                for (var i=0; i < ElementsToEnable.length; i++) {
                    ElementsToEnable[i].disabled = false;
    				ElementsToEnable[i].readOnly = false;
                }
    Simple answer, but it took me a while for some reason.

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Lightbulb

    Alternative solution ...
    Code:
    <html>
    <head>
    <title> Untitled </title>
    <script type="text/javascript">
    function getRBtnName(GrpName) {
      var sel = document.getElementsByName(GrpName);
      var fnd = -1;
      var str = '';
      for (var i=0; i<sel.length; i++) {
        if (sel[i].checked == true) { str = sel[i].value;  fnd = i; }
      }
      return fnd;   // return option index of selection
    // comment out next line if option index used in line above  
    //  return str;
    } 
    function ckCbox(info) {
      var most = getRBtnName('Most');
      var least = getRBtnName('Least');
      if (most == least) {
        alert('Invalid selection');
        info.checked= false;
      }
    }
    </script>
    
    <style type="text/css">
    
    </style>
    </head>
    <body>
    Most | Least<br>
    &nbsp;&nbsp;
    <input type="radio" name="Most1"  onclick="ckCbox(this)"> | 
    <input type="radio" name="Least1" onclick="ckCbox(this)"> &nbsp;&nbsp; Pizza <br>
    &nbsp;&nbsp;
    <input type="radio" name="Most1"  onclick="ckCbox(this)""> | 
    <input type="radio" name="Least1" onclick="ckCbox(this)"> &nbsp;&nbsp; Spagetti <br>
    &nbsp;&nbsp;
    <input type="radio" name="Most1"  onclick="ckCbox(this)"> | 
    <input type="radio" name="Least1" onclick="ckCbox(this)"> &nbsp;&nbsp; Cheeseburger <br>
    &nbsp;&nbsp;
    <input type="radio" name="Most1"  onclick="ckCbox(this)"> | 
    <input type="radio" name="Least1" onclick="ckCbox(this)"> &nbsp;&nbsp; Hot Dog <br>
    &nbsp;&nbsp;
    <input type="radio" name="Most1"  onclick="ckCbox(this)"> | 
    <input type="radio" name="Least1" onclick="ckCbox(this)"> &nbsp;&nbsp; Taco <br>
    </body>
    </html>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles