Logic for multiple and single select/combo boxes

Question

Below is my code:

<%@taglib uri="/WEB-INF/struts-bean.tld" prefix="bean"%>
<%@taglib uri="/WEB-INF/struts-html.tld" prefix="html"%>

<script type="text/javascript">
var flag = false;
function test(selObject)
{
    alert("hi");

    var form = document.forms[0];
    alert("form"+form);

    var txtS =  form["city"];
    alert("txt"+txtS);

    var len = txtS.length;
    alert("len"+len);

    for(var i=0; i<len; i++) 
    {
        if (selObject == txtS[i] )
        {
            if(txtS[i].value==txtS[i].options[3].value)
            {
                alert("YOU ARE SELECTING MYSORE CITY");
                flag = true;
            }
            
            if(!txtS[i].options[3].selected && flag)
            {
                var result = confirm("Are you sure you wnat to travel to this city");
                if(result)
                {
                    flag = false;
                }
                else
                {
                    txtS[i].options[txtS[i].options.selectedIndex].selected=false;
                    txtS[i].options[4].selected=true;
                }
            }
        }
    }//end of for loop
}
</script>

<html:form action="/login">
    username:<input type="text" name="username" /></br>
    password:<input type="password" name="password"/></br>
    
    <%
    for(int i = 0; i < 10; i++){
    %>
        <html:select property="city" onchange="javascript:test(this);">
            <html:option value="B">BANGALORE</html:option>
            <html:option value="C">CHENNAI</html:option>
            <html:option value="M">MANGALORE</html:option>
            <html:option value="MR">MYSORE</html:option>
        </html:select></br>
    <%
    }
    %>
    <input type="submit" value="submit"/>
</html:form>

When select-box or combo-box is looped for ten times then I am getting form["city"] length as 10 properly and behaviour of alerts within combox-box is appropriate, but if I have a single-select-box, then instead of giving form["city"] length as 1 it gives it as 4 which is the number of option elements in my dropdown-box.

So my logic doesn't work here.

How do I make it work for both single as well as multiple combo/select boxes.

Any help would be appreciated.

score 0 · Accepted Answer · answered Jul 30 '12 at 10:04

0

Please use a javascript library like jQuery for cross-browser compatibility.

You can use the following code to determine that only a single select element is present or multiple select elements with the same name are present:

if (selObject == txtS) {
    alert("Single select");
    // ... your logic for a single combo-box follows after this
} else {
    // your logic for multiple combo-box follows, like the "for" loop and if-else
}

When there is only one select box the line var txtS = form["city"]; will return an array of option elements within that select box and when more than one select box with the same name it returns an array of the select boxes.

Hope this helps.

Not related to your question, but this logic if(!txtS[i].options[3].selected && flag) will always return false.

answered Jul 30 '12 at 10:04

Prakash K

11,669
6
51
109

function onload() { var form = document.forms[0]; var formObj = form["city"]; var len = formObj.length; var cityvalue=formObj.value; if(cityvalue=="B") { flag = true; } } – cxyz Jul 31 '12 at 10:00
Above is the function am calling onload of the page.it works fine when there is single select element but length of single select element is shown as 3.the behvaiour is fine for single select element.but how do i do for multiple select elements?or if there are 3 select elements.it causes ambiguity.can anyone help me? – cxyz Jul 31 '12 at 10:03
@cxyz Is it not possible to have elements with different names or atleast different IDs? It would be really helpful going forward to have some distinguishing factor between the elements. For now I think you can test if formObj is a node list or an element object, may be by using `if (formObj.options[0]) { //multi-select } else { //single-select }`. Also it would be good if you can go through some DOM tutorials like on w3schools.com, or this http://stackoverflow.com/a/9979779/468763 – Prakash K Jul 31 '12 at 11:46
@cxyz it is best to use a javascript library like jQuery, as raw javascript code might not work on some browsers. Test your code on atleast 3 major browsers if you are writing raw javascript – Prakash K Jul 31 '12 at 11:47

Logic for multiple and single select/combo boxes

1 Answers1