By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,458 Members | 1,215 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,458 IT Pros & Developers. It's quick & easy.

Pass on values from drop-down box

P: n/a
Hello all,
I wonder if anybody can give me a hint about what I have to do to get
this working: I am creating a drop down box using the script below. The

result is two text fields; now I want to pass those values, which come
from the drop down box, to the next page. The next page should then
simply look like this:
Month:
Year:
And the values should be the ones from the drop-down box...
I have been staring myself blind about how to get this accomplished.
Would be more than grateful if somebody could have a look...here is
what I got so far:
<script language="JavaScript"><!--
function setForm2Value() {
var selectedItem = document.formName1.selectName1.selectedIndex;
var selectedItemValue =
document.formName1.selectName1.options[selectedItem].value;
var selectedItemText =
document.formName1.selectName1.options[selectedItem].text;
if (selectedItem != 0) {
document.formName2.textboxName1.value = selectedItemText;
document.formName2.textboxName2.value = selectedItemValue;
}
else {
document.formName2.textboxName1.value = "";
document.formName2.textboxName2.value = "";

}
}
//--></script>
Incident Level <br>
<form name="formName1">
<select name="selectName1" onChange="setForm2Value()">
<option>Make A Selection:
<option value="2000">January
<option value="2001">February
<option value="2002">March
</select>
</form>

<p>
<form name="formName2" method="POST" action="step2.htm">
<input type="text" name="textboxName1" value="" size="20"> Euro
<input type="text" name="textboxName2" value="" size="6">
<input type="submit" VALUE="Next" class=button>
</FORM>
This creates the drop down list, and when a selection is made, two
textboxes at the bottom are filled. When I hit the ´Next´ button,
that takes me to the new page. So far, so good. The problem is: how do
I get the values from those two textboxes to two new text fields on the

new page ? I have been staring at this for the last two days, and tried

about everything I could find in sample codes, but I must be doing
something wrong, because the values do not appear on the new page. Can
anybody provide me with a hint, or better yet, some sample code ?
Thanks a bunch in advance !
Naz

Nov 25 '05 #1
Share this Question
Share on Google+
19 Replies


P: n/a
"nazgulero" <ge**********@wanadoo.nl> wrote in message
news:11**********************@g49g2000cwa.googlegr oups.com...
Hello all,
I wonder if anybody can give me a hint about what I have to do to get
this working: I am creating a drop down box using the script below. The

result is two text fields; now I want to pass those values, which come
from the drop down box, to the next page. The next page should then
simply look like this:
<snipped />
<form name="formName2" method="POST" action="step2.htm">
<input type="text" name="textboxName1" value="" size="20"> Euro
<input type="text" name="textboxName2" value="" size="6">
<input type="submit" VALUE="Next" class=button>
</FORM>

This creates the drop down list, and when a selection is made, two
textboxes at the bottom are filled. When I hit the ´Next´ button,
that takes me to the new page. So far, so good. The problem is: how do
I get the values from those two textboxes to two new text fields on the
new page ? I have been staring at this for the last two days, and tried


You need server-side code to do that...

You post your two textboxes to the next page, so all is well so far.
But the next page is a .htm file (step2.htm", with no ability to run
serverside script to extract the data you posted.

As an example (using ASP on the server):

* Replace "step2.htm" with step2.asp, and put this in the .asp file:
<%@LANGUAGE="VBSCRIPT"%>
<%
Dim monthValue
monthValue = Request.Form("textboxName1")

Dim yearValue
yearValue = Request.Form("textboxName2")
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Page Title</title>
</head>

<body>
<p>Month: <%=monthValue%></p>
<p>Year: <%=yearValue%></p>
</body>
</html>

--
Dag.
Nov 25 '05 #2

P: n/a

Hello Dag,

great, thanks for your quick help. I´ll give that a try and let you know
!

Regards,

Naz
*** Sent via Developersdex http://www.developersdex.com ***
Nov 25 '05 #3

P: n/a
nazgulero wrote:
Hello all,
I wonder if anybody can give me a hint about what I have to do to get
this working: I am creating a drop down box using the script below. The

The following example may help:

<!-- Page 1 HTML: -->

<html>
<title>Play</title>

<form action="page2.html">
<select name="month">
<option>January</option>
<option>February</option>
<option>March</option>
</select>
<select name="year">
<option>2005</option>
<option>2006</option>
<option>2007</option>
</select>
<input type="submit">
<form>
</html>
<!-- Page 2 HTML: -->

<html> <title>page 2</title>
<script type="text/javascript">
function getMonthYear(){
var s = window.location.search.replace(/^\?/,'').split('&');
for (var i=0, len=s.length; i<len; ++i){
var x = s[i].split('=');
document.getElementById(x[0]).innerHTML = x[1];
}
}
</script>
<body onload="getMonthYear();">

<span id="month"></span>&nbsp;<span id="year"></span>
</body></html>

--
Rob
Nov 25 '05 #4

P: n/a
Hello Rob,

thanks a bunch for your help. The problem seems to be that the script I
am using creates two text boxes, filled with values form the drop down
box. Now I need to get those two values to two separate text boxes on
the next page. Also, the values need to appear not next to each other,
but in two different lines...
I will try to tweak your script and see if I somehow get it working.
Thanks again for your response.

Regards,

Naz

*** Sent via Developersdex http://www.developersdex.com ***
Nov 25 '05 #5

P: n/a
Hello Dag,

sorry to bother you again. I have tried your script, but still nothing
is being sent. Here is the code I am using:

On page 1:
<script language="JavaScript"><!--
function setForm2Value() {
var selectedItem =
document.formName1.selectName1.selectedIndex;
var selectedItemValue =
document.formName1.selectName1.options[selectedItem].value;
var selectedItemText =
document.formName1.selectName1.options[selectedItem].text;

if (selectedItem != 0) {
document.formName2.textboxName1.value = selectedItemText;
document.formName2.textboxName2.value = selectedItemValue;
}
else {
document.formName2.textboxName1.value = "";
document.formName2.textboxName2.value = "";
}
}
//--></script>
Incident Level <br>
<form name="formName1">
<select name="selectName1" onChange="setForm2Value()">
<option>Make A Selection:
<option value="January">2004
<option value="February">2006
<option value="March">2005
</select>
</form>

<p>

<form name="formName2" action="page2.asp">
<input type="text" name="textboxName1" value="" size="20">
<input type="text" name="textboxName2" value="" size="6"><br><br>
<input type="submit" value="Continue">
</form>

And on page 2:
<%@LANGUAGE="VBSCRIPT"%>
<%
Dim monthValue
monthValue = Request.Form("textboxName1")

Dim yearValue
yearValue = Request.Form("textboxName2")
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="page1.htm">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Page title</title>
</head>

<body>
<p>Month: <%=monthValue%></p>
<p>Year: <%=yearValue%></p>
</body>
</html>

I can see both the ´Month´ and ´Year´ fields on the new page, page2.asp,
but nothing gets passed on from the previous page...
I am at a loss, been looking at this for too long probably...do you see
anything wrong with this code ?

Thanks again for your help.

Regards,

Naz
*** Sent via Developersdex http://www.developersdex.com ***
Nov 25 '05 #6

P: n/a
Georg Pauwen wrote:
Hello Dag,
Instead of strangely addressing _one_ individual in a public medium
where _everybody_ may read and post (otherwise you should use private
e-mail), you should quote what you are referring to, trim quotes and
provide attribution of quoted material, as described in
<URL:http://jibbering.com/faq/faq_notes/pots1.html>.
<script language="JavaScript"><!-- [1]^^^^^^^^^^^^^^^^^^^^^ ^^^^[2]
[1] Use <URL:http://validator.w3.org/> before complaining.

[2] It is both unnecessary and potentially harmful to use
SGML comment delimiters at this point.
function setForm2Value() {
function setForm2Value(f)
{
var selectedItem =
document.formName1.selectName1.selectedIndex;
var selectedItemValue =
document.formName1.selectName1.options[selectedItem].value;
var selectedItemText =
document.formName1.selectName1.options[selectedItem].text;
Inefficient, error-prone and hard to maintain (what if the form name
changes?). Instead use:

if (f && f.elements)
{
var
o,
selectedItem =
(o = f.elements['selectName1']).options[o.selectedIndex];
if (selectedItem != 0) {
document.formName2.textboxName1.value = selectedItemText;
document.formName2.textboxName2.value = selectedItemValue;
}
else {
document.formName2.textboxName1.value = "";
document.formName2.textboxName2.value = "";
}
I do not understand why it would be necessary to use a second form.
FWIW, instead use:

var
f2 = document.forms['formName2'],
f2t1 = f2.elements['textboxName1'],
f2t2 = f2.elements['textboxName2'];

if (o.selectedIndex != 0)
{
f2t1.value = selectedItem.text;
f2t2.value = selectedItem.value;
}
else
{
f2t1.value = "";
f2t2.value = "";
}
} }
//--></script> ^^^^^
See above.
Incident Level <br>
If you have a heading, use an `hX' (X := 1..6) element.
<form name="formName1">
<select name="selectName1" onChange="setForm2Value()">
<option>Make A Selection:
The `option' element's close tag should be used.
<option value="January">2004
<option value="February">2006
<option value="March">2005
</select>
</form>

<p>

<form name="formName2" action="page2.asp">
<input type="text" name="textboxName1" value="" size="20">
<input type="text" name="textboxName2" value="" size="6"><br><br>
type="text" is the default here, it can be safely omitted. Do not use
`br' for margins, use block-elements like `div' being formatted via CSS.
<input type="submit" value="Continue">
</form>

And on page 2:
<%@LANGUAGE="VBSCRIPT"%>
<%
Dim monthValue
monthValue = Request.Form("textboxName1")

Dim yearValue
yearValue = Request.Form("textboxName2")
%>
That could also be

<%@LANGUAGE = JScript %>
<%
var monthValue = Request.Form("textboxName1");
var yearValue = Request.Form("textboxName2");
%>

However, Request.Form() retrieves POST data. You are using GET (default for
the `form' element is method="GET"). Either you switch to method="POST" in
your markup or switch to Request.QueryString() in your server-side script
code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="page1.htm">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
See the W3C Validator again, and <URL:http://hixie.ch/advocacy/xhtml>
<title>Page title</title>
</head>

<body>
<p>Month: <%=monthValue%></p>
<p>Year: <%=yearValue%></p>
</body>
</html>

I can see both the ?Month? and ?Year? fields on the new page, page2.asp,
but nothing gets passed on from the previous page...
I am at a loss, been looking at this for too long probably...do you see
anything wrong with this code ?


Plenty.
HTH

PointedEars
Nov 25 '05 #7

P: n/a
Thomas 'PointedEars' Lahn wrote:
Georg Pauwen wrote:
function setForm2Value() {


function setForm2Value(f)
{
var selectedItem =
document.formName1.selectName1.selectedIndex;
var selectedItemValue =
document.formName1.selectName1.options[selectedItem].value;
var selectedItemText =
document.formName1.selectName1.options[selectedItem].text;


Inefficient, error-prone and hard to maintain (what if the form name
changes?). Instead use:

if (f && f.elements)
{
[...]
<form name="formName1">
<select name="selectName1" onChange="setForm2Value()">


Of course this line then has to be changed to

<select name="selectName1" onChange="setForm2Value(this.form)">

as well. Which is why it is prudent to use

function setForm2Value(o)
{
if (o)
{
var f = o.form;

if (f && f.elements)
// inferring feature test for formName2 later -- comments?
{
// o is already properly defined
var selectedItem = o.options[o.selectedIndex];
// ...
}
}
}

<select name="selectName1" onChange="setForm2Value(this)">
...
</select>

instead.
PointedEars
Nov 25 '05 #8

P: n/a
"Georg Pauwen" <ge**********@wanadoo.nl> wrote in message
news:0Q*************@news.uswest.net...
Hello Dag,

sorry to bother you again. I have tried your script, but still nothing
is being sent. Here is the code I am using:

On page 1:
<snipped />

<form name="formName2" action="page2.asp">
<input type="text" name="textboxName1" value="" size="20">
<input type="text" name="textboxName2" value="" size="6"><br><br>
<input type="submit" value="Continue">
</form>


Add the "method=" attribute to the form element, and set it to POST:

<form name="formName2" action="page2.asp" method="POST">

--
Dag.
Nov 25 '05 #9

P: n/a
Hello,

thanks everybody for the continued support. To be honest, most of the
replies are way over my head, I actually thought that it was much easier
to just pass the two values in the text box on to the next page. My
server apparently does not support ASP, so I have to use HTML or JAVA
scripting.
I think what I am looking for is more a beginner´s forum, where people
are not expected to know all the intricacies of scripting, and where, it
seems to me, and that is because I am not an experienced user, things
get ever more complicated.
So, I apologize for taking up people´s time, I think this forum is more
for real developers and people that have been working with scripting for
a long time, rather than for beginners...

So, thanks again for the support, and I apologize for inappropriately
posting here.

Regards,

Naz

*** Sent via Developersdex http://www.developersdex.com ***
Nov 25 '05 #10

P: n/a
Georg Pauwen wrote:
thanks everybody for the continued support.
You're welcome.
To be honest, most of the replies are way over my head,
Are you incapable of learning?
Are you incapable of asking about things you did not understand?
Hopefully not.
I actually thought that it was much easier to just pass the two values
in the text box on to the next page. My server apparently does not
support ASP, so I have to use HTML or JAVA scripting.
First you have to understand that JavaScript is not Java, that HTML is not
a programming language (and that Java is, in contrast to HTML, no acronym).

And ASP is a server-side CGI application platform (often one using the IIS
API), not a language. As I pointed out, it is entirely possible to use
JScript (kind of Microsoft's JavaScript dialect) for those applications.

However, it is possible to pass values to another document resource solely
with client-side scripting: use your web form and in the target document
use the `location.search' property. Whether that is a viable approach is
a different matter as client-side script support as well as host objects
and their properties do not need to be present.
I think what I am looking for is more a beginner?s forum, where people
are not expected to know all the intricacies of scripting, and where, it
seems to me, and that is because I am not an experienced user, things
get ever more complicated.


A "beginner forum" (whatever that might be) will not provide you with
(information on how to create) interoperable code, that's for sure.
PointedEars
Nov 25 '05 #11

P: n/a
Hello,

thanks for your help.
Would you happen to have a sample code using the location.search for my
specific purpose ?

Regards,

Naz
*** Sent via Developersdex http://www.developersdex.com ***
Nov 25 '05 #12

P: n/a
Hello,

thanks for your help.
Would you happen to have a sample code using the location.search for my
specific purpose ?

Regards,

Naz
*** Sent via Developersdex http://www.developersdex.com ***
Nov 25 '05 #13

P: n/a
Georg Pauwen wrote:
Would you happen to have a sample code using the location.search
for my specific purpose ?


In the "sending" document, use your current form (and reasonable
element names) but do not use method="POST". This will include
the control's names and values URLencoded in a GET request when
it is submitted.

In the "receiving" document (specified in the `action' attribute
value of the aforementioned `form' element), use

<script type="text/javascript" src="search.js"></script>
<script type="text/javascript">
if (location.search)
{
// split components into properties used below
var s = new SearchString();

document.write([
"Month: " + s.getValue("month") + "<br>",
"Year: " + s.getValue("year")
].join("\n"));
}
</script>

somewhere appropriate in the `body' element.

Examples of a possible content of search.js which would need
to provide the SearchString prototype, have been posted before,
search for "location.search split", for example.
PointedEars
Nov 25 '05 #14

P: n/a
Hello,

great, thanks a bunch, I will give that a try and piece it all together
!

Regards,

Naz
*** Sent via Developersdex http://www.developersdex.com ***
Nov 25 '05 #15

P: n/a
Georg Pauwen wrote:
Hello,

thanks for your help.
Would you happen to have a sample code using the location.search for my
specific purpose ?


That's what my first reply used in the function to get the year and
month values. I've repeated it in a simplified form below with comments.

The search string will be something like:

&month=January&year=2003
function getMonthYear(){

// Get the search string from the URL
var s = window.location.search;

// Remove the leading '?'
s = s.replace(/^\?/,'');

// Split it into an array using the '&' character
s = s.split('&');

// Now s is now an array of the name/value pairs from the
// search string, from the example: ['month=January', 'year=2003']

// For each element in s (the array of bits of the search string)
for (var i=0, len=s.length; i<len; ++i){

// Split the element using the '='
var x = s[i].split('=');

// Use the name part x[0] and the value part x[1]
// From the example,
// the 1st time thu x[0] is month and x[1] is January
// the 2nd time thu x[0] is year and x[1] is 2003
document.getElementById(x[0]).innerHTML = x[1];
}
}

--
Rob
Nov 25 '05 #16

P: n/a
RobG wrote:

[...]
The search string will be something like:

&month=January&year=2003


Ooops:

?month=January&year=2003
[...]
--
Rob
Nov 25 '05 #17

P: n/a
Hello,

thanks for your response. Actually, your initial post was very useful.
The only problem is that my code does not create two drop down boxes,
but two text boxes based on one value selected from a drop down box. Now
I need to pass those two textbox values on to the next page...
Here is the initial code again, maybe you can run it, you´ll see what
the difference is:

<script language="JavaScript"><!--
function setForm2Value() {
var selectedItem = document.formName1.selectName1.selectedIndex;
var selectedItemValue
document.formName1.selectName1.options[selectedItem].value;
var selectedItemText
document.formName1.selectName1.options[selectedItem].text;
if (selectedItem != 0) {
document.formName2.textboxName1.value = selectedItemText;
document.formName2.textboxName2.value = selectedItemValue;
}
else {
document.formName2.textboxName1.value = "";
document.formName2.textboxName2.value = "";

}
}
//--></script>
Incident Level <br>
<form name="formName1">
<select name="selectName1" onChange="setForm2Value()">
<option>Make A Selection:
<option value="2000">January
<option value="2001">February
<option value="2002">March
</select>
</form>

<p>
<form name="formName2" action="step2.htm">
<input type="text" name="textboxName1" value="" size="20">
<input type="text" name="textboxName2" value="" size="6">
<input type="submit" VALUE="Next" class=button>
</FORM>

I will try and play around with your suggestions, as well as those made
by the other posts. Of course, if you have any ideas, I would be more
than grateful !

Regards,

Naz


*** Sent via Developersdex http://www.developersdex.com ***
Nov 26 '05 #18

P: n/a
On 2005-11-25, nazgulero <ge**********@wanadoo.nl> wrote:

This creates the drop down list, and when a selection is made, two
textboxes at the bottom are filled. When I hit the ´Next´ button,
that takes me to the new page. So far, so good. The problem is: how do
I get the values from those two textboxes to two new text fields on the

new page ? I have been staring at this for the last two days, and tried

about everything I could find in sample codes, but I must be doing
something wrong, because the values do not appear on the new page. Can
anybody provide me with a hint, or better yet, some sample code ?
Thanks a bunch in advance !


you can't easily pass the vaues between pages on the client side,
but you can echo them back in hidden fields.

have your server-side cgi script emit somethinge like this in the form
on the second page....

<input type="hidden" name="value1 value="the first value goes here" />
<input type="hidden" name="value2 value="the second value goes here" />

when that form is finally submitted you'll get those values back.
when you get that form back do a validation on all the fields, someone
naughty might fiddle the hidden fields.

Bye.
Jasen
Nov 26 '05 #19

P: n/a
On 2005-11-25, Georg Pauwen <ge**********@wanadoo.nl> wrote:
Hello,

thanks everybody for the continued support. To be honest, most of the
replies are way over my head, I actually thought that it was much easier
to just pass the two values in the text box on to the next page. My
server apparently does not support ASP, so I have to use HTML or JAVA
scripting.
ASP is not the only way. what does your server support?
I think what I am looking for is more a beginner´s forum, where people
are not expected to know all the intricacies of scripting, and where, it
seems to me, and that is because I am not an experienced user, things
get ever more complicated.
without some sort of server-side scripting what is the purpose of the form?
So, I apologize for taking up people´s time, I think this forum is more
for real developers and people that have been working with scripting for
a long time, rather than for beginners...

--

Bye.
Jasen
Nov 27 '05 #20

This discussion thread is closed

Replies have been disabled for this discussion.