SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Build String Based On Several Drop downs

    Hello,

    Long time reader, first time poster on this particular forum...

    I'm trying to build a string based on three drop downs. As each drop down choice is made, I want to append the string and redisplay it. When finished the string will be a complete (but not hyperlinked) URL.

    My drop downs look like this:
    HTML Code:
    <select name="first">
      <option value="ADM">ADM</option>
      <option value="DAM">DAM</option>
      <option value="MAD">MAD</option>
    </select>
    <br />
    <select name="second">
      <option value="TCP">TCP</option>
      <option value="ACK">ACK</option>
      <option value="RIP">RIP</option>
    </select>
    <br />
    <select name="third">
      <option value="DEF">DEF</option>
      <option value="RES">RES</option>
      <option value="DOM">DOM</option>
    </select>
    My PHP page looks like this:
    PHP Code:
    $link 'http://www.exampledomain.com/?first=';
    $first 'xxx';
    $second 'xxx';
    $third 'xxx';
    echo 
    '<div name="makeTheLink">';
    print 
    $link.$first.'&second='.$second.'&third='.$third;
    echo 
    '</div>'
    Here's how it supposed to work...

    When an admin has used the first drop down to pick the value of the "first" variable, the string is updated and redisplayed like so:
    first=ADM&second=xxx&third=xxx

    Next, when an admin has used the second drop down to pick the value of the "second" variable, the string is updated and redisplayed like so:
    first=ADM&second=ACK&third=xxx

    Finally, when an admin has used the third drop down to pick the value of the "third" variable, the string is updated and redisplayed like so:
    first=ADM&second=ACK&third=DOM

    That's all I have. I'm stuck. I'm guessing I need an "onChange" event with each drop down?.?. Also, I need to refresh the "makeTheLink" div when an onChange event fires?.?. How do you tie all of this together? Is self rolled JavaScript the best solution or would jQuery be better?

    Thanks In Advance,
    Noob

  2. #2
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    window.onload=function() {
    var aObj = document.getElementsByTagName('select');
    var i = aObj.length; 
    while(i--) { 
        aObj[i].onchange = function() {buildString(aObj);};
        }
    };
    
    function buildString(arr) {
    var url = 'http://www.exampledomain.com/?';
    var str = '';
    for(var i=0; len=arr.length, i<len; i++) { 
        str += arr[i].name+'='+arr[i].value+'&amp;';
        }
    str = str.replace(/\&amp;$/, '');
    document.getElementById('makeTheLink').innerHTML = url + str;
    }

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you for the reply! That works perfectly!

    In another part of my application, I'm trying to do the same thing except pass in an array of element names to getElementsByName. I have this:
    Code:
    window.onload=function() {
         var theArr=new Array();
         theArr[0]="entity";
         theArr[1]="area";
         theArr[2]="position";
         for(var c=0; leng=theArr.length, c<leng; c++) {
              var aObj = document.getElementsByName(theArr[c]);
              var i = aObj.length;
              while(i--) { 
                   aObj[i].onchange = function() {buildString(aObj);};
              }
         }
    };

    And of course it only works when the last theArr element is changed. It ignored the previous elements in that array.

    I also tried
    Code:
    getElementsByName("entity area position");
    but that didn't work either.

    Is it possible to pass in several names at a time? I suppose I could always copy and past the original code you provided for each element.

    Thanks,
    Noob

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2010
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I think this is working for what I'm doing...

    Code:
    function buildString(arr) {
         var url = 'http://www.exampledomain.com?';
         var str = '';
         var strTwo = '';
         for(var i=0; len=arr.length, i<len; i++) { 
              if (arr[i].name == "entity") {
                   strTwo += arr[i].value;
              }
              if (arr[i].name == "area") {
                   strTwo += arr[i].value;
              }
              if (arr[i].name == "position") {
                   strTwo += arr[i].value;
              }
              if (arr[i].name != "color") {
                   str += arr[i].name+'='+arr[i].value+'&amp;';
              }
         }
         str = str.replace(/\&amp;$/, '');
         document.getElementById('makeTheLink').innerHTML=url+strTwo+'&'+str;
    }
    Thank you again for your original code snippet. It put me on the right path.

    Thanks,
    Noob

  5. #5
    SitePoint Zealot
    Join Date
    May 2009
    Location
    Netherlands
    Posts
    189
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    window.onload=function() {
         var theArr=["entity","area","position"];
         aObj=[];
         for(var i=0; leng=theArr.length, i<leng; i++) {
              aObj.push(document.getElementsByName(theArr[i])[0]);
              }
         for(var c=0; leng=aObj.length, c<leng; c++) {
              aObj[c].onchange = function() {buildString(aObj);};
              }
    };
    No need to change buildString


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
  •