How to select value to show in thickbox?

Hello,

I am using jquery’s thickbox. I have the basic following form which has some dropdowns. Each dropdown has a Info link besides it. I am trying to achieve is:

That when a user presses the info link it should open the showinfo.php?pid=selected value of that dropdown in the thickbox.

So in thickbox link it should be something like: showinfo.php?pid=123. But i don’t know how to get the value of dropdown and open the thickbox link i.e: showinfo.php at the same time ?

Below is my code:

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

<body>
<form method="post" id="f1" name="f1">
<select name="dd1">
	<option value="0">0</option>
	<option value="1">1</option>
	<option value="2">2</option>
</select> <a class="thickbox" href="showinfo.php?p=document.f1.dd1.value">Info</a>
<br />
<select name="dd2">
	<option value="0">0</option>
	<option value="1">1</option>
	<option value="2">2</option>
</select> <a class="thickbox" href="showinfo.php?p=document.f1.dd2.value">Info</a>
</form>

</body>
</html>

Thanks.

One of two things will need to occur.

Either:

  1. When the select box is changed, that it updated the appropriate href value
  2. Or, when the link is clicked, the link gets the appropriate href value from the select box

For example, with the first option:


<a id="dd1link" class="thickbox" ...>
...
<a id="dd2link" class="thickbox" ...>
...


function updateSelectLink() {
    var link = document.getElementById(this.id + 'link');
    link.href = 'showinfo.php?' + this.value;
}
var form = document.getElementById('f1');
form.elements.dd1.onchange = updateSelectLink;
form.elements.dd2.onchange = updateSelectLink;

Hi,

Thanks for the response. I was wondering How to go about the 2nd option ? I really don’t want to use a function for this and would prefer the 2nd option.

Thanks.

With the second option you would associate an onclick event of the link to a function


<a id="dd1_link" class="thickbox" ...>


var index = 1,
    link;
while (true) {
    link = document.getElementById('dd' + index + '_link');
    if (!link) {
        break;
    }
    link.onclick = updateLinkFromSelect;
    index += 1;
}

so that the updateLinkFromSelect code can retrieve the appropriate select field and set the href value of the link.


function updateLinkFromSelect() {
    var link = this,
        select = document.getElementById(link.id.split('_')[0]);
    link.href = 'showinfo.php?' + select.value;
}

:eek: Come on - stop kidding and get serious.

It might be possible to do it all without functions, but your future-self will find it very hard to understand what the function-free code does, and won’t be thanking you at all.

An alternative is to put each select in a separate individual form, so that when you submit the form, which can be easily triggered from a link, the form automatically sets the value after the question mark.

Hi,

Uisng your code I did the following:

<a class="thickbox" href="" onclick="javascript:this.href = 'showinfo.php?pid=' + document.f1.dd1.value;">Info</a>

It seems to be working.

Thanks.

There’s a difference between working, and working efficiently.

  1. Yes it works when there’s only one or two links, but it fails to be practical when you’re dealing with 10 links, or even 100 of them.

  2. The inline onclick event is already considered a script, so the “javascript:” part is completely useless. Lose it.

  3. Functions have not been avoided, they have only been hidden. The web browser takes your inline event string and wraps a function around it anyway.


function () {
    this.href = 'showinfo.php?pid=' + document.f1.dd1.value;
}

So you have not avoided functions at all. You’ve only disguised them.

All the best.