Buttons do not refresh when an option from drop down menu changes

JavaScript
1

This is hopefully my last jquery question. I have a slight issue with my buttons and dropdown menu. What happens is lets say user chooses option type “ABCDE” in first dropdown menu and then second dropdown menu chooses the value “4” for the number of answers and then clicks on the buttons “A”,“B”,“C” and “E”, well if the user then decides to change the option type to “ABC”, the buttons “A”, “B” and “C” are still selected from the last time they have been selected.

What I want is that if the Option Type (OptionDropId) changes, then buttons selected is refreshed so no buttons are selected from the last time they have been selected.

This did used to work but when I included my change() event handler in my code which I need, the buttons do not refresh whenever a new dropdown option (OptionDropId) is selected. So I think the edit of the code may need to happen in the code below:

             $(document).ready(function ()
        {
            var OptDrop = new Array();
    
    OptDrop.abc = ["",1,2];
    OptDrop.abcd = ["",1,2,3];
    OptDrop.abcde = ["",1,2,3,4];
    OptDrop.trueorfalse = [1];
    OptDrop.yesorno = [1];
            
            $("#optionDropId").change(function ()
            {
                var selectedValue = $(this).val();
                $("#numberDropId").html("");
                $.each(OptDrop[selectedValue], function (x, y)
                {
                    $("#numberDropId").append($("<option></option>").attr("value", y).html(y));
                });
            }); 
    
            $("#optionDropId").change();
        });

My code is in JSfiddle, (the second dropdown menu and buttons may not appear in JSFiddle but the code does work properly, I feel it is better displaying code in JSfiddle then in my questions as it will take up a lot of space. If you want to see working version then post code in your web document and it should work).

My Code: click below

2

I included a jQuery handler for my dropdown menus so that when something is selected in the first dropdown menu, it will manipulate the options in the second dropdown menu. Now what the user does is pick the option type in the first dropdown (OptionDropId) menu and then in the second dropdown (NumberDropId) menu the user selects the number of answers wanted. Below that dropdown menu a list of buttons would appear and the user selects the number of buttons depending on how many the user has selected in the second dropdown menu.

Now let’s say user clicks on two buttons and then changes the option type (first dropdown menu), then the buttons selected are still selected, I want the buttons to be unselected if the option type has changed.

This used to work but since I have included my change event handler to bind my jquery (this code is needed), it does not unselect buttons when the option type changes.

What do I need to do to fix this:

Below is my jquery and function of select and unselect buttons:


    $(document).ready(function ()
    {
        var OptDrop = new Array();
    
        OptDrop.abc = ["",1,2];
        OptDrop.abcd = ["",1,2,3];
        OptDrop.abcde = ["",1,2,3,4];
        OptDrop.trueorfalse = [1];
        OptDrop.yesorno = [1];
    	    
        $("#optionDropId").change(function ()
        {
            var selectedValue = $(this).val();
            $("#numberDropId").html("");
            $.each(OptDrop[selectedValue], function (x, y)
            {
                $("#numberDropId").append($("<option></option>").attr("value", y).html(y));
            });
        }); 
    
        $("#optionDropId").change();
    });       
    
    var currenttotal=0;
    function getButtons()
    {
    	document.getElementById("answerA").className="answerBtnsOff";
    	document.getElementById("answerB").className="answerBtnsOff";
    	document.getElementById("answerC").className="answerBtnsOff";
    	document.getElementById("answerD").className="answerBtnsOff";
    	document.getElementById("answerE").className="answerBtnsOff";		
    	document.getElementById("answerTrue").className="answerBtnsOff";
    	document.getElementById("answerFalse").className="answerBtnsOff";
    	document.getElementById("answerYes").className="answerBtnsOff";
    	document.getElementById("answerNo").className="answerBtnsOff";
     
    	currenttotal=0;
    }
    
    function btnclick(btn)
    {
     	if(document.getElementById("numberDropId").value=="")
     	{
    	 	alert('You must first select the number of answers you require from the drop down menu');
    	 	return false;
    	}
    	if (btn.className=="answerBtnsOn")
    	{
    		btn.className="answerBtnsOff";
    		currenttotal--;
    		return false;
    	}
     	if(document.getElementById("numberDropId").value==currenttotal)
     	{
     	 	alert('You are not allowed beyond the limit of the number of answers you require, deselect other button');
     		return false;
     	}
    	if (btn.className=="answerBtnsOff")
    	{
    		btn.className="answerBtnsOn";
    		currenttotal++;
    		return false;
    	}
     
    }

Html code is below:


    <form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);">
      <table id="optionAndAnswer">
        <tr>
          <th colspan="2">
            Option and Answer
          </th>
        </tr>
        <tr>
          <td>Option Type:</td> 
          <td>
            <select name="optionDrop" id="optionDropId" onChange="getDropDown()">
              <option value="">Please Select</option>
              <option value="abc">ABC</option>
              <option value="abcd">ABCD</option>
              <option value="abcde">ABCDE</option>
              <option value="trueorfalse">True or False</option>
              <option value="yesorno">Yes or No</option>
            </select>
          </td>
       </tr>
       <tr>
         <td>Number of Answers:</td>
         <td>
           <select name="numberDrop" id="numberDropId" onChange="getButtons()">
           </select>
         </td>
       </tr>
       <tr>
         <td>Answer</td>
         <td>
           <input class="answerBtns" name="answerAName" id="answerA" type="button" value="A" onclick="javascript:btnclick(this);"/>
           <input class="answerBtns" name="answerBName"	id="answerB" type="button"   value="B" onclick="javascript:btnclick(this);"/>
           <input class="answerBtns" name="answerCName" id="answerC" type="button"   value="C" onclick="javascript:btnclick(this);"/>
           <input class="answerBtns" name="answerDName" id="answerD" type="button"  	value="D" onclick="javascript:btnclick(this);"/>
           <input class="answerBtns" name="answerEName" id="answerE" type="button"   value="E" onclick="javascript:btnclick(this);"/>
           <input class="answerBtns" name="answerTrueName" id="answerTrue" type="button"  	value="True" onclick="javascript:btnclick(this);"/>
           <input class="answerBtns" name="answerFalseName" id="answerFalse" type="button"   value="False" onclick="javascript:btnclick(this);"/>
           <input class="answerBtns" name="answerYesName" id="answerYes" type="button"   value="Yes" onclick="javascript:btnclick(this);"/>
           <input class="answerBtns" name="answerNoName" id="answerNo" 		type="button" value="No" onclick="javascript:btnclick(this);"/>
         </td>
        </tr>
      </table>
    </form>
3

Isn’t this the same problem you posted in your other thread in this forum.

Why are you posting again?

4

To be honest I have been struggling on this for hours and I really want to be able to get this part complete before my meeting tommorow so then I can show my supervisor how questions and answers are submitted. Because of my desperation I posted it again but with the code in the forum rather than in another source code site to hopefully have better luck on this.

5
Off Topic:

Then imo the proper thing to have done was post the code in another post in your original thread and not create another thread.

Creating another thread like this creates an impression , at least on me, that you are using a “scatter gun approach” to getting help and so indirectly jumping the queue. This sort of tactic certainly doesn’t do anything for my, and I suspect some other people’s as well, motivation to try to help.

I’ve described to you in your other threads how you can use the browser error console or alert()‘s to check variables’ values and/or code logic.

6

[Threads merged.]