This is probably going to be a long post, but I'm going to go ahead and explain where I am at anyways. I've got a form with a series of combo boxes that represent word fragments. The word fragments are configurable and put together with other fragments that do not change, creates a message. For instance, "ATTENTION PASSENGERS – A CHILD ABDUCTION HAS OCCURRED AND THE MASSACHUSETTS STATE POLICE NEED YOUR HELP. ANYONE SEEING A [NUMBERS] YR OLD [CHILD'S SKIN COLOR] [CHILD'S GENDER] CHILD [CHILD'S PHYSICAL DESCRIPTION] TRAVELING WITH [SUSPECT'S PHYSICAL DESCRIPTION] PLEASE CALL 911 OR NOTIFY THE NEAREST MBTA EMPLOYEE. YOUR COOPERATION MAY HELP SAVE A CHILD’S LIFE. THANK YOU."
The word fragments in "[ ]" are configurable by selecting a value in a drop-down box. However, in this example, the last two word fragments are created by a combo-box. The combo box has selectable values and a space to type in a value. I have javascript code attached to some of the events of the combo-box and would like to create a comma-delimited list of values that have been entered in more than one combo-box. For example, "3 YR OLD WHITE BOY WITH BROWN HAIR,30 YR OLD WHITE MALE BROWN HAIR,", is a comma-delimited list of the values that would be entered into the two combo boxes in the above message example. The code below is the portion of the *.asp file that I am working with.
The following is the code from a website, that I found and incorporated into my website. The combo_focus event is where I was thinking of creating the list. Right now, I am building a list and keep adding to it everytime that I pick a value.
So, any ideas on how I can fix my code in the combo_focus event to properly create the comma-delimited list?
Thanks,
Todd
The word fragments in "[ ]" are configurable by selecting a value in a drop-down box. However, in this example, the last two word fragments are created by a combo-box. The combo box has selectable values and a space to type in a value. I have javascript code attached to some of the events of the combo-box and would like to create a comma-delimited list of values that have been entered in more than one combo-box. For example, "3 YR OLD WHITE BOY WITH BROWN HAIR,30 YR OLD WHITE MALE BROWN HAIR,", is a comma-delimited list of the values that would be entered into the two combo boxes in the above message example. The code below is the portion of the *.asp file that I am working with.
Code:
<!--****************************************-->
<!-- COMPLETE TAB -->
<!--****************************************-->
<DIV id="Complete" STYLE="display: <%if tab <> "Complete" then%> none <% end if%>; width: 1000px; height:500px; border: 2px solid #A58E6B; BORDER-left: 1px solid #EFE7DE; border-top: none; padding: 10px;">
<table border="0" cellspacing="0" cellpadding="0" style="padding: 5px; border: none;">
<tr align="left" valign="top">
<td width="800">
<textarea <% if browser <> "Firefox" then %>cols="87" rows="5"<% else %>cols="82" rows="5"<% end if %>
name="textmessage1" STYLE="color: white; background: #A58E6B; font-style:normal; font-variant:normal; font-weight:normal; font-size:20; font-family:Arial" READONLY><%=TextMessage%></textarea>
</td>
<td valign="top" align="center" width="150">
<font size="1" style="font-size: 1pt;">
<input type="button" name="UPDATE" value="Update" title="Update Message" onClick="Submit('Update Message');" class="dlgbutton">
<br><br>
<input class="dlgbutton" type="button" name="CLEAR" value="Clear" title="Clear Complete Tab" onClick="Submit('Clear Complete Tab');">
</font>
</td>
</tr>
<tr>
<td colspan="2"class="canvas" valign="top" align="left">
<br>
<%
' check for valid browser type and version
if browser <> "Firefox" then
%>
<div id="tableContainer" class="tableContainer" style="width: 800px; border-bottom: 0px !important;">
<table border="0" cellpadding="0" cellspacing="0">
<thead class="fixedHeader">
<tr>
<th width="350">Type</th>
<th width="444">Textual Value</th>
</tr>
</thead>
</table>
</div>
<div id="tableContainer" class="tableContainer" style="height: 308px; width: 800px; border-top: 0px !important;"> <!-- 278 -->
<table border="0" cellpadding="0" cellspacing="0">
<tbody class="scrollContent">
<% Else %>
<div id="tableContainer" class="tableContainer" style="height: 336px; width: 800px;">
<table border="0" cellpadding="0" cellspacing="0">
<thead class="fixedHeader">
<tr>
<th width="350">Type</th>
<th width="428">Textual Value</th>
<th width="8"> </th>
</tr>
</thead>
<tbody class="scrollContent" style="height: 309px;"> <!-- 275/251 -->
<% End If %>
<%
Function TakeSelected(count)
text = ""
If (((macroSelected=0) AND (nseltakes = 0)) ) Then
tk = "text" & CStr(count+1)
tk = 0
text = 0
ElseIf (((macroSelected=0) AND (ncfgtakes > 0)) ) Then
tk = "text" & CStr(count+1)
text = GetVal(tk, 0)
Else
If (ncfgtakes > 0 AND nseltakes > 0) Then
If (count >= 0 and count < ncfgtakes ) Then
text = CInt(cfgTakes(count))
End If
End If
End If
If text = CLng(RS2("TAKE_ID")) then
TakeSelected = " selected"
End If
End Function
Set cn = GetDBConnection()
Set SQLStmt1 = Server.CreateObject("ADODB.Command")
Set SQLStmt2 = Server.CreateObject("ADODB.Command")
Set RS1 = Server.CreateObject("ADODB.Recordset")
Set RS2 = Server.CreateObject("ADODB.Recordset")
SQLStmt1.CommandText = "SELECT TAKE_KIND_ID, DESCRIPTION, CB_FLAG " & _
"FROM MESSAGE_KINDS_V " & _
"WHERE MSG_ID = " & _
CStr(MessageID)
SQLStmt1.CommandType = 1
Set SQLStmt1.ActiveConnection = cn
RS1.Open SQLStmt1
count = 0
count1 = 0 'count of amber alert combo boxes
tkList = ""
Do While Not RS1.EOF
%>
<tr class="item" height="28">
<td width="350" nowrap><%=RS1("DESCRIPTION")%></td>
<td width="425" nowrap>
<%
fs = ""
If (((macroSelected = 0) AND (nseltakes = 0)) ) Then
fs = "selected"
ElseIf (macroSelected = 0) Then
tk = "text" & CStr(count+1)
if GetVal(tk, 0) = 0 Then
fs = "selected"
end if
End If
cbFlag = RS1("CB_FLAG")
If cbFlag = "N" Then %>
<select id="text<%=count+1%>" name="text<%=count+1%>" size="1" style="width: 300px;" onChange="OnSelText(this);">
<option value="0" <%=fs%>>Select <%=RS1("DESCRIPTION")%>
<% Else
count1 = count1 + 1%>
<select id="text<%=count+1%>" name="text<%=count+1%>" size="1" style="width: 300px;"
onfocus="return combo_focus(this);"
onchange="return combo_change(this); OnSelText(this);"
onkeydown="return combo_keydown(this, event);"
onkeypress="return combo_keypress(this, event);"
onkeyup="return combo_keyup(this, event);">
<!--Must collect text and store in DB as a TAKE.-->
<option value="0" <%=fs%>>Enter <%=RS1("DESCRIPTION")%>
<% End If
SQLStmt2.CommandText = "SELECT TAKE_ID, DESCRIPTION " & _
"FROM MESSAGE_TAKE_KINDS_V " & _
"WHERE TAKE_KIND_ID = " & CStr(RS1("TAKE_KIND_ID")) & _
"ORDER BY TAKE_ID ASC"
SQLStmt2.CommandType = 1
Set SQLStmt2.ActiveConnection = cn
RS2.Open SQLStmt2
Do While Not RS2.EOF
%>
<option value="<%=RS2("TAKE_ID")%>"
<%
if mode = "edit" then
if CInt(RS2("TAKE_ID")) = CInt(cfgTakes(count)) then
%>
selected
<%
end if
else
%>
<%=TakeSelected(count)%>
<%
end if
%>
><%=RS2("DESCRIPTION")%>
<% '
' This section may be written in a cleaner fashion in the future
' Store empty slot take_id's into tkList from cbo's in comma-delimited fashion
If cbFlag = "Y" Then
If RS2("DESCRIPTION") = "Unknown" Then
tkList = tkList
Else
' Use this line for testing multiple combo-boxes in an amber alert
tkList = tkList & CLng(RS2("TAKE_ID")) & ","
' Use this line for testing one combo-box in an amber alert
'tkList = CLng(RS2("TAKE_ID"))
End If
End If
'
'
RS2.MoveNext
Loop
RS2.Close
%>
</select>
</td>
</tr>
<%
count = count + 1
RS1.MoveNext
Loop
'
' This section may be written in a cleaner fashion in the future
' Remove trailing "," from tkList
delim = ""
delim = Right(tkList,1)
if (delim = ",") then
tkList = Left(tkList,Len(tkList)-1)
end if
'
'
FOR row = count to 14
%>
<tr class="item" height="28">
<td width="350"> </td>
<td width="425"> </td>
</tr>
<% NEXT %>
</tbody>
</table>
</div>
<%
RS1.Close
cn.Close
Set cn = Nothing
%>
<input type="hidden" id="ntakes" name="ntakes" value="<%=count%>">
<input type="hidden" id="aatakes" name="aatakes" value="<%=count1%>">
</td>
</tr>
</table>
</div>The following is the code from a website, that I found and incorporated into my website. The combo_focus event is where I was thinking of creating the list. Right now, I am building a list and keep adding to it everytime that I pick a value.
Code:
/********************************************************************
* HTML ComboBox
* Copyright (C)2005 CS Wagner.
* This provides ComboBox functionality for HTML.
*********************************************************************
* HOWTO:
* You may use this on as many select elements as you want.
* For each select element, add the following three lines:
* onfocus='javascript:return combo_focus(this);'
* onchange='javascript:return combo_focus(this);'
* onkeydown='javascript:return combo_keydown(this,event);'
* onkeypress='javascript:return combo_keypress(this,event);'
* onkeyup='javascript:return combo_keyup(this,event);'
* Also, make sure the first option is empty, as in:
* <option value=''></option>
*********************************************************************
* HOW IT WORKS:
* This attempts to capture key presses and alter the value of the
* first option in the select list. Doing so can be very complicated
* because every web browser seems to process key press events in a
* different way.
* Others have tried this and have hit common problems. The ones that
* I know of, I have tried to handle:
* Backspace Problem:
* When you hit backspace, you go to the previous web page.
* I fixed this by cancelling the default backspace function.
* Auto-Selection of Options:
* When you type the first letter of an option, the option is
* selected automatically.
* I fixed this by cancelling the default auto-select function.
* Edit of Existing Options:
* Can user edit an option in the list?
* When you edit while an option is selected, the edits replace the
* first (editable) item in the list.
*********************************************************************
* COMPATABILITY:
* If the user does not have Javascript, this will not work.
* However, they will easily use the Select field with the values in
* the field.
* I have tried very hard to use Javascript that is common to all web
* browsers, so it will function to some degree for everyone.
*
* I have tested this with:
* Firefox 1.0.7: There is a bug in Firefox. When you set a select
* box's index, it doesn't always update. Also, when you cancel the
* auto-select, it still auto-selects sometimes.
* Konqueror 3.5: This works fine.
* Internet Explorer 6.0: It is functional, but many keys do not work.
* I have added work-arounds for all letter/number keys.
* Opera: I have tested it in the past and hitting backspace is always
* treated as clicking the back button.
*********************************************************************/
var textList; //comma-delimited list of text
var combo_word; //The user-editable word
var combo_keypress_called; // A fix for Konqueror/Safari
// When select is focused, set the editable word.
function combo_focus(element)
{
combo_word = "";
// aatakes is the number of amber alert combo boxes
var aatakes = document.forms[0].aatakes.value;
var delimiter = ",";
textList = document.forms[0].cbTextList.value;
if (aatakes == 1)
{
if(element.selectedIndex >= 0)
{
combo_word = element.options[element.selectedIndex].text;
textList = combo_word;
}
}
else
{
if(element.selectedIndex >= 0)
{
for (var i = 1; i <= aatakes; i++)
{
combo_word = element.options[element.selectedIndex].text;
// add combo_word to cbTextList
if (textList.search(combo_word) < 0)
{
// add combo_word to list of destinations
if (textList.length <= 0) //more accurate than, textList = ""
textList = combo_word;
else
textList = textList + delimiter + combo_word;
}
}
}
}
/*combo_word = "";
if(element.selectedIndex >= 0)
combo_word = element.options[element.selectedIndex].text;*/
alert("textList: " + textList);
document.forms[0].cbTextList.value = textList;
return true;
}
// Same function as focus, but here to make the HTML less confusing.
function combo_change(element)
{
return combo_focus(element);
}
// Return false to try and block built-in keydown functions.
function combo_keydown(element, event)
{
var c=0;
if(event.keyCode) c = event.keyCode;
else if(event.charCode) c = event.charCode;
else if (event.which) c = event.which;
// Don't block the tab key
if(c == 9) return true;
// We have not called keypress yet.
combo_keypress_called = false;
return false;
}
// The real work. Update the editable word and the select box.
function combo_keypress(element, event)
{
// Do not call this again on keyup.
combo_keypress_called = true;
// Get the current key pressed.
var c=0;
if(event.keyCode) c = event.keyCode;
else if(event.charCode) c = event.charCode;
else if (event.which) c = event.which;
// Don't block the tab key
if(c == 9) return true;
// Konqueror sends all alpha-characters in as upper case.
// This converts them to lower case if shift is not pressed.
if(!event.shiftKey)
{
if(c>=65 && c<=90) c+= 32;
else if(c == 190) c = 46; // period
else if(c == 189) c = 45; // minus sign
else if(c == 187) c = 61; // equal sign
else if(c == 192) c = 96; // backtick
else if(c == 222) c = 39; // single quote
else if(c == 186) c = 59; // ;
}
// IE doesn't send the numbers shifted.
else
{
if(c == 48) c = 41;
else if(c == 49) c = 33;
else if(c == 50) c = 64;
else if(c == 51) c = 35;
else if(c == 52) c = 36;
else if(c == 53) c = 37;
else if(c == 54) c = 94;
else if(c == 55) c = 38;
else if(c == 56) c = 42;
else if(c == 57) c = 40;
else if(c == 187) c = 43; // plus sign
else if(c == 189) c = 95; // underscore
else if(c == 192) c = 126; // ~
else if(c == 222) c = 34; // quotes
else if(c == 186) c = 58; // :
}
// This is used to get char codes that don't show up properly.
//if(c > 126) alert(c);
if(c>=32 && c<=126) // Printable characters
{
combo_word += String.fromCharCode(c);
element.options[2].value = combo_word;
element.options[2].text = combo_word;
var combo_wlc = combo_word.toLowerCase();
var combo_select = 2;
for(i=1; i<element.options.length; i++)
{
combo_sel = element.options[i].text.toLowerCase();
if(combo_wlc.length <= combo_sel.length)
{
combo_sel = combo_sel.substring(0, combo_wlc.length);
if(combo_wlc == combo_sel)
combo_select = i;
}
}
element.selectedIndex = combo_select;
}
else if((c == 8 || c == 4099) && combo_word.length>0) // Backspace
{
combo_word = combo_word.substring(0, combo_word.length-1);
element.options[2].value = combo_word;
element.options[2].text = combo_word;
element.selectedIndex = 2;
}
return false;
}
// Return false to try and block built-in keyup functions (like auto-select).
function combo_keyup(element, event)
{
var c=0;
if(event.keyCode) c = event.keyCode;
else if(event.charCode) c = event.charCode;
else if (event.which) c = event.which;
// Don't block the tab key
if(c == 9) return true;
// If keypress was not called, call it now.
if(!combo_keypress_called)
return combo_keypress(element, event);
return false;
}So, any ideas on how I can fix my code in the combo_focus event to properly create the comma-delimited list?
Thanks,
Todd
