SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Generate/update link depending on drop-down selections

    I am quite new with JS; I do have some HTML knowledge. Any help with full JS examples will be greatly appreciated.

    I am trying to build a simple page that displays 5 drop-down lists (shown below) and one link.

    DROP-DOWNLISTS:

    <select id=datey>
    <option value="2006">2006</option>
    <option value="2007">2007</option>
    <option value="2008">2008</option>
    </select>

    <select id=datem">
    <option value="01">January</option>
    <option value="02">February</option>
    <option value="03">March</option>
    <option value="04">April</option>
    <option value="05">May</option>
    <option value="06">June</option>
    <option value="07">July</option>
    <option value="08">August</option>
    <option value="09">September</option>
    <option value="10">October</option>
    <option value="11">November</option>
    <option value="12">December</option>
    </select>

    <select id=dated>
    <option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    <option value="06">6</option>
    <option value="07">7</option>
    <option value="08">8</option>
    <option value="09">9</option>
    <option value="10">10</option>
    <option value="11">11</option>
    <option value="12">12</option>
    <option value="13">13</option>
    <option value="14">14</option>
    <option value="15">15</option>
    <option value="16">16</option>
    <option value="17">17</option>
    <option value="18">18</option>
    <option value="19">19</option>
    <option value="20">20</option>
    <option value="21">21</option>
    <option value="22">22</option>
    <option value="23">23</option>
    <option value="24">24</option>
    <option value="25">25</option>
    <option value="26">26</option>
    <option value="27">27</option>
    <option value="28">28</option>
    <option value="29">29</option>
    <option value="30">30</option>
    <option value="31">31</option>
    </select>

    <select id=sect">
    <option value="RFIR">First</option>
    <option value="RSEC">Second</option>
    <option value="RTHI">Third</option>
    <option value="RFOU">Fourth</option>
    <option value="RFIF">Fifth</option>
    </select>

    <select id=page>
    <option value="01">1</option>
    <option value="02">2</option>
    <option value="03">3</option>
    <option value="04">4</option>
    <option value="05">5</option>
    <option value="06">6</option>
    <option value="07">7</option>
    <option value="08">8</option>
    <option value="09">9</option>
    <option value="10">10</option>
    </select>


    LINK:

    <A HRef="http://www.site.com/print/pages/20080121/pdfs/RFIR20080121-001.pdf">PDF</A>


    If the above link corresponds to the following format:
    <A HRef="http://www.site.com/print/pages/YYYYMMDD/pdfs/SECTYYYYMMDD-XXX.pdf">PDF</A>,

    I would like to change the link's URL values (YYYY, MM, DD, SECT and XXX) depending on the choices made in the drop-down lists, so that any time one of the drop-down lists selection changes, the link's URL is updated.

    Any help will be greatly appreciated.
    Kind regards, Mark.

  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
    4 Thread(s)
    Before we begin, you should fix up some HTML errors. The id attributes should be enclosed in double quotes.

    First the href will want an identifier so you can easily access it to make the changes

    Code HTML4Strict:
    <a id="pdflink" href="http://www.site.com/print/pages/20080121/pdfs/RFIR20080121-001.pdf">PDF</a>

    When the dropdown lists are changed, they will need to be stored somewhere, so that the combined values can then be used to update the link. They can be stored on the link itself.

    Then you can update it with a function like this.

    Code Javascript:
    function updatePDF() {
        var link = document.getElementById('pdflink');
        var day = link.year + link.month + link.day;
        var path = 'http://www.site.com/print/pages/' + day + '/pdfs/' + link.sect + day + '-' + link.page + '.pdf';
        link.setAttribute('href', path);
    }

    When the lists are changed you want to update the link properties, so we'll attach a function to do that.

    Code Javascript:
    function updateYear(e) {
        e = e || window.event;
        targ = e.target || e.srcElement;
        updatePDFProperty('year', targ.value);
    }
    document.getElementById('datey').onchange = updateYear;

    I'll leave you to write the similar code for the other lists.

    Because there are several functions that update the one location, we've avoid ed having that location mentioned in several places by passing the value to a function that does the updating for us, which in turn can update the link itself.

    Code Javascript:
    function updatePDFProperty(property, value) {
        var link = document.getElementById('pdflink');
        link[property] = value;
        updatePDF();
    }
    function updatePDF() {
        var link = document.getElementById('pdflink');
        var day = link.year + link.month + link.day;
        var path = 'http://www.site.com/print/pages/' + day + '/pdfs/' + link.sect + day + '-' + link.page + '.pdf';
        link.setAttribute('href', path);
    }

    When the page first loads there will be no values stored, so you will want to set up some default values.

    Code Javascript:
    function initPDF(property, value) {
        var link = document.getElementById('pdflink');
        link['year'] = '2006';
        link['month'] = '01';
        ...
    }
    initPDF();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, pmw57.

    I have sort of put together the HTML code for the web page (attached) with the comments given, but it is not yet working. Any additional pointers will be appreciated.

    Thank you all.
    Attached Files Attached Files
    Last edited by maedac; Jan 22, 2008 at 12:02. Reason: Changed attachment.


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
  •