Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Unhappy HELP with No Repeat Conditional Form Fields


    Java noob here,

    Trying to figure out whats the best way to go about this.

    In my form I want user to Rate on a scale of 1-6 the importance of 6 questions that they have just answered.
    How can I Select 1 - 6 from a dropdown but have each selection be conditional...so the same number can't be selected twice.
    Any suggestions would be very much appreciated?

    Below is a code snippet...






    <table width="800" border="0" cellpadding="0">

    <tr>
    <td align="center"><span class="body_text">Question #1</span></td>
    <td align="center"><span class="body_text">Question #2</span></td>
    <td align="center"><span class="body_text">Question #3</span></td>
    <td align="center"><span class="body_text">Question #4</span></td>
    <td align="center"><span class="body_text">Question #5</span></td>
    <td align="center"><span class="body_text">Question #6</span></td>
    </tr>
    <tr>
    <td align="center">
    <select name="question_importance1">
    <option value="-">Ranking</option>
    <option value="1">1 </option>
    <option value="2">2 </option>
    <option value="3">3 </option>
    <option value="4">4 </option>
    <option value="5">5 </option>
    <option value="6">6 </option>
    </select>
    </td>
    <td align="center">
    <select name="question_importance2">
    <option value="-">Ranking</option>
    <option value="1">1 </option>
    <option value="2">2 </option>
    <option value="3">3 </option>
    <option value="4">4 </option>
    <option value="5">5 </option>
    <option value="6">6 </option>
    </select>
    </td>
    <td align="center">
    <select name="question_importance3">
    <option value="-">Ranking</option>
    <option value="1">1 </option>
    <option value="2">2 </option>
    <option value="3">3 </option>
    <option value="4">4 </option>
    <option value="5">5 </option>
    <option value="6">6 </option>
    </select>
    </td>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    Four general approaches:

    (1) Just wait until the user submits the form and then validate that there are no duplicate choices.

    (2) As each question is ranked, remove that <option> from the other <select>s. (Probably better to change its color or something, so that if the user changes his/her mind it's easier to re-enable it.)

    (3) Don't do it this way, at all. Instead, give the user a list of the 6 questions and let him/her drag/drop them into the order of importance. Doing a true drag/drop is a bit more work, but you should be able to find a JS library out there somewhere that will help you do it.

    (4) A variation on (3) that is much simpler to do:
    http://www.clearviewdesign.com/Newbie/Demos/jsDual.html
    You would of course get rid of the >> and Show List buttons. You would use << as a "reset" to start over. The user just clicks on the items on left in order of preference and they are moved to the right. There's some crap code in there that was needed for MSIE 4 which I think we can ignore nowadays.

  • Users who have thanked Old Pedant for this post:

    Pigeon Poop (03-20-2009)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,613
    Thanks
    80
    Thanked 4,634 Times in 4,596 Posts
    By the way, you are a JavaScript noob.

    Java is a completely different language that has little in common with JavaScript except the name.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,308
    Thanks
    203
    Thanked 2,563 Times in 2,541 Posts
    Another approach would be to use a matrix of radio buttons:-

    Code:
    <form name = "myform">
    Question Importance Rank 1 &nbsp &nbsp
    Q1<input type = "radio" name = "rad1" onclick = "checknodup()">
    Q2<input type = "radio" name = "rad1" onclick = "checknodup()">
    Q3<input type = "radio" name = "rad1" onclick = "checknodup()">
    Q4<input type = "radio" name = "rad1" onclick = "checknodup()">
    Q5<input type = "radio" name = "rad1" onclick = "checknodup()">
    Q6<input type = "radio" name = "rad1" onclick = "checknodup()">
    
    
    <br>
    Question Importance Rank 2 &nbsp &nbsp
    Q1<input type = "radio" name = "rad2" onclick = "checknodup()">
    Q2<input type = "radio" name = "rad2" onclick = "checknodup()">
    Q3<input type = "radio" name = "rad2" onclick = "checknodup()">
    Q4<input type = "radio" name = "rad2" onclick = "checknodup()">
    Q5<input type = "radio" name = "rad2" onclick = "checknodup()">
    Q6<input type = "radio" name = "rad2" onclick = "checknodup()">
    
    <br>
    Question Importance Rank 3 &nbsp &nbsp
    Q1<input type = "radio" name = "rad3" onclick = "checknodup()">
    Q2<input type = "radio" name = "rad3" onclick = "checknodup()">
    Q3<input type = "radio" name = "rad3" onclick = "checknodup()">
    Q4<input type = "radio" name = "rad3" onclick = "checknodup()">
    Q5<input type = "radio" name = "rad3" onclick = "checknodup()">
    Q6<input type = "radio" name = "rad3" onclick = "checknodup()">
    
    
    <script type = "text/javascript">
    function checknodup() {
    
    var rd1 = document.myform.rad1;
    var rd2 = document.myform.rad2;
    var rd3 = document.myform.rad3;
    
    for (var i = 0; i<=5; i++) {
    rd1[i].disabled = false;
    rd2[i].disabled = false;
    rd3[i].disabled = false;
    }
    
    for (var i=0; i<=5; i++) {
    if (document.myform.rad1[i].checked) {
    rd2[i].checked = false;
    rd3[i].checked = false;
    rd2[i].disabled = true;
    rd3[i].disabled = true;
    }
    
    if (document.myform.rad2[i].checked) {
    rd1[i].checked = false;
    rd3[i].checked = false;
    rd1[i].disabled = true;
    rd3[i].disabled = true;
    }
    
    if (document.myform.rad3[i].checked) {
    rd1[i].checked = false;
    rd2[i].checked = false;
    rd1[i].disabled = true;
    rd2[i].disabled = true;
    }
    }
    
    }
    
    
    </script>


    “I am so clever that sometimes I don't understand a single word of what I am saying.” - Oscar Wilde (Irish Poet, Novelist, Dramatist and Critic, 1854-1900)

  • Users who have thanked Philip M for this post:

    Pigeon Poop (03-20-2009)

  • #5
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks for the quick responses Old Pedant and Philip M. I really appreciate it. Take Care!


  •  

    Posting Permissions

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