Dear all, I am working on a form page which has a two sided multiple select boxes. Box 1 will load from the server all the available dates. When double clicked or select and click >, box 1 options will move to box 2. Box 2 options will be highlighted and selected.
During saved, I added no.selected = true in one of the javascript code to select all the options in box 2 and save it.
But when I enter the page during edit mode, I have some problems:
1. When the page loads, all the selected options will be loaded and highlighted in Box 2. I have to pre-select them by again adding selected=’selected’ in the option tag. This will keep them selected so that when I hit update, I will manage to get their values and update the records according.
3. But when I hit transfer a single option from box 2 back to box 1, everything is selected and highlighted in box 1 and box 2, is there a way to not select things in box?
4. I don’t mind box 2 to always remain selected but is there a CSS or something to hide the selected highlights?
5. During save and update, I need the server to manage to request the values from the options tag in box2. What I did is request all the values in a long string, and split it and save. If the options is not selected, I can’t manage to get the values. Again, how to let the options remain selected when moving from Box 1 to Box 2?
6. Double click once or select and click > and it will select and highlight all in box 1? Please see below
7. Move back or transfer back it will again highlight in dark grey in box 1? Please see below
To all the gurus, please help me, thank you very much.
The ASP Code
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<!-- #include file="include/header.asp" -->
<!-- Left side column. contains the logo and sidebar -->
<!-- #include file="include/sidebar_tm.asp" -->
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>Holiday Calendar Details</h1>
</section>
<!-- Main content -->
<section class="content">
<div class="row">
<div class="col-md-12">
<div class="box">
<!-- /.box-header -->
<div class="box-body ">
<form name="form1" class="form-horizontal" action="tmholcal_det.asp" method="POST">
<input type="hidden" name="Page" value='<%=iPage%>' />
<div class="form-group">
<label class="col-sm-3 control-label">Holiday Calendar Code : </label>
<div class="col-sm-7">
<% if sHOL_ID <> "" then %>
<span class="mod-form-control"><% response.write sHOL_ID%> </span>
<input type="hidden" id="txtID" name="txtID" value="<%=sHOL_ID%>" />
<%else%>
<input class="form-control" id="txtID" name="txtID" value="<%=sID%>" maxlength="30" style="text-transform: uppercase" input-check />
<% end if %>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Name : </label>
<div class="col-sm-7">
<input class="form-control" id="txtName" name="txtName" value="<%=server.Htmlencode(sName)%>" maxlength="30">
</div>
</div>
<!--<div class="form-group">
<label class="col-sm-3 control-label">Year : </label>
<div class="col-sm-2">
<%if sSHFPAT_ID <> "" then%>
<span class="mod-form-control"><% response.write sYear%> </span>
<input type="hidden" id="selYear" value="<%=sYear%>" />
<%else%>
<select name="selYear" id="selYear" class="form-control">
<%For i = 1 to 34
selyear = Cint(2016) + Cint(i)
%>
<option value="<%=selyear%>" <%if sYear = selyear then%>Selected<%end if%>><%=selyear%></option>
<%Next%>
</select>
<% end if %>
</div>
</div>-->
<div>
<table id="example1">
<tbody>
<tr>
<td width="5%"></td>
<td width="20%" style="padding: 7px"><b>Available Dates :</b>
<select multiple size="15" style="width: 405px;" name="FromLB" id="FromLB" ondblclick="move(this.form.FromLB,this.form.ToLB)">
<%
ShowAvailDates(sHOL_ID)
%>
</select>
</td>
<td width="3%" style="padding: 9px" align="center">
<input type="button" class="btn btn-primary" style="width: 50px" onclick="move(this.form.FromLB, this.form.ToLB)" value=" > ">
<br>
<br>
<input type="button" class="btn btn-primary" style="width: 50px" onclick="move(this.form.ToLB, this.form.FromLB)" value=" < ">
</td>
<td width="30%" style="padding: 11px"><b>Selected : </b>
<select multiple size="15" style="width: 405px;" name="ToLB" id="ToLB" ondblclick="move(this.form.ToLB,this.form.FromLB)">
<% Set rstTMHOL1 = server.CreateObject("ADODB.RecordSet")
sSQL = "select * from TMHOL1 where HOL_ID ='" & sID & "'"
rstTMHOL1.Open sSQL, conn, 3, 3
do while not rstTMHOL1.eof
response.write "<option value='" & rstTMHOL1("DT_HOL") & "," & rstTMHOL1("PART") & "' selected='selected'>" & rstTMHOL1("DT_HOL") & " - " & rstTMHOL1("PART") & "</option>"
rstTMHOL1.movenext
loop
%>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<div class="box-footer">
<%if sHOL_ID <> "" then %>
<a href="#" data-toggle="modal" data-target="#modal-delholcal" data-hol_id="<%=server.htmlencode(sHOL_ID)%>"
class="btn btn-danger pull-left" style="width: 90px">Delete</a>
<button type="submit" name="sub" value="up" class="btn btn-info pull-right" style="width: 90px">Update</button>
<%else%>
<button type="submit" name="sub" value="save" class="btn btn-default pull-right"
style="width: 90px">
Save</button>
<%end if%>
</div>
</form>
</div>
<!-- /.box-body -->
</div>
</div>
<!-- /.col -->
</div>
<!-- /.row -->
<div class="modal fade bd-example-modal-lg" id="modal-delholcal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel"></h4>
</div>
<div class="modal-body">
<div id="del-content">
<!--- Content ---->
</div>
</div>
</div>
</div>
</div>
</section>
<!-- /.content -->
</div>
<!-- /.content-wrapper -->
<!-- #include file="include/footer.asp" -->
</div>
<!-- ./wrapper -->
<!-- input-check -->
<script src="plugins/Custom/input-check.js"></script>
<script>
$('#modal-delholcal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var hol_id = button.data('hol_id')
var modal = $(this)
modal.find('.modal-body input').val(hol_id)
showDelmodal(hol_id)
})
function showDelmodal(str){
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("del-content").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "tmholcal_del.asp?txtstring="+str, true);
xhttp.send();
}
</script>
<script>
function move(tbFrom, tbTo) {
var arrFrom = new Array(); var arrTo = new Array();
var arrLU = new Array();
var i;
for (i = 0; i < tbTo.options.length; i++) {
arrLU[tbTo.options[i].text] = tbTo.options[i].value;
arrTo[i] = tbTo.options[i].text;
}
var fLength = 0;
var tLength = arrTo.length;
for(i = 0; i < tbFrom.options.length; i++) {
arrLU[tbFrom.options[i].text] = tbFrom.options[i].value;
if (tbFrom.options[i].selected && tbFrom.options[i].value != "") {
arrTo[tLength] = tbFrom.options[i].text;
tLength++;
} else {
arrFrom[fLength] = tbFrom.options[i].text;
fLength++;
}
}
tbFrom.length = 0;
tbTo.length = 0;
var ii;
for(ii = 0; ii < arrFrom.length; ii++) {
var no = new Option();
no.value = arrLU[arrFrom[ii]];
no.text = arrFrom[ii];
no.selected = true;
tbFrom[ii] = no;
}
for(ii = 0; ii < arrTo.length; ii++) {
var no = new Option();
no.value = arrLU[arrTo[ii]];
no.text = arrTo[ii];
no.selected = true; // I enable it because when
tbTo[ii] = no;
}
}
</script>
</body>
The SERVER code
<%
sHOL_ID= request("txtHOL_ID")
iPage = request("Page")
sSearch = request("txtSearch")
sModeSub = request("sub")
if sHOL_ID <> "" then
sID = sHOL_ID
else
sID = UCase(reqForm("txtID"))
end if
sName= reqForm("txtName")
sMainURL = "tmholcal.asp?"
sAddURL = "txtSearch=" & server.HTMLEncode(sSearch) & "&Page=" & iPage
if sModeSub = "up" then
arr=Split(reqform("ToLB"),",")
if Ubound(arr) < 0 then
response.write "<script language='javascript'>"
response.write "if (confirm(""Emptying the selected box will delete the Holiday Calendar Code"")==0)"
response.write " {window.history.back();}"
response.write "</script>"
end if
sSQL = "delete from TMHOL1 where HOL_ID = '" & sID & "'"
conn.execute sSQL
for j = 0 to Ubound(arr)
sDt_Hol = arr(j)
j = j + 1
sPart = arr(j)
sSQL = "insert into tmhol1 (HOL_ID,NAME,DT_HOL,PART,USER_ID,DATETIME) "
sSQL = sSQL & "values ("
sSQL = sSQL & "'" & pRTIN(sID) & "',"
sSQL = sSQL & "'" & pRTIN(sName) & "',"
sSQL = sSQL & "'" & fdate2(sDt_Hol) & "',"
sSQL = sSQL & "'" & pRTIN(sPart) & "',"
sSQL = sSQL & "'" & session("USERNAME") & "',"
sSQL = sSQL & "'" & fdatetime2(Now()) & "'"
sSQL = sSQL & ") "
conn.execute sSQL
Next
sAddURL = "txtSearch=" & sSearch & "&Page=" & iPage
call confirmBox("Update Successful!", sMainURL&sAddURL&"&txtHOL_ID=" & sID & "")
elseif sModeSub = "save" then
if sID = "" then
alertbox(" Holiday Calendar Code cannot be empty! ")
end if
arr=Split(reqform("ToLB"),",")
for i = 0 to Ubound(arr)
sDt_Hol = arr(i)
i = i + 1
sPart = arr(i)
sSQL = "insert into tmhol1 (HOL_ID,NAME,DT_HOL,PART,USER_ID,DATETIME) "
sSQL = sSQL & "values ("
sSQL = sSQL & "'" & pRTIN(sID) & "',"
sSQL = sSQL & "'" & pRTIN(sName) & "',"
sSQL = sSQL & "'" & fdate2(sDt_Hol) & "',"
sSQL = sSQL & "'" & pRTIN(sPart) & "',"
sSQL = sSQL & "'" & session("USERNAME") & "',"
sSQL = sSQL & "'" & fdatetime2(Now()) & "'"
sSQL = sSQL & ") "
conn.execute sSQL
call confirmBox("Save Successful!", sMainURL&sAddURL&"&txtHOL_ID=" & sID & "")
next
end if
function ShowAvailDates(sParam)
Set rs=server.CreateObject("ADODB.Recordset")
sql="Select * from tmhol "
sql=sql & "order by dt_hol"
rs.open sql, conn
if len(sParam) > 0 then
do while not rs.eof
bflag=true
Set rs1=server.CreateObject("ADODB.Recordset")
sql="Select * from tmhol1 "
sql = sql & " where hol_id = '" & sParam & "'"
sql = sql & " order by dt_hol"
rs1.open sql, conn
do while not rs1.eof
if fdate2(rs("DT_HOL")) = fdate2(rs1("DT_HOL")) then
bflag= false
exit do
end if
rs1.movenext
loop
if bflag = true then
response.write "<option value='" & rs("DT_HOL") & "," & rs("PART") & "'>" & rs("DT_HOL") & " - " & rs("PART") & "</option>"
end if
rs.movenext
loop
else
do while not rs.eof
if year(rs("DT_HOL")) = year(date) then
response.write "<option value='" & rs("DT_HOL") & "," & rs("PART") & "'>" & rs("DT_HOL") & " - " & rs("PART") & "</option>"
end if
rs.movenext
loop
pCloseTables(rs)
end if
end function
Set rstTMHOL1 = server.CreateObject("ADODB.RecordSet")
sSQL = "select * from TMHOL1 where HOL_ID ='" & sID & "'"
rstTMHOL1.Open sSQL, conn, 3, 3
if not rstTMHOL1.eof then
sName = rstTMHOL1("Name")
end if
%>
