Solved

ASP/Javascript - please see Q below:

Posted on 2004-04-23
19
269 Views
Last Modified: 2007-12-19
Hi,  I have an ASP page with javascript that basically you select your values from one select box and click to move it to the second box.  This works perfect.  
However, now that those values are moved over, how can I submit those values when I click the SUBMIT button, without reselecting the values in the new box, and then SUBMIT?  IT should basically assume that all values in the second select box are selected.   I am a total javascript dummy, so need help how to do this - assuming this is from the JAva part.  
Here is the code:
<script LANGUAGE="JavaScript">
<!--
function copyToList(from,to){
fromList = eval('document.forms[0].' + from);
toList = eval('document.forms[0].' + to);
if(toList.options.length >0&& toList.options[0].value == 'temp'){
toList.options.length =0;
}var sel =false;
for(i=0;i<fromList.options.length;i++){var current = fromList.options[i];
if(current.selected){
sel =true;
if(current.value == 'temp'){
alert ('You cannot move this text!');
return;
}
txt = current.text;
val = current.value;
toList.options[toList.length]=new Option(txt,val);
fromList.options[i]=null;
i--;
}}if(!sel) alert ('error');
}function allSelect() {
List = document.forms[0].chosen.selectedIndex;
if(List.length && List.options[0].value == 'temp')return;
for(i=0;i<List.length;i++) {
List.options[i].selected =true;
}}
// -->
</SCRIPT>

<form onSubmit="allSelect(); return" method="post">
<p>From:<br>
<select NAME="possible" SIZE="8" MULTIPLE>
<option value="1">One</option>
<option value="2">Two</option>
</select>

<aHREF="javascript:copyToList('possible','chosen')">Add to Booking</a><br>
<aHREF="javascript:copyToList('chosen','possible')">Remove from Booking</a>
<p>To:<br>
<select NAME="chosen" SIZE="8" MULTIPLE>
<option VALUE="temp">Make your choice on the left
</select>
<input TYPE=submit>

</form>
0
Comment
Question by:rsp05
  • 6
  • 5
  • 4
  • +3
19 Comments
 
LVL 6

Expert Comment

by:pillbug22
Comment Utility
How about adding a hidden field on your form?

When you click to move from box 1 to box 2, you write the value of the items being moved into the hidden field.  When you submit your form, the hidden field will hold the values that were moved.
0
 
LVL 10

Expert Comment

by:Shailesh15
Comment Utility
Try This.. Get the values from field 'selection'.

************************************
<script LANGUAGE="JavaScript">
<!--
function copyToList(from,to){
fromList = eval('document.forms[0].' + from);
toList = eval('document.forms[0].' + to);
if(toList.options.length >0&& toList.options[0].value == 'temp'){
toList.options.length =0;
}var sel =false;
for(i=0;i<fromList.options.length;i++){var current = fromList.options[i];
if(current.selected){
sel =true;
if(current.value == 'temp'){
alert ('You cannot move this text!');
return;
}
txt = current.text;
val = current.value;
toList.options[toList.length]=new Option(txt,val);
fromList.options[i]=null;
i--;
}}if(!sel) alert ('error');
}

function allSelect() {
var i;
var List;
List = document.forms[0].chosen;
var sels="";
for (i=0;i<List.options.length;i++)
      sels += List.options[i].text+",";
if(document.forms[0].chosen.selectedIndex.length && document.forms[0].chosen.selectedIndex.options[0].value == 'temp')return;
document.forms[0].selection.value=sels;
}
// -->
</SCRIPT>

<form onSubmit="allSelect(); return" method="post">
<input type="hidden" name="selection">
<p>From:<br>
<select NAME="possible" SIZE="8" MULTIPLE>
<option value="1">One</option>
<option value="2">Two</option>
</select>

<a HREF="javascript:copyToList('possible','chosen')">Add to Booking</a><br>
<a HREF="javascript:copyToList('chosen','possible')">Remove from Booking</a>
<p>To:<br>
<select NAME="chosen" SIZE="8" MULTIPLE>
<option VALUE="temp">Make your choice on the left
</select>
<input TYPE=submit>

</form>
0
 
LVL 10

Expert Comment

by:Shailesh15
Comment Utility
You can also shorten code using...

if(List.selectedIndex.length && List.selectedIndex.options[0].value == 'temp')return;

instead of

if(document.forms[0].chosen.selectedIndex.length && document.forms[0].chosen.selectedIndex.options[0].value == 'temp')return;
0
 
LVL 3

Expert Comment

by:zastil
Comment Utility
<script LANGUAGE="JavaScript">
<!--
function copyToList(from,to){
fromList = eval('document.forms[0].' + from);
toList = eval('document.forms[0].' + to);
if(toList.options.length >0&& toList.options[0].value == 'temp'){
toList.options.length =0;
}var sel =false;
for(i=0;i<fromList.options.length;i++){var current = fromList.options[i];
if(current.selected){
sel =true;
if(current.value == 'temp'){
alert ('You cannot move this text!');
return;
}
txt = current.text;
val = current.value;
toList.options[toList.length]=new Option(txt,val);
fromList.options[i]=null;
i--;
}}if(!sel) alert ('error');
}function allSelect() {
List = document.forms[0].chosen;
for(i=0;i<List.length;i++) {
List.options[i].selected =true;
}
}
// -->
</SCRIPT>

<form onSubmit="allSelect(); return" method="post">
<p>From:<br>
<select NAME="possible" SIZE="8" MULTIPLE>
<option value="1">One</option>
<option value="2">Two</option>
</select>
<input type="button" onclick="allSelect()" value="check all">

<a HREF="javascript:copyToList('possible','chosen')">Add to Booking</a><br>
<a HREF="javascript:copyToList('chosen','possible')">Remove from Booking</a>
<p>To:<br>
<select NAME="chosen" SIZE="8" MULTIPLE>
<option VALUE="temp">Make your choice on the left
</select>

<input TYPE=submit>

</form>
0
 
LVL 3

Expert Comment

by:zastil
Comment Utility
In the script i posted the check all button can be removed just to test the checkall function
0
 
LVL 2

Expert Comment

by:ZeeSparrow
Comment Utility
You're on the right path.  To select all the items in the chosen selectbox, you need to iterate through each one.  Change the allSelect function as follows:

function allSelect() {
for(i=0;i< document.forms[0].chosen.length; i++) {
      document.forms[0].chosen[i].selected=true;
}}


Then for the ASP, you can use this to view the results:

<%
dim chosen
chosen = Request.Form("chosen")
Response.Write chosen & "<BR><BR>"
%>
 
0
 
LVL 6

Expert Comment

by:Lord_McFly
Comment Utility
The following snippet creates a string with the values separated with a "|" which it puts in a hidden field which when your form is selected is collected up and then the values are then split up using the Split()

<%@ Language=VBScript %>
<%
Dim sItems

If Request.Form("AddedItems") <> "" then
      sItems = Split(Request.Form("AddedItems"),"|")
      
      For iLp = 0 to UBound(sItems)
            Response.Write sItems(iLp) & "<br>"
      Next
End If
%>
<html>
<head>
<title>Example</title>
<script language="JavaScript">
<!--
function BuildList()
      {
            var chck
            var i
            var list = ""
            
            for (i=0; i<=document.example.added.length-1; i++)
                  {
                        list = list + document.example.added.options[i].value + "|"
                  }
                        
            list = list.substr(0,list.length-1)
            
            document.example.AddedItems.value = list
            
            document.example.submit()
      }
//-->
</script>
</head>
<body bgcolor="#FFFFFF">
<form name="example" method="post" action="">
      <select name="added">
            <option value="Peter">Peter</option>
            <option value="Roger">Roger</option>
            <option value="Simon">Simon</option>
      </select>
      <input type="hidden" name="AddedItems" value="">
      <input type="button" name="Submit" value="Submit" onClick="BuildList()">
</form>

</body>
</html>
0
 

Author Comment

by:rsp05
Comment Utility
Thanks, all for your replies.

When i try some of them and I do:
first check if <>""" then

<%sel=Trim(Request.Querystring("selection"))
response.write sel%>

It only returns a value if I use "get" instead of "post"

0
 
LVL 2

Expert Comment

by:ZeeSparrow
Comment Utility
If you want to use "get" then use Request.Querystring("selection") to see the results.
If you would rather use "post", use Request.Form("selection").
0
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 10

Expert Comment

by:Shailesh15
Comment Utility
Alternately you could simply type Request("selection")
and retrieve either a querystring or a form input of the same name.
0
 
LVL 2

Expert Comment

by:ZeeSparrow
Comment Utility
True, Shailesh, but for security, accuracy and speed - so long as you know the information is coming from POST/GET, you should use the specific collection.

There are times when you can expect information to come from POST and GET, so using request("selection") is acceptable in such cases.

It's not a habit to get into though as it can cause a lot of head scratching when you get the wrong values.......
0
 
LVL 10

Expert Comment

by:Shailesh15
Comment Utility
Agreed  but it is a solution that works!. Any way I have used it many times & never I had  any problem.

On the lighter side...
If a programmer is dumb enough to code a querystring variable & field name with same name , does need to scratch his head a bit!.... next time he will improve.
0
 

Author Comment

by:rsp05
Comment Utility
Thx, again, guys, but here's the problem:


If I use Request.QueryString, I need to use get, thus displaying the query string

If I use Request.Form, with post, that means I MUST reselect from that box.

So, what's my best option?

I will close this topic shortly.
0
 
LVL 10

Expert Comment

by:Shailesh15
Comment Utility
I would go for hidden field with Post method.
0
 

Author Comment

by:rsp05
Comment Utility
Ok, but my original goal was NOT have to reselect the values in the second left-hand box
0
 
LVL 2

Accepted Solution

by:
ZeeSparrow earned 125 total points
Comment Utility
You do not have to reselect the values to get them using Request.Form.

Modify your  allSelect function as I mentioned above:

function allSelect() {
for(i=0;i< document.forms[0].chosen.length; i++) {
     document.forms[0].chosen[i].selected=true;
}}

Try it.  It works.
0
 

Author Comment

by:rsp05
Comment Utility
Excellent!  ZeeSparrow, thanks!

Since the solutions and answers that I used most are from ZeeSparrow and Shailesh15, and you guys kept me throughout the thread, the fair thing to do is split the points.

The only thing is when I try to do that, I can't select two answers, it only allows me to select one radio buttion.

Shailesh15=62.5
ZeeSparrow=62.5
0
 
LVL 10

Expert Comment

by:Shailesh15
Comment Utility
That part you have to code to read the selection field values & move records from left to right using Javscript or ASP.

Insert this script after form close tag:
****************************************
<script LANGUAGE="JavaScript">
<!--

var selectstr="One,Two,"
// Need to update from ASP request.form("selection")
//var selectstr="<%=request.form("selection")%>"
var ArrSel
var k
ArrSel =selectstr.split(",")

for(k=0;k<ArrSel.length-1;k++)
{
      fromList = document.forms[0].possible;
      toList = document.forms[0].chosen;
      if(toList.options.length >0&& toList.options[0].value == 'temp'){
            toList.options.length =0;
      }
      var sel =false;
      for(i=0;i<fromList.options.length;i++)
            {var current = fromList.options[i];
                  if(current.text==ArrSel[k]){
                  sel =true;
                  txt = current.text;
                  val = current.value;
                  toList.options[toList.length]=new Option(txt,val);
                  fromList.options[i]=null;
                  i--;
            }
}
}
// -->
</SCRIPT>
0
 
LVL 2

Expert Comment

by:ZeeSparrow
Comment Utility
To split the points - see the following for instructions:

http://www.experts-exchange.com/Web/Web_Languages/ASP/help.jsp#hi19

Thanks, and good luck!
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Using AJAX to call classic ASP function 4 67
Syntax Help on SP 4 52
Update field in order 21 108
Using querystring in a hyperlink 3 34
I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
I would like to start this tip/trick by saying Thank You, to all who said that this could not be done, as it forced me to make sure that it could be accomplished. :) To start, I want to make sure everyone understands the importance of utilizing p…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…

728 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now