SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    556
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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:

    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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    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:

    Code html4strict:
    <a id="dd1link" class="thickbox" ...>
    ...
    <a id="dd2link" class="thickbox" ...>
    ...

    Code javascript:
    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;
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    556
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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:

    Code html4strict:
    <a id="dd1link" class="thickbox" ...>
    ...
    <a id="dd2link" class="thickbox" ...>
    ...

    Code javascript:
    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.

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Tapan View Post
    I was wondering How to go about the 2nd option?
    With the second option you would associate an onclick event of the link to a function

    Code html4strict:
    <a id="dd1_link" class="thickbox" ...>

    Code javascript:
    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.

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

    Quote Originally Posted by Tapan View Post
    I really don't want to use a function
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Evangelist Tapan's Avatar
    Join Date
    May 2005
    Location
    India
    Posts
    556
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    With the second option you would associate an onclick event of the link to a function

    Code html4strict:
    <a id="dd1_link" class="thickbox" ...>

    Code javascript:
    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.

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



    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:

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

    Thanks.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by Tapan View Post
    It seems to be working.
    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.

    Code:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •