Build String Based On Several Drop downs

JavaScript
1

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:

<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:

$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

Actually, I think this is working for what I’m doing…

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

3

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:

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

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 
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;
}
5 
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