AJAX and multiple select control

[tmcneil]

Hi All,

I have an asp page with three options buttons representing a different geography. Next to the 1st two radio buttons, I have a multiple select box where you can select no more than ten values. If you select more than ten, then the page will not submit. The last option button has a drop down box next to it that fires off some AJAX code to display an asp page containing a multiple select box inside the current asp page. This select box has the same characteristics as the 1st two and has code that will only submit the page if you have no more than ten values selected. The problem is, once you select one, the page submits. It ignores the javascript code altogether. Is it because the control is on a separate page than the current one? Does anyone have any ideas on how I can fix this?

 

[vicvirk]

can you post your code so we can see what's happening?

 

[tmcneil]

vicvirk,

I'll post it when I get in to work tomorrow morning.

Todd

 

[BillyRayPreachersSon]

Is it because the control is on a separate page

Is it in an iframe? If not, it is on the same page, not a separate one.

If it is in an iframe, then you would need to add your JS logic to that page. If it is not, you would need to ensure that any event handlers are bound to the new select boxes after they are appended to the current page.

Dan





Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[tmcneil]

BillRayPreachersSon,

It's not in an iframe, but does get placed inside a <td> tag. So, yes, I think it is on the same page. I'm not sure that I understand your last statement. I'll post some code.

The submit button is at the top but I took out the surrounding code since it was relevant. The 2nd and 3rd radio elements and the <td id="county"> tag where the embedded page is placed.

<input name="Continue" value="Continue" onclick="check_geo()" type="button">

<tr>
    <td><input onclick="check(this.value);" name="FA" value="CBSA" type="radio"></td>
    <td><b>CBSA</b></td>
    <td colspan="2">
        <select class="smallText" name="FACBSAV" id="FACBSAV" multiple size="3" onchange="return CheckNumCBSA(), document.forms[0].elements[3].click(this)">
<%       Set cn = GetDBConnection()
         Set SQLStmt = Server.CreateObject("ADODB.Command")
         Set RS  = Server.CreateObject("ADODB.Recordset")
	                            
         SQLStmt.CommandText = "SELECT DISTINCT(CBSA_CODE), CBSA_NAME" & _
         " FROM CENSUS.GDT_C00_HUD_CBSA_11202008" & _
         " ORDER BY CBSA_CODE ASC"
                                                      
         SQLStmt.CommandType = 1
         Set SQLStmt.ActiveConnection = cn
         RS.Open SQLStmt
         Do While Not RS.EOF
%>
             <option value="<%=RS("CBSA_CODE")%>"><%=UCASE(RS("CBSA_NAME"))%></option>
<%
             RS.MoveNext
          Loop
          RS.Close
          cn.Close
%>													
          </select>
    </td>
</tr>
<tr>
    <td rowspan="2" valign="top"><input onclick="check(this.value);" name="FA" value="COUNTY" type="radio"></td>
    <td><b>County</b></td><BR><td><b>Select State first</b></td>                                        
    <td valign="bottom"><b>County:</b></td>
</tr>
<tr><td>&nbsp;</td>
    <td valign="top">
        <select class="smallText" name="FACOUNTYSTV" id="FACOUNTYSTV" onchange="showOptions(this.value);">
<%       Set cn = GetDBConnection()
         Set SQLStmt = Server.CreateObject("ADODB.Command")
         Set RS  = Server.CreateObject("ADODB.Recordset")
	                            
         SQLStmt.CommandText = "SELECT DISTINCT(GEOID), NAME" & _
         " FROM CENSUS.GDT_C00_HUD_STATE_GEO" & _
         " ORDER BY GEOID ASC"
                                                      
         SQLStmt.CommandType = 1
         Set SQLStmt.ActiveConnection = cn
         RS.Open SQLStmt
         Do While Not RS.EOF
%>
             <option value="<%=RS("GEOID")%>"><%=UCASE(RS("NAME"))%></option>
<%
             RS.MoveNext
         Loop
         RS.Close
         cn.Close												
%>
         </select>
     </td>
     <td align="left" id="county" valign="top"></td>
</tr>

The js code from the main page. The functions, checkNumCBSA() and CheckNumCOUNTY() are the same as the one below, it just uses a different element.

function check_geo()
{
var form=document.SelectGeo; 
var itmobj="";
    
if (form.FA[0].checked==true)
{
    var itmobj=eval("form.FASTV"); var itmlen=itmobj.length; var itmname1="State"; var itmname2="States";
}
if (form.FA[1].checked==true)
{
    var itmobj=eval("form.FACBSAV"); var itmlen=itmobj.length; var itmname1="CBSA"; var itmname2="CBSAs";
}
if (form.FA[2].checked==true)
{
    var itmobj=eval("form.FACOUNTYV"); var itmlen=itmobj.length; var itmname1="County"; var itmname2="Counties";
}
  
var error_msg1="You must select at least one "+itmname1+" from the drop down box.";
var error_msg2="You may not select more than 10 "+itmname2+".";

for (j=1; j < 3; j++)
{
    var Counter = 0;
    {
        for (i=0; i< itmlen; i++)
        {            
            if (itmobj[i].selected == true)
                Counter++;
        }
        if (Counter == 0)
        {	 
            alert(error_msg1);
            form.itmobj.focus(); 
            return;
        }  
        // edit 10 more items selected
        if (j > 1 && Counter > 10) 
        {	 
            alert(error_msg2);
            form.itmobj.focus(); 
            return;
        }  		
    }//1st if
}// 1st for
form.submit();
}

var radio = "";

function check(option)
{
    if (option == "ST") radio = "ST";
    else if (option == "CBSA") radio = "CBSA";
    else radio = "COUNTY";
}

function CheckNumST()
{
	// State radio button checked
	if (radio == "ST")
	{	    	  	
        // Loop through the select box to see how many are selected
        var selObj = document.getElementById('FASTV');
        var i;
        var count = 0;
        for (i=0; i<selObj.options.length; i++)
        {
            if (selObj.options[i].selected)
            {
                if (count < 10)
                    count++;
                else
                    alert("You may not select more than 10 states.");
            }
        }    
    }
}

This is the embedded page code, which also has the use of the js file embedded into the page just like the main page. Might this be the problem?

<script src="javascript/hmda_geo.js"></script>
<!--#include file="include/database.asp"-->
<%
sState = Request.QueryString("q")

If Len(sState) > 0 Then
    'Response.Write "<td valign=""bottom""><b>County:</b></td>"
    'Response.Write "<td valign=""top""><label for=""FACOUNTYV""><b>County:</b></label></td>"
    Response.Write "<select class=""smallText"" name=""FACOUNTYV"" id=""FACOUNTYV"" multiple=""multiple"" size=""4"" onchange=""return CheckNumCOUNTY(), document.forms[0].elements[0].click(this)"">"
 
    Set cn = GetDBConnection()
    Set SQLStmt = Server.CreateObject("ADODB.Command")
    Set RS  = Server.CreateObject("ADODB.Recordset")
	                           
    SQLStmt.CommandText = "SELECT DISTINCT(GEOID), COUNTY_LABEL" & _
                          " FROM CENSUS.GDT_C00_HUD_COUNTY" & _
                          " WHERE GEOID LIKE '" & sState & "%'" & _
                          " ORDER BY GEOID ASC"
                                                      
    SQLStmt.CommandType = 1
    Set SQLStmt.ActiveConnection = cn
    RS.Open SQLStmt
    Do While Not RS.EOF
    
        Response.Write "<option value='" & RS("GEOID") &"'>" & UCASE(RS("COUNTY_LABEL")) & "</option>"
        RS.MoveNext
    Loop
    RS.Close
    cn.Close

    Response.Write "</select>"

End If
%>

I apologize for posting so much code, but this will give anyone a good idea of what's going on. Any ideas how to prevent the submit of the page when selecting only one county from the multiple select box on the embedded county.asp page. Thanks.

 

[vicvirk]

tmcneil,

That is a lot of code

I probably won't have time during the day to look at it, but if nobody else replies I'll definatley take a look after work when I get home tonight and connect...

I'm in the pacific time zone and get home around 6pm-ish