check select values - jquery?

GRooVeZ · May 16, 2012

hi

people can vote 3 times with 3 select menus

but i want them not to be able to choose 3x the same select option

the options in the select menus come out of the database

this is how i let them vote

<?php

include("./includes/egl_inc.php");
$secure = new secure();
$secure->secureGlobals();
session_start();

if (isset ($_GET['match'])) 
{ 

$matchid = (int)$_GET['match'];
$_SESSION['matchid'] = $matchid;			
$matchmaps = mysql_fetch_array(mysql_query("SELECT maps,game FROM ffa_matches WHERE id=$matchid"));
$matchmapschecker = $matchmaps[maps];
$matchgamechecker = $matchmaps[game];

$maps=mysql_query("SELECT id,map FROM ffa_maplists where gameid = $matchgamechecker");
while(list($id,$map)=mysql_fetch_row($maps))
{ 
$maplist.="<option value='$id'>$map</option>\n";	

}


  $out[body].="<table width='98%' border='0' cellspacing='0' cellpadding='0' style='border:1px solid black'>
   <tr style='color:#cccccc; background-color:black;'>
		<td valign='middle' background='$config[bg2]' align='center' colspan='10'>

			<br/>Choose Maps<br/>
		</td>
   </tr></table><table width='98%' border='0' cellspacing='0' cellpadding='0' style='border:1px solid black'>	
	<tr style='background-color:black;'>
		<td>
		<form action='ffainsertmapvote.php' method='post'>
		<select name='map1'>$maplist</select>
		<select name='map2'>$maplist</select>
		<select name='map3'>$maplist</select>
		<input type='hidden' name='match' value='$matchid' />
		<input type='submit' value='Vote' />
		</form> </td>
</tr></table>";


}



include("$config[html]");
?>

do i need jquery to fix this? i dont want the user to be able to go to a next screen without having max 2 the same options selected

thx in advance !

trq · May 17, 2012

You would likely want to validate this with JavaScript and PHP.

scootstah · May 17, 2012

No, you don't need jQuery for this. Simple Javascript will do.

The Letter E · May 17, 2012

No, you don't need jQuery for this. Simple Javascript will do.

If you're not familiar with standard javascript, jQuery may be a more malleable option for you.

GRooVeZ · May 17, 2012

i found this javascript

if (select_box.value == ’0′){

alert(“You must select an option”);

return false;

}

how to make it check for 3 the same options? or two?

if (select_box.value == select_box2.value){

alert(“You cant choose the same options”);

return false;

}

is this correct for two?

and how do i do 3?

thanks !

scootstah · May 18, 2012

Since you're not using an AJAX form, it is kind of pointless to do this with Javascript. You need another page load anyway so you might as well just use PHP. You're going to have to use PHP anyway, because Javascript is easily circumvented - and since you need another page load anyway the Javascript won't matter.

Save the selection to a session each time they submit, and then just omit the ones in the session from the dropdown box when they go to vote again.

Psycho · May 18, 2012

I would definitely implement a JavaScript solution to provide immediate feedback without needing a page refresh or AJAX call. Of course a server-side validation would be required. Here is a quick-and-dirty solution

<html>
<head>
<script type="text/javascript">

function updateSelects()
{
    var opt1 = document.getElementById('opt1');
var opt2 = document.getElementById('opt2');
var opt3 = document.getElementById('opt3');

    var opt1idx = opt1.selectedIndex;
var opt2idx = opt2.selectedIndex;
var opt3idx = opt3.selectedIndex;

for(i=1; i<opt1.options.length; i++)
{
	opt1.options[i].disabled = (i==opt2idx || i==opt3idx);
	opt2.options[i].disabled = (i==opt1idx || i==opt3idx);
	opt3.options[i].disabled = (i==opt1idx || i==opt2idx);
}

}

</script>
</head>

<body>

Option 1:
<select name="opt1" id="opt1" onchange="updateSelects();">
    <option value="">- Select -</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>

Option 2:
<select name="opt2" id="opt2" onchange="updateSelects();">
    <option value="">- Select -</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>

Option 3:
<select name="opt3" id="opt3" onchange="updateSelects();">
    <option value="">- Select -</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>

</body>
</html>

GRooVeZ · May 18, 2012

thx. im gonna look if i can get that to work !

GRooVeZ · May 20, 2012

hey man that works really nice

got two things that i cant figure out

how to make it so that u can choose an option two times? but not 3?

also i added a line to my code to get as first option '- Choose Map -'

how to make it check that u selected a map?

now u can press submit when u didnt select 3 maps.

appreciate ur help

THX

Psycho · May 21, 2012

I'm not going to do all the work for you. This is a help forum, not a do it for me forum. For preventing a form submission until the user selects a map you could add an onSubmit action to the form tag to call a function. That function would check if a value has been selected. If yes, allow the submission. If not, provide an error and prevent the submission.

Allowing an option to be selected twice, but not three times is considerably more difficult. It's definitely possible, but I don't have the time to do it the right way so that it is scalable. But, with only three options and wanting to allow the same option to be selected, this hard-coded example will work

function updateSelects()
{
    var opt1 = document.getElementById('opt1');
    var opt2 = document.getElementById('opt2');
    var opt3 = document.getElementById('opt3');
    var opt1idx = opt1.selectedIndex;
    var opt2idx = opt2.selectedIndex;
    var opt3idx = opt3.selectedIndex;

    if(opt1idx==opt2idx)
    {
        opt3.options[opt1idx].disabled = true;
    }
    if(opt1idx==opt3idx)
    {
        opt2.options[opt1idx].disabled = true;
    }
    if(opt2idx==opt3idx)
    {
        opt1.options[opt2idx].disabled = true;
    }

    return;
}

GRooVeZ · May 21, 2012

cool man thx allot, that works again

im gonna try to make the form validate myself, thx for the directions

there is one small bug in the vote system, but im not sure whats causing this

when u first select two the same options. the thirth will be not selectable, but if u change ur fist two choises, its still not selectable,

but this is totally no big deal im really happy with how its working now

u can check it here

http://www.acidleague.com/League/ffachoosemaps.php?match=3

thx !

Psycho · May 22, 2012

Fixed bug and simplified duplicate check code

function updateSelects()
{
    var opt1 = document.getElementById('opt1');
var opt2 = document.getElementById('opt2');
var opt3 = document.getElementById('opt3');
    var opt1idx = opt1.selectedIndex;
var opt2idx = opt2.selectedIndex;
var opt3idx = opt3.selectedIndex;

    //Enable all options
var optCount = opt1.options.length;
for(optIdx=0; optIdx<optCount; optIdx++)
{
	opt1.options[optIdx].disabled = false;
	opt2.options[optIdx].disabled = false;
	opt3.options[optIdx].disabled = false;
}

//Disable options selected twice
    opt3.options[opt1idx].disabled = (opt1idx==opt2idx);
    opt2.options[opt1idx].disabled = (opt1idx==opt3idx);
    opt1.options[opt2idx].disabled = (opt2idx==opt3idx);

return;
}

Sign In

check select values - jquery?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information