Pass on values from drop-down box

N

nazgulero

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
 
D

Dag Sunde

nazgulero said:
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:
Click to expand...
<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
Click to expand...

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>
 
R

RobG

nazgulero said:
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
Click to expand...


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.split('=');
document.getElementById(x[0]).innerHTML = x[1];
}
}
</script>
<body onload="getMonthYear();">

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

Georg Pauwen

Hello Dag,

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

Regards,

Naz
 
G

Georg Pauwen

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
 
G

Georg Pauwen

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
 
T

Thomas 'PointedEars' Lahn

Georg said:
Hello Dag,
Click to expand...

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
<script language="JavaScript"><!--
Click to expand...
[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() {
Click to expand...

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;
Click to expand...

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 = "";
}
Click to expand...

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>
Click to expand...
^^^^^
See above.
Incident Level <br>
Click to expand...

If you have a heading, use an `hX' (X := 1..6) element.
<form name="formName1">
<select name="selectName1" onChange="setForm2Value()">
<option>Make A Selection:
Click to expand...

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>
Click to expand...

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")
%>
Click to expand...

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" />
Click to expand...

See the W3C Validator again said:
<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 ?
Click to expand...

Plenty.


HTH

PointedEars
 
T

Thomas 'PointedEars' Lahn

Thomas said:
Georg said:
function setForm2Value() {
Click to expand...

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;
Click to expand...

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()">
Click to expand...
Click to expand...

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
 
D

Dag Sunde

Georg Pauwen said:
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:
Click to expand...
<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>
Click to expand...

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

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

Georg Pauwen

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
 
T

Thomas 'PointedEars' Lahn

Georg said:
thanks everybody for the continued support.
Click to expand...

You're welcome.
To be honest, most of the replies are way over my head,
Click to expand...

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.
Click to expand...

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.
Click to expand...

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


PointedEars
 
G

Georg Pauwen

Hello,

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

Regards,

Naz
 
G

Georg Pauwen

Hello,

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

Regards,

Naz
 
T

Thomas 'PointedEars' Lahn

Georg said:
Would you happen to have a sample code using the location.search
for my specific purpose ?
Click to expand...

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
 
G

Georg Pauwen

Hello,

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

Regards,

Naz
 
R

RobG

Georg said:
Hello,

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

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.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];
}
}
 
G

Georg Pauwen

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Pass on values from drop-down box 3
Dependent Drop Downs 1
Not sure why drop-down is not working. 2
How to create a JSON array with values from DOM(HTML TABLE) when I click a button using JQuery/Javascript? 0
Add Image and label dynamically inside the dropdown 2
Cascading drop-down restructuring 12
HCaptcha - How to stop page from refreshing on submit if captcha is not checked/validated 1
Javascript Auto-select drop-down box 2

Members online

Total: 33 (members: 2, guests: 31)
Robots: 339

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,071
Latest member
MetabolicSolutionsKeto

Latest Threads

Top