Member Avatar for carlbrooks

I have a dropdown menu and some buttons below in my HTML:

<p>
    <select name="numberDrop" id="numberDropId" onClick="getButtons()">
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    </p>

    <p>
    <input class="answerBtns" name="answerA" type="button" value="A" />
    <input class="answerBtns" name="answerB" type="button" value="B" />
    <input class="answerBtns" name="answerC" type="button" value="C" />
    <input class="answerBtns" name="answerD" type="button" value="D" />
    <input class="answerBtns" name="answerE" type="button" value="E" />
    </p>

What I want to know is that how is it suppose to be coded so that the user can only select the same amount of buttons as the number from the drop down menu?


For example if the user selects the number 3 from the dropdown menu, then if the user clicks on a button, it will highlight the button in a color (lets say green) but the user can only have three buttons selected. If an additional button is clicked then that button would not be selected. The additional button can only be selected if the user unselects a selected button and then selects the button he wishes. This means that only 3 buttons can be selected at maximum. Also only 3 buttons minimum can be selected, if more or less buttons are selected than the number 3 then it should come up with an alert.

Is this suppose to be done in Javascript or Jquery and how can I use css to change the color of the ubttons to green if selected or back to grey if unselected?

Thank You

  • 2 Contributors
  • 3 Replies
  • 2K Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by urtrivedi
Member Avatar for urtrivedi

This is what you are looking for, But right now its not working in IE, u may try on other browser and then later you can build your logic more using this code.

<html>
<head>
<style  type="text/css">

.answerBtnsOff

{

	BACKGROUND-COLOR: #ffffff;

	BORDER-BOTTOM: #666666 1px solid;

	BORDER-LEFT: #666666 1px solid;

	BORDER-RIGHT: #666666 1px solid;

	BORDER-TOP: #666666 1px solid;	

	COLOR: #c;

	FONT: 11px Verdana,Arial,Helvetica,sans-serif;

	font-weight:bold;

}

.answerBtnsOn

{

	BACKGROUND-COLOR: GREEN;

	BORDER-BOTTOM: #666666 1px solid;

	BORDER-LEFT: #666666 1px solid;

	BORDER-RIGHT: #666666 1px solid;

	BORDER-TOP: #666666 1px solid;	

	COLOR: #ffffff;

	FONT: 11px Verdana,Arial,Helvetica,sans-serif;

	font-weight:bold;

}

</style>

<script lang=javascript>
var currenttotal=0;
function getButtons()
{
	document.getElementById("answerA").class="answerBtnsOff";
	document.getElementById("answerA").setAttribute("class","answerBtnsOff");
	document.getElementById("answerA").setAttribute("className","answerBtnsOff");

	document.getElementById("answerB").class="answerBtnsOff";
	document.getElementById("answerB").setAttribute("class","answerBtnsOff");
	document.getElementById("answerB").setAttribute("className","answerBtnsOff");

	document.getElementById("answerC").class="answerBtnsOff";
	document.getElementById("answerC").setAttribute("class","answerBtnsOff");
	document.getElementById("answerC").setAttribute("className","answerBtnsOff");

	document.getElementById("answerD").class="answerBtnsOff";
	document.getElementById("answerD").setAttribute("class","answerBtnsOff");
	document.getElementById("answerD").setAttribute("className","answerBtnsOff");

	document.getElementById("answerE").class="answerBtnsOff";
	document.getElementById("answerE").setAttribute("class","answerBtnsOff");
	document.getElementById("answerE").setAttribute("className","answerBtnsOff");
			
	currenttotal=0;
}
function btnclick(btn)
{
 	if(document.getElementById("numberDropId").value=="")
 	{
	 	alert('Select option');
	 	return false;
	}
	if (btn.class=="answerBtnsOn")
	{
		btn.class="answerBtnsOff";
		btn.setAttribute("class","answerBtnsOff");
		btn.setAttribute("className","answerBtnsOff");

		currenttotal--;
		return false;
	}
 	if(document.getElementById("numberDropId").value==currenttotal)
 	{
 	 	alert('Not allowed beyond limit, deselect other button');
 		return false;
 	}
	if (btn.class=="answerBtnsOff")
	{
		btn.class="answerBtnsOn";
		btn.setAttribute("class","answerBtnsOn");
		btn.setAttribute("className","answerBtnsOn");
		currenttotal++;
		return false;
	}
	
}
</script>
</head>
<body>
<p>
    <select name="numberDropId" id="numberDropId" onchange="getButtons()" >
    <option value=""></option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    </select>
    </p>

    <p>
    <input class="answerBtnsOff" name="answerA" id="answerA" type="button" value="A"  onclick='javascript:btnclick(this);' />
    <input class="answerBtnsOff" name="answerB" id="answerB"  type="button" value="B"  onclick='javascript:btnclick(this);'  />
    <input class="answerBtnsOff" name="answerC" id="answerC"  type="button" value="C"   onclick='javascript:btnclick(this);' />
    <input class="answerBtnsOff" name="answerD" id="answerD"  type="button" value="D"   onclick='javascript:btnclick(this);' />
    <input class="answerBtnsOff" name="answerE" id="answerE"  type="button" value="E"   onclick='javascript:btnclick(this);' />
    </p>
    </body>
    </html>
Edited by urtrivedi because: n/a
Member Avatar for carlbrooks

Thank you very much for the code. do you know why it does not work in Internet Explorer

Member Avatar for urtrivedi

how to update class attribute in query is not known to me. some of line above to update class tag is not allowed in ie, that is to be comment out if browser is IE.

Edited by urtrivedi because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.