how to use current value

jonnekke · #1 (**permalink**) 02-25-09, 05:35 AM

Hi there...

I got a form on my site with a select in it:

HTML Code:

<select name="venster4" size="1">
<option value="image1">Image One</option>
<option value="image2">Image Two</option>
<option value="image3">Image Three</option>
<option value="image4">Image Four</option>
<option value="image5">Image Five</option>
<option value="image6">Image Six</option>
</select>

next to this select box I want to create a link to preview the current
selected image in the select. This should open a pop-up and show
the selected image. So the value of the option should be passed to a link
and opened in the pop-up. This should all be happening before the form
is submitted.

Who can help me out here..

_j

Yeroon · #2 (**permalink**) 02-25-09, 06:50 AM

This should work if you put the image urls in the value of the select oiptions:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript">
function setPopUp(sel)
{

	for(var i = 0; i < sel.options.length;i++){
		if(sel.options[i].selected && sel.options[i] != "0"){
			var myDiv = document.getElementById("divLink");

			myDiv.innerHTML = myDiv.htmlContent = "<a href='#' onclick='javascript:window.open(\"" + sel.options[i].value + "\");'>open preview</a>";
		}
	}

}
</script>

</head>

<body class="mybody">
<form action="post">
<select name="venster4" size="1" onchange="setPopUp(this);">
<option value="0">Select one</option>
<option value="images/image1.jpg">Image One</option>
<option value="images/image2.jpg">Image Two</option>
<option value="images/image3.jpg">Image Three</option>
<option value="images/image4.jpg">Image Four</option>
<option value="images/image5.jpg">Image Five</option>
<option value="images/image6.jpg">Image Six</option>
</select>
<div id="divLink"></div>
</form>

</body>
</html>

jonnekke · #3 (**permalink**) 02-25-09, 06:58 AM

this comes very close to what I want

exept the fact that there is always one of the options selected.
so there will be no value=0 option.
So it needs to set the preview link also when the page is loaded.

_j

Yeroon · #4 (**permalink**) 02-25-09, 07:06 AM

Add the id tag to your select:

Code:

<select id="venster4" name="venster4" size="1" onchange="setPopUp(this);">

And add this to your body element:

Code:

<body onload="setPopUp(document.getElementById('venster4'));">

jonnekke · #5 (**permalink**) 02-25-09, 07:29 AM

great! it works... thnx a lot..

there is one small layout issue.. I tried to add width, height and scrollbar to the
javascript.. but this isn't working like this:

HTML Code:

onclick='javascript:window.open(\"../../images/banner/" + sel.options[i].value + "\",\"location=0,status=0,scrollbars=1,width=200,height=100\");'

you got any idea why?...
seems like normaal javascript to me..

_j

Yeroon · #6 (**permalink**) 02-25-09, 07:45 AM

You added the width height properties to the popup windowname.

Change it to:

Code:

onclick='javascript:window.open(\"../../images/banner/" + sel.options[i].value + "\",\"mypopupwindow\",\"location=0,status=0,scrollbars=1,width=200,height=100\");'

Hsekhar · #7 (**permalink**) 03-02-09, 07:57 AM

This is what I have been looking for myself, Thanks for the solution. I think I need to improve a lot in Javascript.