Help needed to get selected values from select boxes.

104 Posts

scraf Reply #1, 19 years, 7 months ago

I need to get the selected variables from eventually five drop down select boxes and, well, then send them off.

I have it working, but there’s a big spanner in the works.

This code is progressing swimmingly...

<html><head><title><title>

<script language="javascript" type="text/javascript">
<!--
function go(box1,box2)
{
var colour = box1.selectedIndex;
var colour2 = box2.selectedIndex;
document.getElementById('div1').innerHTML = "colour1 = " + colour + "<br />colour2 = " + colour2;
}
-->
</script>

</head>
<body>
<form>
colour 1
<select name="box1" onchange="go(box1,box2)">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
colour2
<select name="box2" onchange="go(box1,box2)">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</form>

<div id="div1"></div>

</body>
</html>

The desired result can be seen here...
http://scraf.nl/demos/ajax/help01.php

....but unfortunately I need to integrate this code with dynamically produced select boxes that have an array as their name, as in ....


<select name="boxes[]" onchange="go(this)">  // not sure about the "go(this)" yet
<option>0</option>
<option>1</option>
<option>2</option>
</select>
colour2
<select name="boxes[]" onchange="go(this)"> // not sure about the "go(this)" yet
<option>0</option>
<option>1</option>
<option>2</option>
</select>

Can anyone head me in the right direction on how to get the selected items? I guess I have to loop through the forms in the document somehow?

1,611 Posts

ZAP Reply #2, 19 years, 7 months ago

Hmm. I’m not sure what the hangup is here. I just may not be getting it, however...

Some ideas:
* Give each select menu an id and use getelementbyid
* Submit the form onchange (that will certainly give you its values, and would seem to be the simplest solution)
* Translate the non-array variable names to their array equivalents in PHP or JavaScript instead of changing them on the form

Does one of those solve the problem for you?

"Things are not what they appear to be; nor are they otherwise." - Buddha

"Well, gee, Buddha - that wasn't very helpful..." - ZAP

Useful MODx links: documentation | wiki | forum guidelines | bugs & requests | info you should include with your post | commercial support options

104 Posts

scraf Reply #3, 19 years, 7 months ago

Thanks for the quick reply ZAP, I need to take a break ( involving sleep ) so I won’t be trying out anything further for a bit, but just to maybe things a little clearer as to what I am trying to do is...

I’m working with code from an existing application, from cubecart as it goes, and trying to make an image react to the selections from the drop downs.

Someone chooses blue shoes, they see blue shoes, same with suede.

What I need to do is get the variables to flash, flash weaves the magic colourwise.

Here’s an example of the code I’m having to fish the variables out of...

			<td>
				<select name="productOptions[]">
					<option value="4">
					black
					
					</option>
					
					<option value="5">
					blue
					
					</option>
					
					<option value="6">
					gray
					
					</option>

					
					<option value="3">
					lime
					
					</option>
					
					<option value="1">
					red
					
					</option>
				</select>
			</td>
		</tr>
		
		<tr>

			<td><strong>language</strong></td>
			<td>
				<select name="productOptions[]">
					<option value="11">
					english
					
					</option>
					
					<option value="10">
					french
					
					</option>

				</select>
			</td>
		</tr>

... what I’m trying to do is to get the selected values out of the select boxes in real time, and without having to hack around the core code if possible.

MODX Staff
10,725 Posts

opengeek Reply #4, 19 years, 7 months ago

Add placeholders like [+selected.4+] [+selected.5+] in each option tag like so:

<option value="4"[+selected.4+]>

Then simply use a snippet to set the proper placeholder equal to ’ selected="selected"’ from where ever you are determining what should be selected (from $_SESSION, $_POST, etc.).

e.g.

$modx->setPlaceholder('selected.' . $_SESSION['selectedProductOption'], ' selected="selected"');

Jason Coward
Chief Architect @ MODX
http://www.jasoncoward.com | http://twitter.com/drumshaman | https://github.com/opengeek

104 Posts

scraf Reply #5, 19 years, 7 months ago

Thanks team, but I managed to sort it. Amazing how after a day of fruitless debugging and something works first time !

Revised code....

<html><head><title><title>

<script language="javascript" type="text/javascript">
<!--

function go()
{
var colour = document.getElementsByTagName('select')[0].selectedIndex;
var colour2 = document.getElementsByTagName('select')[1].selectedIndex;
document.getElementById('div1').innerHTML = "colour1 = " + colour + "<br />colour2 = " + colour2;
}
-->
</script>

</head>
<body>
<form>
colour 1
<select name="box[]" onchange="go()">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
colour2
<select name="box[]" onchange="go()">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
</form>

<div id="div1"></div>

</body>
</html>

http://scraf.nl/demos/ajax/help02.php