Understanding this Javascript function

Question

I am continuing a project. And this is the only thing I do not understand. It is the key function for assembling a filter string to be used for sql query. This function is invoke via onclick of a button.

My problem is the value for query is taken from $_REQUEST['FILTER'].

<input id="HDN_FILTER" name="FILTER" type="hidden" value="<?php echo $_REQUEST['FILTER']; ?>">

At first $_REQUEST['FILTER'] is empty. Then upon pressing the submit button it assembles and return the string. But I don't understand how it assembled the string. Because it seems the function get its value from this input. But it's value is empty. So the function should received empty from this input. It's like going in circles

Example what does "" != means in javascipt anyway?

An example of the assembled string is ""DELIVER_STORE_ACCOUNT=ALL^STORES_ACCOUNT=ALL^ACTIVE=1^PART_NUMBER=ALL^NEW_PART_NUMBER=ALL""

And I see the join("^") part in the function. And it seems this line assembles it. But why is it inside a switch parenthesis?

 function SUBMIT(e, t) {
    array_Filter = new Array;

    for (i in array_Dropdown) {
        if (varField = array_Dropdown[i], varID = "SEL_" + varField, aryTemp = new Array, -1 != document.getElementById(varID).selectedIndex)
            for (i = 0; i < document.getElementById(varID).options.length; i++)
                document.getElementById(varID).options[i].selected === !0 && (aryTemp[aryTemp.length] = document.getElementById(varID).options[i].value);
        aryTemp.length > 0 && (array_Filter[varField] = aryTemp)
    }

    "" != document.getElementById("HDN_SEARCH").value && (aryTemp.SEARCH = document.getElementById("HDN_SEARCH").value), array_Filter_Temp = new Array;
    for (i in array_Filter)
        array_Filter_Temp[array_Filter_Temp.length] = i + "=" + array_Filter[i].join("|");
    switch (varFilter = array_Filter_Temp.join("^"), document.getElementById("HDN_FILTER").value = varFilter, document.getElementById("HDN_EXCEL").value = 1 == e ? 1 : 0, !0) {
        case 1 == t:
            document.getElementById("HDN_OVERRIDE").value = 1;
            break;
        case 0 == t:
            document.getElementById("HDN_OVERRIDE").value = 0;
            break;
        case-1 == t:
    }

    varTXTBOX = document.getElementById("TXT_SEARCH").value;
    alert(varTXTBOX);

    document.getElementById("FORM1").submit()
}

Answer 1

Whoever wrote this code was trying to obfuscate it, making it hard for anyone else to understand what it does, perhaps because the result is sent to a SQL query, as you stated. Of course, if you want to hide anything from your users, specially SQL commands, implement it server-side.

1) The "" != part:

"" != document.getElementById("HDN_SEARCH").value                // left side
&&                                                               // logical AND
(aryTemp.SEARCH = document.getElementById("HDN_SEARCH").value),  // right side
array_Filter_Temp = new Array;                                   // another statement

Here he's taking advantage of the short-circuit evaluation, if the left side of the expression evaluates to false, then the right side isn't executed. The next statement after the , is always executed (read more about the comma operator). So it's the same as writing:

if (document.getElementById("HDN_SEARCH").value != "") {
    aryTemp.SEARCH = document.getElementById("HDN_SEARCH").value
}
array_Filter_Temp = new Array;

2) The switch part:

switch (
    varFilter = array_Filter_Temp.join("^"), 
    document.getElementById("HDN_FILTER").value = varFilter, 
    document.getElementById("HDN_EXCEL").value = 1 == e ? 1 : 0, 
    !0
) {

The first two are trivial. On the third one, he is assigning HDN_EXCEL based on the value of e. Adding parenthesis makes it clearer: document.getElementById("HDN_EXCEL").value = (1 == e) ? 1 : 0

The !0 is there just to make sure the rest of the switch is executed (it evaluates to true). If it was 0 or false, then HDN_OVERRIDE would never be assigned to a value.

So that whole set could be rewritten as:

varFilter = array_Filter_Temp.join("^");
document.getElementById("HDN_FILTER").value = varFilter;
document.getElementById("HDN_EXCEL").value = (e == 1) ? 1 : 0;
switch (t) {
    case 1:
        document.getElementById("HDN_OVERRIDE").value = 1;
        break;
    case 0:
        document.getElementById("HDN_OVERRIDE").value = 0;
        break;
}

3) The first for loop: (you haven't asked, but here it goes anyway)

for (i in array_Dropdown) {
    if (
        varField = array_Dropdown[i], 
        varID = "SEL_" + varField, 
        aryTemp = new Array, 
        -1 != document.getElementById(varID).selectedIndex
    )
        for (i = 0; i < document.getElementById(varID).options.length; i++)
            document.getElementById(varID).options[i].selected === !0 && (aryTemp[aryTemp.length] = document.getElementById(varID).options[i].value);
    aryTemp.length > 0 && (array_Filter[varField] = aryTemp)
}

Again the use of the , operator to execute all commands and return the value of the last one to the if, which is -1 != document.getElementById(varID).selectedIndex, so the second for loop will run only if the element in varID has a selectedIndex.

The === !0 is the same as === true.

This could be rewritten as:

for (key in array_Dropdown) {
    varField = array_Dropdown[key];
    varID = "SEL_" + varField;
    aryTemp = new Array;
    if (document.getElementById(varID).selectedIndex != -1) {
        for (i = 0; i < document.getElementById(varID).options.length; i++) {
            if (document.getElementById(varID).options[i].selected) {
                aryTemp[aryTemp.length] = document.getElementById(varID).options[i].value;
            }
        }
    }
    if (aryTemp.length > 0) {
        array_Filter[varField] = aryTemp;
    }
}

---

As a side note, if you can, I suggest you refactor this code, send only the collected data to the server and do all the transformation needed on the server-side.