I need to be able to select two ID's

Question

Hello all I need to be able to search by multiple ID block0_b7 and block1_b7. Here is my current code:

    <script type="text/javascript">
 window.onload = function() {
var searchString = "Incident",
    pageContent = document.getElementById("block1_b7").innerHTML;
var searchString2 = "Voice Services",
    pageContent = document.getElementById("block1_b7").innerHTML;
var searchString3 = "Data Service EVDO-1X & LTE",
    pageContent = document.getElementById("block1_b7").innerHTML;
if (pageContent.indexOf(searchString) != -1) 
   document.getElementById("areas").style.display = "inline";
if (pageContent.indexOf(searchString2) != -1) 
   document.getElementById("dropdown").style.display = "inline";
if (pageContent.indexOf(searchString3) != -1) 
   document.getElementById("dropdown2").style.display = "inline";
}
</script>  <script type="text/javascript">
    var mydropdown = document.getElementById('dropdown');
    var mydropdown2 = document.getElementById('dropdown2');
 var myareas = document.getElementById('areas');
    mydropdown.onchange = function(){
         comment_body.value = comment_body.value +'\n'+ this.value;
  var f = document.forms[2].submit();
           f.submit();
    }
 mydropdown2.onchange = function(){
        comment_body.value = comment_body.value +'\n'+ this.value;
  var f = document.forms[2].submit();
           f.submit();
    }
 myareas.onchange = function(){ 
        comment_body.value = comment_body.value +'\n'+ this.value;
           var f = document.forms[2].submit();
           f.submit();
    }

I have tried this:

var x, divArray = ["block1_b7", "block0_b7"];
for (x in divArray) {
        if (x) {
var searchString4 = "Incident",
  var  pageCon = document.getElementById(divArray[x]).innerHTML; 
}

I can't use jquery but I do have prototype 1.7. Thanks in advance!

Answer 1

If you have PrototypeJS available you can simplify lots of this javascript

PrototypeJS has a utility function $() which is the same as document.getElementById() but it will return a DOM element extended with all of the PrototypeJS functions. You can also pass more than one id to the $() function which will return an array of extended DOM elements.

Lets look at your first <script> block

window.onload = function() {
var searchString = "Incident",
    pageContent = document.getElementById("block1_b7").innerHTML;
var searchString2 = "Voice Services",
    pageContent = document.getElementById("block1_b7").innerHTML;
var searchString3 = "Data Service EVDO-1X & LTE",
    pageContent = document.getElementById("block1_b7").innerHTML;
if (pageContent.indexOf(searchString) != -1) 
   document.getElementById("areas").style.display = "inline";
if (pageContent.indexOf(searchString2) != -1) 
   document.getElementById("dropdown").style.display = "inline";
if (pageContent.indexOf(searchString3) != -1) 
   document.getElementById("dropdown2").style.display = "inline";
}

This can be reduced to the below. Be careful about the show() method, if styles farther up the chain have the element display set to 'none' then show() will have no effect. You can also use the second line as well to directly set the style.

window.onload = function() {
var searchStrings = ["Incident", "Voice Services", "Data Service EVDO-1X & LTE"];
searchStrings.each(function(str) {
    if($("block1_b7").innerHTML.include(str)) {
        $("block1_b7").show();
        //$("block1_b7").setStyle({display, "inline"});
    }
});

to use multiple ID's with the $() method

window.onload = function() {
var searchStrings = ["Incident", "Voice Services", "Data Service EVDO-1X & LTE"];
searchStrings.each(function(str) {
    $("block0_b7", "block1_b7").each(function(element) {
        if(element.innerHTML.include(str)) {
            element.show();
            //element.setStyle({display, "inline"});
        }
    }
});

If you have multiple ID's you want to check I would suggest putting a class on them ("searchblocks" below) so you can add more without updating the javascript code like so

searchStrings.each(function(str){
    $$(".searchblocks").each(function(element){
        if(element.innerHTML.include(str)){
            element.show();
            //element.setStyle({display:"inline"});
        }
    });
});

Looking at your second block

var mydropdown = document.getElementById('dropdown');
var mydropdown2 = document.getElementById('dropdown2');
var myareas = document.getElementById('areas');
mydropdown.onchange = function(){
    comment_body.value = comment_body.value + '\n' + this.value;
    var f = document.forms[2].submit();
    f.submit();
}
mydropdown2.onchange = function(){
    comment_body.value = comment_body.value + '\n' + this.value;
    var f = document.forms[2].submit();
    f.submit();
}
myareas.onchange = function(){ 
    comment_body.value = comment_body.value + '\n' + this.value;
    var f = document.forms[2].submit();
    f.submit();
}

Prototype adds excellent Event handling via the observe() or on() method - they are the same method just different names and it looks like all of the dropdowns are doing the same thing so we can add a class to all of them as well, for instance selectblocks

$$(".selectblocks").invoke("observe","change",function(){
    comment_body.value += '\n' + this.value;
    $$("form")[2].submit();
});

A little explanation $$() gets elements by CSS selector and will return an array of extended DOM elements.

invoke() will take an array and perform the same method on every item in the array, in this instance observe() and any parameters after the method name are passed to the method, in this instance the function() definition

you can simplify comment_body.value = comment_body.value + '\n' + this.value; to use the += operator that adds or concats the right side to the left side.

this is still the element that the event is happening on

you can also access elements directly using $$() using the [] notation which allows you to access the 3rd form on the page and fire the submit()

Let me know if you have any questions and if anything doesn't make sense.