Custom Dropdowns and Null Query String Values

[kpcollier]

I have a popup where the user can select values from custom dropdowns which sends parameters via query string to a report datapage. It is working great - if all of the dropdowns have a value. If there isn't a value to select in one of the dropdowns, the submit button does not work. If all of the dropdowns have a value, the button and workflow works great.

Here is what my custom dropdowns look like:

<select id='5[@field:CG_Client_ID]'>
  <option value="[@field:Primary_Email]">[@field:Primary_Email]</option>
  <option value="[@field:Additional_Email]">[@field:Additional_Email]</option>
</select>

And here is the query string JS with the submit button:

<button type="button" class="clientbutton" onclick="myFunction([@field:CG_Client_ID])">Start WO</button>

<script>
function myFunction(x) {

// Getting the value of the first drop-down
var e = document.getElementById(x);
var strUser = e.options[e.selectedIndex].value;


// Getting the value of the second drop-down
var f = document.getElementById('2'+x);
var endUser = f.options[f.selectedIndex].value;

// Getting the value of the third drop-down
var g = document.getElementById('3'+x);
var midUser = g.options[g.selectedIndex].value;

// Getting the value of the third dropdown
var h = document.getElementById('4'+x);
var bUser = h.options[h.selectedIndex].value;

//Getting the value of the fifth dropdown
var j = document.getElementById('5'+x);
var fUser = j.options[j.selectedIndex].value;

window.location.replace("https://xxxxxx.caspio.com/dp/e75050009fd4376eab4---------?val=" + strUser + "&val2="+endUser + "&val3="+midUser + "&val4="+bUser + "&val5="+fUser);


}
</script>

Here is the error that I am getting when a value for one of the dropdowns is not present.

Uncaught TypeError: Cannot read property 'value' of undefined
    at myFunction (e7505000af422790------------?CG_Client_ID=2:1333)
    at HTMLButtonElement.onclick (e7505000af4227907--------?CG_Client_ID=2:1309)

[George43]

You should additional check for undefined. I would like to add in this case if parameter is not set it will be Undifined.

Please try this code.

 

<button type="button" class="clientbutton" onclick="myFunction([@field:CG_Client_ID])">Start WO</button>

<script>
function myFunction(x) {

var strUser, endUser, midUser,bUser, fUser;

if (document.getElementById(x)){
    // Getting the value of the first drop-down
    var e = document.getElementById(x);
    strUser = e.options[e.selectedIndex].value;
}

if (document.getElementById('2' + x)){
    // Getting the value of the second drop-down
    var f = document.getElementById('2'+x);
    endUser = f.options[f.selectedIndex].value;
}
if (document.getElementById('3' + x)){
    // Getting the value of the third drop-down
    var g = document.getElementById('3'+x);
    midUser = g.options[g.selectedIndex].value;
}
if (document.getElementById('4' + x)){
    // Getting the value of the third dropdown
    var h = document.getElementById('4' + x);
    bUser = h.options[h.selectedIndex].value;
}
if (document.getElementById('5'+x)){
    //Getting the value of the fifth dropdown
    var j = document.getElementById('5'+x);
    fUser = j.options[j.selectedIndex].value;
}

window.location.replace("https://c3eku680.caspio.com/dp/e75050009fd4376eab4---------?val=" + strUser + "&val2="+endUser + "&val3="+midUser + "&val4="+bUser + "&val5="+fUser);

}
</script>