Question

I have a very critical issue.

Below is my jsp code:

<html:select property="city"   name="city"  onchange="javascript:checkCity(this);">                             
                        <html:option value="N">NewYork</html:option>                      
                        <html:option value="F">France</html:option>
                        <html:option value="I">Italy</html:option>
                        <html:option value="P">Paris</html:option>
</html:select>

There can be single or multiple html select since my <html:select> is placed in for loop.

Below is my Javascript code:

var citySelected = new Array();
function checkCity(selObject)
{
     var form = document.forms[0];
     var cityObj =  form["city"];
     var len = cityObj.length;
     if(selObject==cityObj)      // if there is single <html:select> selObject is same as city Object.so this logic works fine
     {
        if(cityObj.value==cityObj.options[3].value)
        {
        alert("You have selected Paris City");
        citySelected[0] = true;
        }
        if(!cityObj.options[3].selected && cityObj[0])
        {
        var result = confirm("You have selected cities other than paris");
        if(result)
        {
            citySelected[0] = false;
        }
        else
        {
            cityObj.options[cityObj.options.selectedIndex].selected=false;
            cityObj.options[3].selected=true;
        }
        }
     }
     else{
         for(var i=0; i<len; i++) {  //if there are multiple <html:select> then take length of form object n iterate
                if (selObject == cityObj[i] )  
                {
                    if(cityObj[i].value==cityObj[i].options[3].value) // if 3rd option is selected
                    {
                        alert("You have selected Paris City");
                        citySelected[i] = true;
                    }
                    if(!sctypeObj[i].options[3].selected && citySelected[i]) //if 3rd option is deselected
                    {
                        var result = confirm("You have selected cities other than paris");
                        if(result)
                        {
                            cityObj[i] = false;
                        }
                    else
                    {
                        cityObj[i].options[cityObj[i].options.selectedIndex].selected=false;
                        cityObj[i].options[3].selected=true;
                    }
                    }
                }
         }
     }
}

Below is Javascript which works on jsp onload():

function onload()
{
         var form = document.forms[0];
         var formObj =  form["city"];
         var size=formObj.size;
         var len = formObj.length;

         for(var i=0; i<len; i++) {
         citySelected[i] = false;
         }
         if(size==0){   //if there is seingle <html:select> element
            var cityvalue=formObj.value;
            if(cityvalue=="P")
             {
                 citySelected[0] = true;
             }
         }
         else
         {
            for(var i=0; i<len; i++) {   //if there are multiple <html:select> elements
             var cityvalue=formObj[i].value;
             if(cityvalue=="P")
             {
                 citySelected[i] = true;
             }
            }
         }
}

Here is where am finding problem. Onload if there is single or multiple <html:select> elements the logic works fine.But when there are no <html:select> elements at all in my jsp per say if I have option to delete all dropdowns then my jsp throws Javascript error:

“size is null or not an object”.

How do I resolve this? In onload() function I am differentiating between <html:select> element using size.

if(size==0)
{
   //logic for single <html:select>
}
else
{
  //logic for multiple html select
}

But when there are no <html:select> elements at all in my jsp per say if I have option to delete all dropdowns then my jsp throws Javascript error:

“size is null or not an object”.

How do I resolve this? Any help would be great..

Answer 1

An alternate way to determine the number of <select> elements within a form would be to use jQuery‘s selectors like so:

$('#myForm select').length // returns number of <select> elements in the form