SitePoint Sponsor

User Tag List

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

    Question Generating a URL based on two drop down box selections.

    Hi All,

    Quick query for a javascript pro i think.

    I have a javascript function that will load a CSV file in to a grid:

    Code:
    function load(url){
    table.setURL(url);
    table.request();
    }
    
    <button onClick="load('URLTONEWFILE.CSV')">Load New File</button>
    This works perfectly, however I need to take it a step further to load CSV files, based on user choices from two drop down boxes. Something like this:

    Code:
    <form name="myform"">
    <select name="mycolour">
    <option value="red">RED</option>
    <option value="yellow">YELLOW</option>
    <option value="blue>BLUE</option>
    </select>
    <select name="myshape">
    <option value="square">SQUARE</option>
    <option value="circle">CIRCLE</option>
    <option value="triangle">TRIANGLE</option>
    </select>
    <button onClick="load('/csv/mycolour_myshape.csv')">Load New File</button>
    </form>
    So the bit i need assistance with is the php code required to generate the onClick URL in this format:

    '/folder/' + 'mycolour variable' + '_' + 'myshape variable' + '.csv'
    Any ideas?

    Many thanks for your help.

  2. #2
    I'll take mine raw silver trophy MikeFoster's Avatar
    Join Date
    Dec 2002
    Location
    Alabama, USA
    Posts
    2,560
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi mattpark, Welcome to the forums!

    I know you said PHP, but it looks like you meant Javascript

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Demo</title>
    <script type='text/javascript'>
    
    window.onload = function() {
      document.forms['myform'].onsubmit = csvLoad;
    };
    
    function csvLoad() {
      var
        url,
        colourSel = this.elements['mycolour'],
        shapeSel = this.elements['myshape'];
    
      url = '/csv/' + (colourSel.options[colourSel.selectedIndex].value) +
        '_' + (shapeSel.options[shapeSel.selectedIndex].value) + '.csv';
    
      alert(url); // debug
    
      table.setURL(url);
      table.request();
      return false;
    }
    </script>
    </head>
    <body>
    
    <form name="myform">
    <select name="mycolour">
    <option value="red">RED</option>
    <option value="yellow">YELLOW</option>
    <option value="blue">BLUE</option>
    </select>
    <select name="myshape">
    <option value="square">SQUARE</option>
    <option value="circle">CIRCLE</option>
    <option value="triangle">TRIANGLE</option>                                                               
    </select>
    <input type='submit' value='Load New File'>
    </form>
    
    </body>
    </html>


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
  •